Scribd
Upload
10 views

Grade-9-Lecture-3rd-Quarter

This lecture introduces JavaScript as a programming language for web development, highlighting its ability to make web pages interactive and manipulate HTML content through the Document Object Model (DOM). It covers key concepts such as JavaScript objects, properties, methods, looping statements, and arrays, emphasizing their importance in efficiently managing and displaying data on web pages. The lecture also provides examples and best practices for using JavaScript in HTML documents.

Uploaded by

yannie.clie
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
10 views

Grade-9-Lecture-3rd-Quarter

This lecture introduces JavaScript as a programming language for web development, highlighting its ability to make web pages interactive and manipulate HTML content through the Document Object Model (DOM). It covers key concepts such as JavaScript objects, properties, methods, looping statements, and arrays, emphasizing their importance in efficiently managing and displaying data on web pages. The lecture also provides examples and best practices for using JavaScript in HTML documents.

Uploaded by

yannie.clie
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

Grade 9 Lecture (3rd Quarter)

GETTING TO KNOW JAVASCRIPT


What is JavaScript? Well, JavaScript is said to be the programming language of the web. It makes web
pages interactive. It is a scripting language (high - level programming language that is interpreted by
another program during runtime) that can change the content of an HTML element, change the style of
a page and validate user’s input. Aside from what was mentioned, there are many more exciting
features JavaScript can do.
To include JavaScript to your HTML pages, you can place it in the BODY or HEAD section of an HTML
page using the <script> tag.

Please take note that you can place any number of scripts in an HTML document. To improve page load,
it is recommended for you to place all your scripts at the bottom of the BODY section.
CHANGING HTML CONTENT USING JAVASCRIPT
To manipulate HTML element, it is best to learn about HTML DOM. What is HTML DOM? When a web
page is loaded, the browser produces a Document Object Model (also known as DOM) of the page. The
DOM defines the following:
 HTML elements as objects
 Properties of each HTML element
 Methods to access all HTML element
 Events associated to each HTML element
You can access the DOM using JavaScript.
Example

In this example, the code changes the content of the paragraph element with ID = “demo”. With the use
of getElementById method, we were able to access the <p> element. As a review, a method is an action
you can do to an element. To change the content of the element, we need to set
the innerHTML property to our desired value. A property is a value of an element that you can access or
change.
The following are example of methods and properties you can use to access and manipulate HTML
elements:

You can also use the following shortcut keys.


 For FireFox CTRL + ALT + SHIFT + X
 For IE CTRL + ALT + SHIFT + I
 For Chrome CTRL + ALT + SHIFT + R
 For Safari CTRL + ALT + SHIFT + F

As a developer, it would be a hassle for you to type the HTML codes to write each item on the web page.
Picture this, you have to display 30 items for men’s clothes, 30 for women’s clothes, 30 for men’s
accessories, 30 for women’s accessories, 30 for men’s shoes and another 30 for women’s shoes. It
would take a huge amount of time to input the code for each item right? What if you want to update the
price of an item or want to add another item or remove an item from your list? The best thing about
JavaScript is that it can create a program logic to write HTML contents for you.

In writing the code for loading each product item on the webpage, you might have notice that there is a
recurring pattern. There are information that is changing specific for a particular product. In this lecture,
you’re going to learn about JavaScript Object and how we can use it in storing information about our
product items. You’ll also know about JavaScript looping statement to save us time and effort in writing
repetitive codes. And last is applying JavaScript arrays in storing and accessing specific product items.

GETTING TO KNOW JAVASCRIPT OBJECTS


An object in JavaScript is a standalone entity, with properties and method. To better understand the
definition of object in JavaScript, let’s compare it to a real life object, perhaps a pen. A pen is an object
and it has properties. A pen has color, style, brand, weight, length, etc. These properties defines the
characteristics of the pen. However, the property values of each pen differs from one another. Some
pen has blue ink, others has black. Similar to JavaScript object, it also has properties associated with it
which defines their characteristics. Let’s take a look at the example below:

In the given example, the object person is used as container for the data value. Objects are variables too
but not like other variables it can contain more than one value.
In the code above, more than one value are assigned to variable person. The values are written as name
and value separated by colon. These pairs are called properties.
Please take note that spaces and line breaks are not important. Defining an object can span to multiple
lines.
Aside from properties, JavaScript object has methods. For example, in real life, a pen can write, right? In
JavaScript, methods are actions that can be performed on objects. In our example below,
the person object can return a message.

Methods are stored in properties as function definitions.


ACCESSING JAVASCRIPT OBJECTS
To access object properties, take a look at the example below...

USING LOOPING STATEMENTS


Have you ever code something, only to realize that some block of lines are repetitive? If yes, then you
have to use looping statements. These are used to execute the same block of code for a specific number
of times.
Example:

USING JAVASCRIPT ARRAYS


You might be wondering, what is an array? It is a special variable, which can hold multiple values at a
time.
Example:

var persons = ["William", "Richard", "Bruce"];

In this example, there are three values stored in variable persons “William”, “Richard” and “Bruce”. You
can access the values by referring to their index numbers.
To create an array, you can use an array literal just like the example above. You can also use the
JavaScript keyword new...
Example:

var persons = new Array("William", "Richard", "Bruce");

Performance-wise, using the array literal method is recommendable in creating arrays, although both
methods do exactly the same.
To access the elements of an array, here is an example:

document.write("Name: "+persons[0]);

As what was mentioned earlier, you can access an array element by referring to their index. Array
indexes start with 0. So that means that persons[0] is the first element, persons[1] is the second, so on
and so forth.
Arrays can have different objects in one array. You can have objects, functions and arrays in an array.
Arrays are considered as a special type of objects. The difference between arrays and objects is that
arrays make use of index numbers to access its elements while objects makes use of names to access its
properties/members.
Example:

var person = ["William", "Smith", 56];

In arrays, person[0] returns "William".

var person = {firstname: "William", surname: "Smith", age: 56};

In objects, person.firstname returns "William".


LOOPING THROUGH ARRAY ELEMENTS
To loop through an array, the best way is to use a for loop statement.
Example:

var persons = ["William", "Richard", "Bruce", "Joshua", "Sam"];


for (var i = 0; i < persons.length; i++) {
text += persons[i];
}

Where .length returns the total number of elements in the array.

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy