04-JS.pptx

Agenda
1. Introduction
2. JS Output
3. JS Statements
4. JS Syntax
5. JS Comments
6. JS Variables
7. JS Assignments
8. JS Data Types
2
9. JS Functions
10. JS Math Objects
11. JS Conditions
12. JS Loops
13. JS Events
14. JS Forms

What is JavaScript?
● JavaScript is the programming language of HTML and the Web.
● JavaScript was introduced in 1995 as a way to add programs to web pages in
the Netscape Navigator browser.
● The language has since been adopted by all other major graphical web
browsers.
● It has made modern web applications possible. Applications with which you
can interact directly without doing a page reload for every action.
4

Why Study JavaScript?
● JavaScript is one of the 3 languages all web developers must learn:
○ HTML to define the content of web pages
○ CSS to specify the layout of web pages
○ JavaScript to program the behavior of web pages
● Web pages are not the only place where JavaScript is used.
● Many desktop and server programs use JavaScript. Node.js is the best known.
● Some databases, like MongoDB and CouchDB, also use JavaScript as their
programming language.
5

What Can JavaScript Do?
● These are some examples of what JS can do with HTML:
○ JS can change HTML content
○ JS can change HTML attribute values
○ JS can change HTML styles (CSS)
○ JS can hide HTML elements
○ JS can show HTML elements
○ REACT TO EVENTS (A button is pressed )
○ For example:
• Add a paragraph of text after the first <hl> element
• Change the value of class attributes to trigger new CSS rules for those elements
• Change the size or position of an <img> element
6

Where To Write JS?
● Internal JS
The <script> Tag: In HTML, JavaScript code must be inserted between <script>
and </script> tags.
Scripts can be placed in the <body>, or in the <head> section of an HTML
page, or in both.
<script>
… JavaScript code goes here
</script>
● External JS
Scripts can also be placed in external *.js files. To use an external script, put
the name of the script file in the src attribute of a <script> tag
<script src="my_script.js"></script>
7

Where To Write JS?
● Internal JS
● External JS
8

JavaScript Output
● JavaScript can "display" data in different ways:
○ Writing into an HTML element, using innerHTML.
○ Element is accessed using document.getElementById()
function
○ Writing into the HTML output using document.write().
○ Writing into an alert box, using window.alert().
○ Writing into the browser console, using console.log().
10

Using innerHTML
● To access an HTML element, JavaScript can use the
document.getElementById(id) method.
● The id attribute defines the HTML element.
● The innerHTML property defines the HTML content:
11

Using document.write()
● For testing purposes, it is convenient to use document.write()
● Using document.write() after an HTML document is loaded, will delete all
existing HTML.
12

Using document.write()
13
document.write(lyrics); is invoked during the loading of the page.
Declare it in a function :
<script>
function writeData(){
document.write(‘lyrics’);
}
</script>
invoke the function at a time where the document was fully loaded, and you should
see another behavior.
For example, with a button click :
<button onclick="writeData()">WriteData</button>

Using window.alert()
● You can use an alert box to display data:
14

Using console.log()
● For debugging purposes, you can use the console.log() method to display
data.
15

Js input
17
In JavaScript, we can get user input like this:
var name = window.prompt("Enter your name: ");
alert("Your name is " + name);

JavaScript Programs
● A computer program is a list of "instructions" to be "executed" by a computer.
● In a programming language, these programming instructions are called
statements.
● A JavaScript program is a list of programming statements.
● In HTML, JavaScript programs are executed by the web browser.
19

JavaScript Statements
● JavaScript statements are composed of:
○ Values
○ Operators
○ Expressions
○ Keywords
○ Comments
● Most JavaScript programs contain many JavaScript statements.
● The statements are executed, one by one, in the same order as they are
written.
● Semicolons ; separate JavaScript statements.
● When separated by semicolons, multiple statements on one line are allowed.
20

JavaScript Statements
Var is keyword
Initial value in undefined ;
21
Var is keyword
Initial value in undefined ;

JavaScript White Space
● JavaScript ignores multiple spaces. You can add white space to your script to
make it more readable.
● The following lines are equivalent:
22

Line Length and Line Breaks
● For best readability, programmers often like to avoid code lines longer than 80
characters.
● If a JavaScript statement does not fit on one line, the best place to break it is
after an operator.
23

JavaScript Code Blocks
● JavaScript statements can be grouped together in code blocks, inside curly
brackets { … }.
● The purpose of code blocks is to define statements to be executed together.
● One place you will find statements grouped together in blocks, is in JavaScript
functions:
24

JavaScript Keywords
● JavaScript statements often start with a keyword to identify the JavaScript
action to be performed.
● Here is a list of some of the keywords you will learn about in this course:
25

JavaScript Values
28
● The JavaScript syntax defines two types of values: Fixed values and variable
values.
● Fixed values are called literals.
○ Numbers are written with or without decimals
○ Strings are text, written within double or single quotes
● Variable values are called variables.
○ Variables are used to store data values.
○ JavaScript uses the var keyword to declare variables
○ An equal sign is used to assign values to variables

JavaScript Operators
● JavaScript uses arithmetic operators ( + - * / ) to compute values.
● JavaScript uses an assignment operator ( = ) to assign values to variables
29

JavaScript Expressions
● An expression is a combination of values, variables, and operators, which
computes to a value.
● The computation is called an evaluation. For example, 5 * 10 evaluates to 50.
● Expressions can also contain variable.
30

JavaScript Identifiers
● Identifiers are names.
● In JavaScript, identifiers are used to name variables (and keywords, and
functions, and labels).
● The rules for legal names are much the same in most programming languages.
● In JavaScript, the first character must be a letter, or an underscore (_), or a
dollar sign ($).
● Subsequent characters may be letters, digits, underscores, or dollar signs.
● All JavaScript identifiers are case sensitive.
31

JavaScript and Camel Case
● Historically, programmers have used different ways of joining multiple words
into one variable name:
○ Hyphens
first-name, last-name, master-card, inter-city (invalid JS )
○ Underscore
first_name, last_name, master_card, inter_city
○ Upper Camel Case (Pascal Case)
FirstName, LastName, MasterCard, InterCity
○ Lower Camel Case
firstName, lastName, masterCard, interCity
● JavaScript programmers tend to use camel case that starts with a lowercase.
32

JavaScript Comments
● JavaScript comments can be used to explain JavaScript code, and to make it
more readable.
● JavaScript comments can also be used to prevent execution, when testing
alternative code.
34

Single Line Comments
● Single line comments start with //
● Any text between // and the end of the line will be ignored by JavaScript (will
not be executed).
35

Multi-line Comments
● Multi-line comments start with /* and end with */
● Any text between /* and */ will be ignored by JavaScript.
36

Using Comments to Prevent Execution
● Using comments to prevent execution of code is suitable for code testing.
● Adding // in front of a code line changes the code lines from an executable line
to a comment.
37

Value Data Types
Values assigned to variables fall under a few data types:
● Undefined :The variable is declared by giving it a name, but no value:
var foo;
alert(foo); // Will open a dialog containing "undefined"
● Null :Assigns the variable no inherent value:
var foo = null;
alert(foo); // Will open a dialog containing "null"
● Numbers :When you assign a number (e.g., 5), JavaScript treats it as a number (you don’t need to tell
it it's a number):
var foo = 5;
alert(foo + foo); // This will alert "10"

Value Data Types (cont’d)
● Strings :If the value is wrapped in single or double quotes, it is treated as a string of text:
var foo = "five";
alert(foo); // Will alert "five"
alert(foo + foo); // Will alert "fivefive"
● Booleans :Assigns a true or false value, used for scripting logic:
var foo = true; // The variable "foo" is now true
● Arrays :A group of multiple values (called members) assigned to a single variable.
○ Values in arrays are indexed (assigned a number starting with 0). You can refer to array values by their index numbers:
var foo = [5, "five", "5"];
alert( foo[0] ); // Alerts "5"
alert( foo[1] ); // Alerts "five"
alert( foo[2] ); // Also alerts "5"

JavaScript Variables
● JavaScript variables are containers for storing data values.
● From the example above, you can expect:
○ x stores the value 5
○ y stores the value 6
○ z stores the value 11
41

Much Like Algebra
● In programming, just like in algebra, we use variables (like price1) to hold
values.
● In programming, just like in algebra, we use variables in expressions (total =
price1 + price2).
● JavaScript variables are containers for storing data values.
42

JavaScript Identifiers
● All JavaScript variables must be identified with unique names.
● These unique names are called identifiers.
● Identifiers can be short names (like x and y) or more descriptive names (age,
sum, totalVolume).
● The general rules for constructing names for variables (unique identifiers) are:
○ Names can contain letters, digits, underscores, and dollar signs.
○ Names must begin with a letter or $ and _
○ Names are case sensitive (y and Y are different variables)
○ Reserved words (like JavaScript keywords) cannot be used as names
○ It may not contain special characters (! . , / + * =).
43

The Assignment Operator
● In JavaScript, the equal sign (=) is an "assignment" operator, not an "equal to"
operator.
● This is different from algebra.
● The following does not make sense in algebra:
● In JavaScript, however, it makes perfect sense: it assigns the value of x + 5 to
x. (The value of x is incremented by 5)
44

JavaScript Data Types
● JavaScript variables can hold numbers like 100 and text values like “Alaqsa".
● In programming, text values are called text strings.
● JavaScript can handle many types of data, but for now, just think of numbers
and strings.
● Strings are written inside double or single quotes.
● Numbers are written without quotes.
● If you put a number in quotes, it will be treated as a text string.
45

Declaring (Creating) JS Variables
● Creating a variable in JavaScript is called "declaring" a variable.
● You declare a JavaScript variable with the var keyword.
● After the declaration, the variable has no value. (Technically it has the value of
undefined)
● To assign a value to the variable, use the equal sign:
46

Declaring (Creating) JS Variables
● You can also assign a value to the variable when you declare it:
● Example:
47

One Statement, Many Variables
● You can declare many variables in one statement.
● Start the statement with var and separate the variables by comma.
● A declaration can span multiple lines
48

Value = undefined
● In computer programs, variables are often declared without a value.
● The value can be something that has to be calculated, or something that will
be provided later, like user input.
● A variable declared without a value will have the value undefined.
● The variable carName will have the value undefined after the execution of this
statement.
49

Re-Declaring JavaScript Variables
● If you re-declare a JavaScript variable, it will not lose its value.
● The variable carName will still have the value "Volvo" after the execution of
these statements:
50

JavaScript Arithmetic
● As with algebra, you can do arithmetic with JavaScript variables, using
operators like = and +:
● You can also add strings, but strings will be concatenated:
51

JavaScript Arithmetic
● If you put a number in quotes, the rest of the numbers will be treated as
strings, and concatenated.
52

JS Data Types
● JavaScript variables can hold many data types: numbers, strings, objects and
more.
56

The Concept of Data Types
● In programming, data types is an important concept.
● To be able to operate on variables, it is important to know something about the
type.
● Without data types, a computer cannot safely solve this:
● JavaScript will treat the example above as string
57

JS Types are Dynamic
● JavaScript has dynamic types. This means that the same variable can be used
to hold different data types.
58

JS Strings
● A string (or a text string) is a series of characters like "IUG".
● Strings are written with quotes.
● You can use single or double quotes.
● You can use quotes inside a string, as long as they don't match the quotes
surrounding the string.
59

JS Strings - Length
● The length of a string is found in the built-in property length.
60
The length property returns the length of a string
The length property of an empty string is 0.
To get last char of string : string[string.length -1]

JS Strings - Special Characters
● The backslash () escape character turns special characters into string
characters.
61

JS Strings - Breaking Long Code Lines
● For best readability, programmers often like to avoid code lines longer than 80
characters.
● You can break up a code line within a text string with a single backslash.
● A safer way to break up a string, is to use string addition
62

JS Numbers
● Numbers can be written with, or without decimals.
● Extra large or extra small numbers can be written with scientific (exponential)
notation.
63

JS Numbers - Types
● Unlike many other programming languages, JavaScript does not define
different types of numbers, like integers, short, long, floating-point etc.
● JavaScript numbers are always stored as double precision floating point
numbers, following the international IEEE 754 standard.
● This format stores numbers in 64 bits, where the number (the fraction) is stored
in bits 0 to 51, the exponent in bits 52 to 62, and the sign in bit 63.
64

JS Numbers - Numbers and Strings
● JavaScript uses the + operator for both addition and concatenation.
● Numbers are added. Strings are concatenated.
65

JS Numbers - Numbers and Strings
66

JS Numbers - Numeric Strings
● JavaScript strings can have numeric content.
● JavaScript will try to convert strings to numbers in all numeric operations.
67

JS Numbers - NaN (Not a Number)
● NaN is a JavaScript reserved word indicating that a number is not a legal
number.
● Trying to do arithmetic with a non-numeric string will result in NaN (Not a
Number).
● You can use the global JavaScript function isNaN( ) to find out if a value is a
number.
68

JS Numbers - Infinity
● Infinity (or -Infinity) is the value JavaScript will return if you calculate a number
outside the largest possible number.
● Division by 0 (zero) also generates Infinity.
69

JS Booleans
● Booleans can only have two values: true or false.
● Booleans are often used in conditional testing.
70

JS Booleans - Boolean() Function
● You can use the Boolean() function to find out if an expression (or a variable) is
true.
● Or even easier:
71

JS Booleans - Value
● Everything With a "Value" is True.
● Everything Without a "Value" is False.
73

JS Arrays
● JavaScript arrays are written with square brackets.
● Array items are separated by commas.
● Array indexes are zero-based, which means the first item is [0], second is [1],
and so on.
74

JS Arrays
● You can change an array element using its index.
● With JavaScript, the full array can be accessed by referring to the array name.
75

JS Array are Objects
● Arrays are a special type of objects. The typeof operator in JavaScript returns
"object" for arrays.
● But, JavaScript arrays are best described as arrays.
● Arrays use numbers to access its "elements". person[0]
● Objects use names to access its "members". person.firstName
76

JS Array Length
● The length property of an array returns the length of an array (the number of
array elements).
● The length property is always one more than the highest array index.
77

Associative Arrays
● Many programming languages support arrays with named indexes.
● Associative arrays (dictionaries) that can hold data in (key, value) pairs.
● Arrays with named indexes are called associative arrays.
● JavaScript does NOT support arrays with named indexes.
● In JavaScript, arrays always use numbered indexes.
● If you use named indexes, JavaScript will redefine the array to a standard
object. After that, some array methods and properties will produce incorrect
results.
● You should use objects when you want the element names to be strings (text).
● You should use arrays when you want the element names to be numbers.
78

new Array() Constructor
● You can use the JavaScript's built-in array constructor new Array() to define a
new array.
● These two different statements both create a new empty array named points:
● These two different statements both create a new array containing 6 numbers:
80

new Array() Constructor Problem
● There is no need to use the JavaScript's built-in array constructor new Array().
Use [ ] instead.
● The new keyword only complicates the code. It can also produce some
unexpected results:
81

JS Arrays - toString()
● The JavaScript method toString() converts an array to a string of (comma
separated) array values.
82

JS Arrays - join()
● The join() method also joins all array elements into a string.
● It behaves just like toString(), but in addition you can specify the separator.
83

JS Arrays - pop()
● The pop() method removes the last element from an array.
● The pop() method returns the value that was "popped out"
84

JS Arrays - push()
● The push() method adds a new element to an array (at the end).
● The push() method returns the new array length.
85

JS Arrays - shift()
● Shifting is equivalent to popping, working on the first element instead of the
last.
● The shift() method removes the first array element and "shifts" all other
elements to a lower index.
● The shift() method returns the string that was "shifted out"
86

JS Arrays - unshift()
● The unshift() method adds a new element to an array (at the beginning), and
"unshifts" older elements.
● The unshift() method returns the new array length.
87

JS Arrays - Deleting Elements
● Since JavaScript arrays are objects, elements can be deleted by using the
JavaScript operator delete.
● Using delete may leave undefined holes in the array. Use pop() or shift()
instead.
88

JS Arrays - splice()
● The splice() method can be used to add new items to an array.
● Parameters:
○ the position where new elements should be added
○ The length or how many elements should be removed
○ the new elements to be added
● The splice() method returns an array with the deleted items.
89

JS Arrays - splice()
● With clever parameter setting, you can use splice() to remove elements without
leaving "holes" in the array.
90

JS Arrays - concat()
● The concat() method creates a new array by merging (concatenating) existing
arrays.
● The concat() method can take any number of array arguments
91

JS Arrays - slice()
● The slice() method slices out a piece of an array into a new array.
Slice( from, to)
● The slice() method creates a new array. It does not remove any elements from
the source array.
Returns new array [‘Orange’, ‘Lemon’]
92

JS Arrays - sort()
● The sort() method sorts an array alphabetically.
● the sort() function sorts values as strings.
93

JS Arrays - reverse()
● The reverse() method reverses the elements in an array.
● You can use it to sort an array in descending order.
94

JS Objects
● Objects are variables. But they can contain many values.
● The values are written as name:value pairs (name and value separated by a
colon : ) and they called properties.
● You define (and create) a JavaScript object with an object literal
● Spaces and line breaks are not important. An object definition can span
multiple lines.
● You can access object properties in two ways
objectName.propertyName
objectName["propertyName"]
96

JS Objects
● Objects can also have methods. Methods are actions that can be performed
on objects. Methods are stored in properties as function definitions.
● In a function definition, “this” refers to the "owner" of the function.
● You access an object method with the following syntax:
objectName.methodName()
97

JavaScript Function Definitions
● JavaScript functions are defined with the function keyword.
● You can use a function declaration or a function expression.
● Function Declarations:
● Function Expressions (anonymous):
● Functions stored in variables do not need function names. They are always
invoked (called) using the variable name.
100

JavaScript Function Parameters
● JavaScript function definitions do not specify data types for parameters.
● JavaScript functions do not perform type checking on the passed arguments.
● JS functions do not check the number of arguments received. If a function is
called with missing arguments (less than declared), the missing values are set
to: undefined.
101

The Arguments Object
● JavaScript functions have a built-in object called the arguments object.
● The argument object contains an array of the arguments used when the
function was called (invoked).
102

Variable Scope
● A variable that can only be used within one function is locally scoped. When you define
a variable inside a function, include the var keyword to keep it locally scoped
(recommended):
var foo = "value";
● A variable that can be used by any script on your page is said to be
globally scoped.
• Any variable created outside of a function is automatically globally scoped:
var foo = "value";
○ To make a variable created inside a function globally scoped, omit the var
keyword (without pre declaration)
foo = "value";

Math Object
● The JavaScript Math object allows you to perform mathematical tasks on
numbers.
● Unlike other global objects, the Math object has no constructor.
● Methods and properties are static; All methods and properties (constants) can
be used without creating a Math object first.
105

Math Object Properties
● JavaScript provides 8 mathematical constants that can be accessed with the
Math object.
Math.E // returns Euler's number
Math.PI // returns PI
Math.SQRT2 // returns the square root of 2
Math.SQRT1_2 // returns the square root of ½
Math.LN2 // returns the natural logarithm of 2
Math.LN10 // returns the natural logarithm of 10
Math.LOG2E // returns base 2 logarithm of E
Math.LOG10E // returns base 10 logarithm of E
106

Math Object Methods
● Math object contains many mathematical methods:
abs(x) //Returns the absolute value of x
ceil(x) //Returns the value of x rounded up to its nearest integer
floor(x) //Returns the value of x rounded down to its nearest integer
round(x) //Returns the value of x rounded to its nearest integer
cos(x) //Returns the cosine of x (x is in radians)
sin(x) //Returns the sine of x (x is in radians)
107
1 rad = 180°/π

max(x, y, z, ..., n) //Returns the number with the highest value
min(x, y, z, ..., n) //Returns the number with the lowest value
random() //Returns a random number between 0 and 1
pow(x, y) //Returns the value of x to the power of y
log(x) //Returns the natural logarithm (base E) of x
sqrt(x) //Returns the square root of x
Math Object Methods
108

Conditional Statements
● Very often when you write code, you want to perform different actions for
different decisions.
● You can use conditional statements in your code to do this.
● In JavaScript we have the following conditional statements:
○ if to specify a block of code to be executed, if a specified condition is true
○ else to specify a block of code to be executed, if the same condition is false
○ else if to specify a new condition to test, if the first condition is false
○ switch to specify many alternative blocks of code to be executed
110

The if Statement
● Use the if statement to specify a block of JavaScript code to be executed if a
condition is true.
111

The else Statement
● Use the else statement to specify a block of code to be executed if the
condition is false.
112

The else if Statement
● Use the else if statement to specify a new condition if the first condition is
false.
113

The Switch Statement
● Use the switch statement to select one of many code blocks to be executed.
● Switch cases use strict comparison (===)
114

The Switch Statement - Examples
115

The Switch Statement - Examples
116

JS Loops
● Loops can execute a block of code a number of times.
● JavaScript supports different kinds of loops:
○ for - loops through a block of code a number of times
○ for/in - loops through the properties of an object
○ For/of- loops through the properties of an array
○ while - loops through a block of code while a specified condition is true
○ do/while - also loops through a block of code while a specified condition is true
118
For (i=0; i< arr.length; i++){ arr[i] }
For (x in object) { console.log(object[x]) }
For (a of arr) { console.log(a)}

The For Loop
● The for loop has the following syntax:
● Statement 1 is executed (one time) before the execution of the code block.
● Statement 2 defines the condition for executing the code block.
● Statement 3 is executed (every time) after the code block has been executed.
119

The While Loop
● The while loop loops through a block of code as long as a specified condition
is true.
● If you forget to increase the variable used in the condition, the loop will never
end. This will crash your browser.
120

The Do/While Loop
121
● The do/while loop is a variant of the while loop.
● This loop will execute the code block once, before checking if the condition is
true, then it will repeat the loop as long as the condition is true.

The Break Statement
● You have already seen the break statement used in this chapter. It was used
to "jump out" of a switch() statement.
● The break statement can also be used to jump out of a loop.
● The break statement breaks the loop and continues executing the code after
the loop.
122

The Continue Statement
● The continue statement breaks one iteration (in the loop), if a specified
condition occurs, and continues with the next iteration in the loop.
123

Introduction
● With the HTML DOM (Document Object Model), JavaScript can access and
change all the elements of an HTML document.
● When a web page is loaded, the browser creates a Document Object Model of
the page.
● The HTML DOM model is constructed as a tree of Objects:
125

What is HTML DOM?
● The HTML DOM is a standard object model and programming interface for
HTML. It defines:
○ The HTML elements as objects
○ The properties of all HTML elements
○ The methods to access all HTML elements
○ The events for all HTML elements
● In other words: The HTML DOM is a standard for how to get, change, add, or
delete HTML elements.
127

DOM Methods
● HTML DOM methods are actions you can perform (on HTML Elements).
● HTML DOM properties are values (of HTML Elements) that you can set or
change.
● In the example above, getElementById is a method, while innerHTML is a
property.
128

The HTML DOM Document Object
● The document object represents your web page.
● If you want to access any element in an HTML page, you always start with
accessing the document object.
● On next slide, you can see some examples of how you can use the document
object to access and manipulate HTML.
129

The HTML DOM Document Object
● Finding HTML Elements:
● document.getElementById(id) Find an element by element id
● document.getElementsByTagName(<li>) Find elements [] by tag name
● document.getElementsByClassName(classname) Find elements [] by class name
● Changing HTML Elements:
● element.innerHTML Change the inner HTML of an element
● element.setAttribute(att, val) Change the attribute value of an element
● element.style.property Change the style of an HTML element
130

DOM Elements methods
● With JavaScript, you want to manipulate HTML elements.
● You have saw how to find the elements. There are many ways to do this:
○ Finding HTML element by id
const element = document.getElementById("intro");
○ Finding HTML elements by tag name
const element = document.getElementsByTagName("p");
○ Finding HTML elements by class name
const x = document.getElementsByClassName("intro");
○ Finding HTML elements by CSS selectors (querySelectorAll, querySelector)
const x = document.querySelectorAll("p.intro");
○ Finding HTML elements by HTML object collections
const x = document.forms[‘name’] //return form element that has name
const x = document.forms[0] //return first form element in webpage
131

ACCESS an ELEMENT
SELECT AN INDIVIDUAL ELEMENT NODE
● getElementByld (‘id’) Selects an individual
element given the value of its id attribute.
● querySelector(‘ css selector ') Uses a CSS
selector and returns the first matching
element.
132

ACCESS ELEMENTS
.SELECT MULTIPLE ELEMENTS (NODELISTS)
● getElementsByClassName(‘class ‘) Selects all
elements that have a specific value for their class
attribute.
● getElementsByTagName(‘ tagName ‘) Selects all
elements that have the specified tag name. (faster
than querySelectorAll() )
● querySelectorAll ( ‘css selector ‘) Uses CSS selector
syntax to select one or more elements and returns all
of those that match
133

Wired getElementsByClassName()!
● var lis=document.getElementsByClassName('hot')
● for (var i = 0; i < lis.length; i) {
● lis[i].className='cool’
● }
●
● getElementsByClassName reduce size of list automatically when
you change class name !!
134

ACCESS THE ELEMENTS
TRAVERSING BETWEEN ELEMENT NODES
1. parentNode/parenetElement Selects the parent of the
current element node (which will return just one
element)
2. previousSibling / nextSibling Selects the previous or
next sibling from the DOM tree
3. firstChild / lastChild Select the content first or last child
of the current element.
● All these are properties not functions
● If no next sibling/first/last child result is null
138

Previous/next Sibling
● nextSibling/previousSibling
return next, previous
siblings if not white space
between them
● previousElementSibling
/nextElementSibling return
previous, next sibling even if
they have space between them
139

First/last child
● First/lastchild give
different/wrong result if
space were between
parent and child
● firstElementChild/
lastElementChild can
be used for more
accuracy
140

GET/UPDATE ELEMENT CONTENT
141

● nodeValue Accesses text from
node
● You must be on a text node, not
the element that contains the text
142

textContent Gets/sets text only
● collect the text from the elements and ignore any
markup inside the element.
● In this case it would return the value: fresh figs.
innerText Gets/sets text only
● Same as textContent but three differences
○ Not supported by many browsers
○ It will not show any content that has been hidden by
CSS.
○ it can be slower to retrieve the content than the
textContent property. 143

144
• innerHTML: access and amend
the contents of an element,
including any child elements
• Get elements content as string
• To update element content, it
takes string that might contain
markup
•

145
Note how the quotes are escaped.
If you use attributes in your HTML code, escaping “ using can make it
clearer that those characters are no part of the script
innerHTML

ADDING ELEMENTS
1. createElement () : create
element
2. createTextNode() : create
text
3. appendChild(): join parent
with child
146

REMOVING ELEMENTS
1. Access element need to be removed
2. Access parent of element
3. Parent.removeChild(element)
148

CHECK ATTRIBUTE & GET ITS VALUES
150

CREATE/CHANGE ATTRIBUTES
● className: allows to change class of element or add it if not exist
● The setAttribute() method allows you to update the value of any attribute.
151

REMOVING ATTRIBUTES
● Removing attribute that not exist does not cause an error
152

Changing HTML Style
● The HTML DOM allows JavaScript to change the style of HTML elements.
● To change the style of an HTML element, use this syntax:
document.getElementById(id).style.Property = new style
153

JS Events
● HTML events are "things" that happen to HTML elements.
● When JavaScript is used in HTML pages, JavaScript can "react" on these
events.
● An HTML event can be something the browser does, or something a user
does.
● Here are some examples of HTML events:
○ An HTML web page has finished loading
○ An HTML input field was changed
○ An HTML button was clicked
● HTML allows event handler attributes, with JavaScript code, to be added to
HTML elements.
155

JS Events
● Here is a list of some common HTML events:
● onchange An HTML element has been changed
● onclick The user clicks an HTML element
● onmouseover The user moves the mouse over an HTML element
● onmouseout The user moves the mouse away from an HTML element
● onkeydown The user pushes a keyboard key
● onload The browser has finished loading the page
156

DIFFERENT EVENT TYPES
157
load
unload
error
resize
scroll
Web page has finished loading
Web page is unloading (usually when a new page was requested)
Browser encounters a JavaScript error, or an asset doesn't exist
Browser window has been resized
User has scrolled up or down the page
keydown
keyup
keypress
User first presses a key (repeats while key is depressed)
User releases a key
Character is being inserted (repeats while key is depressed)

onload Event
● The onload event occurs when an object has been loaded.
● onload is most often used within the <body> element to execute a script once
a web page has completely loaded all content (including images, script files,
CSS files, etc.).
● The onload event can be used to check the visitor's browser type and browser
version, and load the proper version of the web page based on the
information.
● The onload event can also be used to deal with cookies (see "More Examples"
below).
158

DIFFERENT EVENT TYPES
161
click
dblclick
mousedown
mouseup
mousemove
mouseover
mouseout
User presses and releases a button over the same element
User presses and releases a button twice over the same element
User presses a mouse button while over an element
User releases a mouse button while over an element
User moves the mouse (not on a touchscreen)
User moves the mouse over an element (not on a touchscreen)
User moves the mouse off an element (not on a touchscreen)

HTML EVENT HANDLER ATTRIBUTES (DO NOT USE)
This method of event handling
is no longer used because it
is better to separate the
JavaScript from the HTML
163

onchange Event
● The onchange event occurs when the value of an element has been changed.
● For radiobuttons and checkboxes, the onchange event occurs when the
checked state has been changed.
164

onclick Event
● The onclick event occurs when the user clicks on an element.
165

onmouseover / onmouseout Event
● The onmouseover event occurs when the mouse pointer is moved onto an
element, or onto one of its children.
● This event is often used together with the onmouseout event, which occurs
when a user moves the mouse pointer out of an element.
167

onmouseover / onmouseout Event
168

onkeydown Event
● The onkeydown event occurs when the user is pressing a key (on the
keyboard).
169

onkeyup Event
● The onkeyup event occurs when the user releases a key (on the keyboard).
170

TRADITIONAL DOM EVENT HANDLERS
● you can only attach one function to each event handler
171

● The main drawback is that you can only attach a single function to any
event.
○ For example, the submit event of a form cannot trigger one function that checks the contents
of a form, and a second to submit the form data if it passes the checks.
● As a result of this limitation, if more than one script is used on the same
page, and both scripts respond to the same event, then one or both of the
scripts may not work as intended
173

EVENT LISTENERS
● They can deal with more than one function at a time
174

EVENT LISTENERS
Function is written first
175

USING PARAMETERS WITH EVENT LISTENERS
176

04-JS.pptx

More Related Content

Similar to 04-JS.pptx (20)

Recently uploaded (20)

04-JS.pptx

Editor's Notes