1
KNOWLEDGE JAVA SCRIPT
1. The variables, operators and the Display with JS ([Link]() function)
2. Introduce a JavaScript script inside a HTML page (inside and outside)
3. Make Conditional structures : if, else
4. The loops: For loop
5. Work with functions in JS
6. Work with Modules
7. JAVASCRIPT for Web programing
7.1. DOM manipulation
7.2. Event handling
2
• JavaScript is a scripting programming language primarily used in interactive web pages and as such
is an essential part of web applications. Along with HTML and CSS, JavaScript is at the heart of the
languages used by web developers. A large majority of websites use it, and the majority of web
browsers have a JavaScript engine to interpret it.
• JavaScript is also used for web servers with the use of (for example) [Link] or Deno.
• JavaScript was created in 1995 by Brendan Eich and integrated into the Netscape Navigator 2.0
web browser.
3
1. The variables, operators and the Display with JS
([Link]() function)
JavaScript Variables can be
declared in 4 ways:
•Automatically
•Using var
•Using let
•Using const
• The var keyword was used in all JavaScript
code from 1995 to 2015.
• The let and const keywords were added to
JavaScript in 2015.
• The var keyword should only be used in code
written for older browsers.
4
VARIABLE OR DATA TYPES
• Integer
• Float
• Boolean (false/true)
• String ( note: “[Link]” gives the size of the string)
We can also have some data structures like :
Arrays
Dictionaries
Stacks and queues
5
[Link]
THIS FUNCTION OR METHOD HELPS TO WRITE AN ELEMENT ON THE CONSOLE.
Example 1: Example 2:
let x = 2; let z = "Good morning"
[Link]("Hello World !")
[Link](x)
[Link]("Hello World ! " + z)
Output: Output :
2 Hello World !
Hello World ! Good morning
• Using of the back quotations
Example 3
let a = 10
let b = 5
[Link](`${a} is greater than ${b}` )
Output:
10 is greater than 5
6
2. INTRODUCE A JAVASCRIPT SCRIPT INSIDE A
HTML PAGE (INSIDE AND OUTSIDE)
• Use the tag <script></script>
Inside : Outside :
In the same HTML file In a separate file with the extension .js
<script> <script type="text/javascript" src =“./JS_file.js” >
Your JavaScript instructions </script>
</script>
Note: In the attribute src, the JS file path should
be well written. It is possible to use the relative
path as well as the absolute path
7
HOW TO RUN JAVASCRIPT?
• Passing by the browser ( that is the way principally used in this course)
- Create a HTML file.
- Insert the JavaScript code by using the outside or the inside method via the tag
<script></script>
- Open the HTML file on the browser.
- Right click of the page displayed in the browser and select inspect, then go to console tab.
• Using Node
- In the terminal just type : node JavaScript_file.js
8 Addition Operator a+b
Add two numbers or
concatenate the string
Difference between the two
Subtraction Operator a-b operators Comparison operators
Multiplication Operator a*b Multiply two number
Division Operator a/b
Find the quotient of two Operator Descripti Comparin Returns
operands on g
Find the remainder of two == equal to x == 8 false
Modulus Operator a%b operands
x == 5 true
Raise the Left operator to
Exponentiation
a**b the power of the right x == "5" true
Operator operator
=== equal value x === 5 true
Return the operand and
a++
and equal x === "5" false
then increase by one
Increment Operator Increase operand by one type
++a
and then return
!= not equal x != 8 true
Return operand and then
a-- decrease by one !== not equal x !== 5 false
Decrement Operator Decrease operand by one value or
--a
and then return not equal
Unary Plus(+) +a Converts NaN to number
type
Converts operand to
Unary Negation (-) -a negative
9
Logical operators
Operator Description Example
&& and (x < 10 && y > 1) is
true
|| or (x == 5 || y == 5) is
false
! not !(x == y) is true
10
3. MAKE CONDITIONAL STRUCTURES : IF, ELSE
You can use conditional statements in your code to do this.
In JavaScript we have the following conditional statements:
•Use if to specify a block of code to be executed, if a specified condition is true
•Use else to specify a block of code to be executed, if the same condition is false if (condition1) {
•Use else if to specify a new condition to test, if the first condition is false // block of code to be executed if
•Use switch to specify many alternative blocks of code to be executed condition1 is true
• if (condition) { } else if (condition2) {
// block of code to be executed if
// block of code to be executed if the condition1 is false and condition2
the condition is true is true
} } else {
// block of code to be executed if
the condition1 is false and condition2
is false
}
11
4. FOR LOOP
LOOPS CAN EXECUTE A BLOCK OF CODE SEVERAL TIMES. THEY ARE USED TO AVOID
REPETITION OF LINE OF CODES
for (initialization; condition ; incrementation) {
// code block to be executed
}
Initialization example : let i = 0
Condition example : i < 100
Incrementation example : i++
12
5- WORK WITH FUNCTIONS IN JS
Functions are one of the fundamental building blocks in JavaScript. A function in JavaScript is similar to a procedure—
a set of statements that performs a task or calculates a value, but for a procedure to qualify as a function, it should take
some input and return an output where there is some obvious relationship between the input and the output.
function function_name(parameter1, parameter2,…)
{
// code to be executed
}
Arrow functions:
function_name = function(param1,param2,…) {
// code to be executed
}
function_name = (param1,param2,…) => {
// code to be executed
}
13
SOME SPECIAL FUNCTIONS OR METHODS
• isNAN()
• map() for arrays
• Function “this”
14
5- WORK WITH MODULES
Prerequisite :
Install a local server like XAMPP of WAMP
Install [Link] if possible
15
In most programming paradigms, we can find a module system that allows us to organize our code in different self-
organized parts or include code from other libraries. Modularization (usage of modules) is a fundamental tool within
software development to increase code reuse, enable parallel development, and reduce testing effort. This helps you to
split your code in small parts that facilitate the development and the maintenance of your application.
As far as concerning JavaScript programing language, we will see two module system:
- CommonJS
- ES modules
16
COMMONJS
• How to use it?
o In the file where you want to use the module
CommonJS modules must be loaded
const name = require (‘module_path’);
from a module repository, such as npm.
It works generally with Node js o in the module
platform. exports.element_to_import_name =
element_to_import_name ;
17
COMMONJS EXAMPLE (COMPARE TWO ELEMENTS)
• Module file:
• Other JavaScript file
mod_test.js [Link]
function compare(a,b){
if ( a>b ) { const mod_func = require('./mod_test.js')
[Link](`${a} is greater than ${b}` ); ;
}
else { let a = 5;
[Link](`${b}`+ " is greater than " +`${a}` );
} let b = 6;
} [Link](`a = ${a} and b = ${b}`)
[Link] = compare;
mod_func.compare(a,b)
To run it : node [Link]
18
ES6 MODULES (ES MEANS ECMASCRIPT)
• How to use it?
o In the file where you want to use the module:
The ECMAScript modules (in short ES modules) is a JavaScript import {element_to_import} from ‘./module_name.js'
modules format which is the official standard format to package
o in the module :
JavaScript code for reuse. The ES modules format generally
export before the element that you want to import
offers an easier route to writing isomorphic JavaScript, which
Or
can run in the browser or on a server.
At the end of the module: export{element_to_import};
19
ES6 MODULES EXAMPLE
• Module file • HTML FILE
<script type=“module">
mod_test.js
import {compare,add} from ‘./mod_test.js'
export function compare(a,b){
if ( a>b ) { let a = 15
[Link](`${a} is greater than ${b}` );
let b = 15.5
}
else { [Link](a)
[Link](`${b}`+ " is greater than " +`${a}` ); compare(a,b)
} [Link](add(a,b))
}
const add = (a,b) =>{ </script>
return a+b
}
export{add};
To run it : open the HTML file passing by your local server
JAVASCRIPT FOR WEB PROGRAMING
20 7.1. DOM MANIPULATION
It is like a tree What is the DOM?
The DOM is a W3C (World Wide Web Consortium)
standard.
The DOM defines a standard for accessing documents:
"The W3C Document Object Model (DOM) is a platform and
language-neutral interface that allows programs and scripts to
dynamically access and update the content, structure, and style
of a document."
The W3C DOM standard is separated into 3 different
parts:
Core DOM - standard model for all document types
XML DOM - standard model for XML documents
HTML DOM - standard model for HTML documents
21
Two important objects in JavaScript to know:
• window : It gives useful information about the whole browser window, like the inner width, the
position of the scroll. As an object it has methods (or functions) like alert( ) and properties like
inner width, scrollY…
Example : try these commands on your .js file
[Link](window);
[Link]([Link]);
[Link](‘text’);
• document: its allows to get access to the DOM html.
Example : try these commands on your .js file
[Link]([Link]);
[Link]([Link](‘idName’));
let text [Link](‘idName’);
[Link](text.)
[Link]([Link])
22
METHODS AND PROPERTIES
Method Description
Finding HTML [Link](id) Find an element by element id
elements
[Link](name) Find elements by tag name
[Link](name) Find elements by class name
Property Description
[Link] = new html content Change the inner HTML of an element
[Link] = new text content Change the inner text of an element
[Link] = new value Change the attribute value of an HTML element
Changing HTML [Link] = new style Change the style of an HTML element
elements
Method Description
[Link](‘attribute’, ‘value’) Change the attribute value of an HTML element
[Link](‘attribute’) Return the value of the
attribute
23 QUERY SELECTORS
• They can be used in replacement of the
getElementBy… methods
• The elements can be identified by using the
same syntax as in a CSS file that is using
CSS selector
• How does it work?
o [Link](‘.className’)
o [Link](‘.className’)
returns an array of all the elements with
the same className
o [Link](‘#idName’)
o [Link](‘tagName’)
24 ADDING AND DELETING HTML ELEMENTS
Method Description
[Link](element) Create an HTML element
[Link](element) Remove an HTML element
[Link](element) Add an HTML element
[Link](new, old) Replace an HTML element
[Link](text) Write into the HTML output stream
25 APPLICATION EXERCISE
Modify a web page using a js file thanks to the DOM manipulation:
• Modify a text
• Modify a HTML command line
• Select elements by their class name and display their values. Modify the
text
• Select elements by their tags and display their values. Modify the text
inside these elements
26
HOW TO CHANGE THE STYLE (CSS) OF HTML
ELEMENTS?
Example
<html>
• [Link](id).[Link] = new <body>
style <p id="p2">Hello World!</p>
<script>
[Link]("p2").[Link] = "blue";
[Link]("p2").[Link] = “#aa
a";
</script>
</body>
</html>
27
Note :
The property classList allows to obtain the class list inside an element :
By doing [Link](‘className’) it is possible to add a new class;
By doing [Link](‘className’) it is possible to remove a class;
By doing [Link](‘className’) it is possible to know if a class exists;
The method appendChild() allows to displace HTML elements.
28 7.2. Event handling
29
• How to react to HTML DOM events
• How to add and delete HTML elements
