Scribd
Upload
46 views

Java Script

This document provides instructions on how to run code in Node and summarizes key JavaScript concepts. - To run code in Node, open the terminal (Mac) or command prompt (Windows), navigate to the folder containing the code file, and enter the command "node filename.js". This will execute the JavaScript code. - JavaScript concepts summarized include primitives vs references, objects, arrays, functions, classes, dates, and the DOM. Primitives are passed by value while references are passed by reference. The DOM represents HTML documents and allows access and manipulation of elements via JavaScript.

Uploaded by

Mina Khella
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
46 views

Java Script

This document provides instructions on how to run code in Node and summarizes key JavaScript concepts. - To run code in Node, open the terminal (Mac) or command prompt (Windows), navigate to the folder containing the code file, and enter the command "node filename.js". This will execute the JavaScript code. - JavaScript concepts summarized include primitives vs references, objects, arrays, functions, classes, dates, and the DOM. Primitives are passed by value while references are passed by reference. The DOM represents HTML documents and allows access and manipulation of elements via JavaScript.

Uploaded by

Mina Khella
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 87

Run Code In Node

• On MAC OPEN TERMINAL


• On WINDOWS OPEN PROMPT
• GO TO THE FOLDER where the code is saved
JAVASCRPT and :
• $node NameofJavascriptFile.js
• Tip:
• In VSC we can open an integrated terminal
Equations
Primitives VS References
Primitives VS References
Object
Object with a function
Object Instance
Primitives VS References in a function call
Array
let tab=['Lamyae',28,'hello',['Ford',45]];

console.log ('my name is:' +tab[0], 'my age is:'+ tab[1]);

my name is : Lolita my age is:28

console.log ('my firstNameLetter is:' +tab[0][0], 'my Car is:'+ tab[3][0]);

my firstNameLetter is:L my Car is:Ford


Dynamic Array
Functions
A Function call a Function
Documentation
Start Function
Reset Function
Inheretence
MANAGE OBJECT
Define an object using Factory/constractor
https://www.javascripttutorial.net/es6/javascript-class/

class Person {
constructor(name)
{ this.name = name; }
getName() { return this.name; }
}

let john = new Person("John Doe");


let name = john.getName();
Date Get Method
Method Description
getFullYear() Get year as a four digit
number (yyyy)
getMonth() Get month as a number
(0-11)
getDate() Get day as a number (1-
31)
getDay() Get weekday as a number
(0-6)
getHours() Get hour (0-23)
getMinutes() Get minute (0-59)
getSeconds() Get second (0-59)
getMilliseconds() Get millisecond (0-999)
getTime() Get time (milliseconds
since January 1, 1970)
Set Date Methods

Method Description
setDate() Set the day as a number
(1-31)
setFullYear() Set the year (optionally
month and day)
setHours() Set the hour (0-23)
setMilliseconds() Set the milliseconds (0-
999)
setMinutes() Set the minutes (0-59)
setMonth() Set the month (0-11)
setSeconds() Set the seconds (0-59)
setTime() Set the time (milliseconds
since January 1, 1970)
Mathematical function:Example
Math.random();
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Math</h2>

<p>Math.floor(Math.random() * 10) returns a


random integer between 0 and 9 (both
included):</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
Math.floor(Math.random() * 10);
</script>

</body>
</html>
DOM JavaScript
Document Object Model

•le DOM est une représentation d’une page HTML


•il permet d’accéder aux différents éléments de la page grâce au langage
JavaScript.
(Document Object Model)
JavaScript HTML DOM
(Document Object Model)

• Le HTML DOM est un modèle d'objet standard on l’appel aussi une interface de
programmation pour le HTML, Il définit :

• Les éléments HTML en tant qu'objets


• Les propriétés de tous les éléments HTML
• Les méthodes d'accès à tous les éléments HTML
• Les événements pour tous les éléments HTML

• En d'autres termes : Le HTML DOM est un standard pour savoir comment obtenir, modifier,
ajouter ou supprimer des éléments HTML.
DOM Properties / DOM Actions

• HTML DOM methods are actions you can perform (on


HTML Elements).
• A method is an action you can do (like add or deleting
an HTML element).

• HTML DOM properties are values (of HTML Elements)


that you can set or change.
• A property is a value that you can get or set (like
changing the content of an HTML element).
DOM Properties / DOM Actions

<!DOCTYPE html>
<html>
<body>

<h2>My First Page</h2>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
"Hello World!";
</script>

</body> In the example above, getElementById is a method,


</html> while innerHTML is a property.
Finding HTML Elements
• Finding HTML elements by id
• Finding HTML elements by tag name
• Finding HTML elements by class name
• Finding HTML elements by CSS selectors
• Finding HTML elements by HTML object collections
Finding HTML Elements

Method Description
document.getElementById(id) Find an element by element id
document.getElementsByTagName(name) Find elements by tag name
document.getElementsByClassName(name) Find elements by class name
getElementById
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript HTML DOM</h2>
<p id="intro">Finding HTML Elements by Id</p>
<p>This example demonstrates the <b>getElementsById</b> method.</p>
<script>
const element = document.getElementById("intro");
</script>
</body>
</html>
getElementsByTagName/ getElementsByClassName

• const element = document.getElementsByTagName("p");


• const x = document.getElementsByClassName("intro");
Tag childNodes
<!DOCTYPE html>
<html>
<body>
<!-- This is a comment node! -->

<h1>The Element Object</h1>


<h2>The childNodes Property</h2>
<p>Whitespace between elements are text nodes. Comments are also nodes.</p>

<p>The body element's child nodes are:</p>


<p id="demo"></p>
<script>
const nodeList = document.body.childNodes;

let text = "";


for (let i = 0; i < nodeList.length; i++) {
text += nodeList[i].nodeName + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
querySelector: Finding HTML Elements by CSS Selectors

To find all HTML elements that match a specified CSS selector (id, class names, types,
attributes, values of attributes, etc) use:

querySelectorAll() method.

This example:

returns a list of all <p> elements with class="intro".

const x = document.querySelectorAll("p.intro");
<!DOCTYPE html>
<html>
<body>
Finding HTML Eléments:
<h2>JavaScript HTML DOM</h2>
by HTML Object <p>Finding HTML Elements Using <b>document.forms</b>.</p>
Collections
<form id="frm1" action="/action_page.php">
First name: <input type="text" name="fname"
value="Donald"><br>
This example finds the form element Last name: <input type="text" name="lname"
with id="frm1", in the forms collection, and value="Duck"><br>
<br>
displays all element values: <input type="submit" value="Submit">
</form>

<p>These are the values of each element in the form:</p>

<p id="demo"></p>

<script>
const x = document.forms["frm1"];
let text = "";
for (let i = 0; i < x.length ;i++) {
text += x.elements[i].value + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>
Changing HTML Elements

Property Description
element.innerHTML = new html content Change the inner HTML of an element
element.setattribute = new value Change the attribute value of an HTML element
element.style.property = new style Change the style of an HTML element
The innerHTML Property

The easiest way to get the content of an element is by using the innerHTML property.
The innerHTML property is useful for getting or replacing the content of HTML elements.
Change the inner HTML of an element
Static set to the innerHTML property.
<html>
<body>

<p id="p1">Hello World!</p>

<script>
document.getElementById("p1").innerHTML = "New text!";
</script>

</body>
</html>
Change the innerHTML of an element:
Dynamic set to the innerHTML property

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Dates</h1>
<h2>Using new Date()</h2>
<p>Create a new date object with the current
date and time:</p>
<p id="demo"></p>
<script>
const d2 = new Date();
document.getElementById("demo").innerHTML = d2;
</script>
</body>
</html>
Changing the Value of an Attribute

• <!DOCTYPE html>
<html>
<body>
<img id="myImage" src="smiley.gif">
<script>
document.getElementById("myImage").src = "landscape.jpg
";
</script>
</body>
</html>
Set Attribute: Change the attribute value of an HTML element
<!DOCTYPE html>
<html>
<style>
.democlass {
color: red;
}
</style>

<body>
<h1 id="myH1">The Element Object</h1>
<h2>The setAttribute() Method</h2>
<p>Click "Add Class" to add a class attribute to the h1 element:</p>
<script>
document.getElementById("myH1").setAttribute("class", "democlass");
</script>

</body>
style.property: Change the style of an HTML element

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript HTML DOM</h2>
<p>Changing the HTML style:</p>
<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color = "blue";
document.getElementById("p2").style.fontFamily = "Arial";
document.getElementById("p2").style.fontSize = "larger";
</script>
</body>
</html>
Adding and Deleting Elements

Method Description
document.createElement(element) Create an HTML element
document.removeChild(element) Remove an HTML element
document.appendChild(element) Add an HTML element
document.replaceChild(new, old) Replace an HTML element
document.write(text) Write into the HTML output stream
Adding and Deleting Elements

const list = element.classList;


list.add("myStyle")

const list = element.classList;


list.remove("myStyle");
<!DOCTYPE html>
<html>
<style>
.myStyle {
background-color: coral;
padding: 16px;
}
</style>
<body>
<h1>The DOMToken Object</h1>
<h2>The add() Method</h2>
<button onclick="myFunction()">Add</button>
<p>Click "Add" to add the "myStyle" class to myDIV.</p>
<div id="myDIV">
<p>I am a myDIV.</p>
</div>
<script>
function myFunction() {
const list = document.getElementById("myDIV").classList;
list.add("myStyle");
}
</script>
Events :Reacting to Events
A JavaScript can be executed when an event occurs, like when a user clicks
on an HTML element.
To execute code when a user clicks on an element, add JavaScript code to an
HTML event attribute:

Examples of HTML events:


When a user clicks the mouse
When a web page has loaded
When an image has been loaded
When the mouse moves over an element
When an input field is changed
When an HTML form is submitted
When a user strokes a key
onclick
• <!DOCTYPE html>
• <html>
• <body>
•
<h2>JavaScript HTML Events</h2>
• <h2 onclick="this.innerHTML='Ooops!'">Click on this
text!</h2>
•
</body>
• </html>
onclick
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML Events</h2>


<p>Click the button to display the date.</p>

<button onclick="displayDate()">The time is?</button>


<script>
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
</script>
<p id="demo"></p>
</body>
</html>
Reacting to Events
<!DOCTYPE html>
<html>
<body>
<script>document.write(5+6);</script>
<h2>JavaScript?</h2>
<p id="Firstdemo">JavaScript can change HTML content.</p>
<button type="button" onclick='document.getElementById(" Firstdemo
").innerHTML = "Hello JavaScript class!"'>
Click here!
</button>

</body>
</html>
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML Events</h2>


<p>Click "Try it" to execute the displayDate() function.</p>

<button id="myBtn">Try it</button>

<p id="demo"></p>

<script>
document.getElementById("myBtn").onclick = displayDate;

function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
</script>
</body>
</html>
Onload and onunload Events

• The onload and onunload events are triggered when the


user enters or leaves the page.
• 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 and onunload events can be used to deal
with cookies.
onload
<!DOCTYPE html>
<html>
<body onload="checkCookies()">
<h2>JavaScript HTML Events</h2>
<p id="demo"></p>
<script>
function checkCookies() {
var text = "";
if (navigator.cookieEnabled == true) {
text = "Cookies are enabled.";
} else {
text = "Cookies are not enabled.";
}
document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>
The on mouseover
• The onmouseover and onmouseout events can be used to
trigger a function when the user mouses over, or out of,
an HTML element.
Onmouseover and onmouseout
<!DOCTYPE html>
<html>
<body>

<h1 onmouseover="style.color='red'"
onmouseout="style.color='black'">
Mouse over this text</h1>

</body>
</html>
The onmouseover
<!DOCTYPE html>
<html>
<body>
<div onmouseover="mOver(this)" onmouseout="mOut(this)"
style="background-
color:#D94A38;width:120px;height:20px;padding:40px;">
Mouse Over Me</div>
<script>
function mOver(obj) {
obj.innerHTML = "Thank You"
}
function mOut(obj) {
obj.innerHTML = "Mouse Over Me"
}
</script>
</body>
</html>
JavaScript HTML DOM EventListener

Syntax
element.addEventListener(event, function);

• The first parameter is the type of the event (like "click" or "mousedown" or any other HTML
DOM Event.)
• The second parameter is the function we want to call when the event occurs.

• You can easily remove an event listener by using the removeEventListener() method.
• You can add many event handlers to one element.
JavaScript HTML DOM EventListener

• element.addEventListener("click", function(){
alert("Hello World!"); });

element.addEventListener("click", myFunction);

function myFunction() {
alert ("Hello World!");
}
JavaScript HTML DOM EventListener
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript addEventListener()</h2>
<p>Uses addEventListener() method to attach a click event to a button.</p>
<button id="myBtn">Try it</button>
<p id="demo"></p>
<script>
document.getElementById("myBtn").addEventListener("click", displayDate);
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
</script>
</body>
</html>
Add an Event Handler to the window Object

• window.addEventListener("resize", function(){
document.getElementById("demo").innerHTML = somet
ext;
});
Créer un calculatrice
1) Quand on click sur un chiffre il
devra changer de couleur

2) Quand on click sur égale on


entendra une sonnerie légère

3) Le résultat s’affiche selon une


animation donnée

You might also like