Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
50 views

Java Script

Run code in Node by opening the terminal or command prompt, navigating to the folder containing the JavaScript file, and running the command "node filename.js". This will execute the JavaScript code. Visual Studio Code allows running an integrated terminal to execute Node code. Primitives like numbers and strings are passed by value, while objects and arrays are passed by reference. The document object model (DOM) represents an HTML document and allows JavaScript to access and modify the content, structure, and styling of a document. Common methods to find HTML elements include getElementById, getElementsByTagName, getElementsByClassName, and querySelectorAll. Properties like innerHTML can be used to modify element content.

Uploaded by

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

Java Script

Run code in Node by opening the terminal or command prompt, navigating to the folder containing the JavaScript file, and running the command "node filename.js". This will execute the JavaScript code. Visual Studio Code allows running an integrated terminal to execute Node code. Primitives like numbers and strings are passed by value, while objects and arrays are passed by reference. The document object model (DOM) represents an HTML document and allows JavaScript to access and modify the content, structure, and styling of a document. Common methods to find HTML elements include getElementById, getElementsByTagName, getElementsByClassName, and querySelectorAll. Properties like innerHTML can be used to modify element content.

Uploaded by

Mina Khella
Copyright
© © All Rights Reserved
Available Formats
Download as ODP, 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 (millisecon
ds 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
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(na ● Find elements by tag name
me)
● document.getElementsByClassName(n ● Find elements by class name
ame)
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:
by HTML Object <h2>JavaScript HTML DOM</h2>
<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.jp
g";
</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(eleme ● Create an HTML element
nt)
● 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:


qWhen a user clicks the mouse
qWhen a web page has loaded
qWhen an image has been loaded
qWhen the mouse moves over an element
qWhen an input field is changed
qWhen an HTML form is submitted
qWhen 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 = some
text;
});
Créer un calculatrice
1) Quand on click sur un chiffre il
devra changer de couleur
2)
3) Quand on click sur égale on
entendra une sonnerie légère
4)
5) Le résultat s’affiche selon une
animation donnée

You might also like