Scribd
Upload
4 views

SOW - Session #4 - Javascript

The document provides a recap of HTML, CSS, and an introduction to JavaScript (JS), detailing their syntax, selectors, and how to implement them in web development. It explains the use of JS for dynamic content, event handling, and various programming concepts such as variables, operators, and conditions. Additionally, it outlines the differences between 'let' and 'var', and includes examples for practical application.

Uploaded by

ferdaousse2004
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
4 views

SOW - Session #4 - Javascript

The document provides a recap of HTML, CSS, and an introduction to JavaScript (JS), detailing their syntax, selectors, and how to implement them in web development. It explains the use of JS for dynamic content, event handling, and various programming concepts such as variables, operators, and conditions. Additionally, it outlines the differences between 'let' and 'var', and includes examples for practical application.

Uploaded by

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

SOW

Session #4
Recap - JS continue

24/02/2024
Merhba
&
Welcome Back
Outline
I. Recap - HTML & CSS
II. JS - Intro
III. JS - In Depth
01. Recap
Recap
Recap

- CSS stands for Cascading Style Sheets

- Used for styling and UI customization

- CSS allows you to create rules that specify how the content of an element should appear.
Recap
Recap
http://preinscription.uca.ma
CSS - Syntax
CSS Syntax

Link
CSS - Selectors
CSS Selectors
Id Selector
- Select the HTML element that has the specified Id
- Id is unique within the page

<p id=”hello_text”>Hello World</p>


<section>Hello from the other side </section>
<p>Hello It’s me</p>
#hello_text {
text-align: center;
<p id=”hello_text”>Hello World</p> color: red;
<section>Hello from the other side </section>
<p>Hello It’s me</p>
}
CSS Selectors
Class Selector
- Select the HTML elements with a specific class.

<p>Hello World</p>
<section class=”centered”>Hello from the other side
</section>
<p class=”centered”>Hello, It’s me</p>
.centered {
text-align: center;
<p>Hello World</p> color: red;
<section class=”centered”>Hello from the other side
</section> }
<p class=”centered”>Hello, It’s me</p>
CSS Selectors
Grouping Selector
- Select All HTML elements within a page with specific tag names.

<p>Hello World</p>
<section class=”centered”>Hello from the other side
</section>
<p class=”centered”>Hello, It’s me</p>
<h6>Hello, How are you ?</h6>
p, h6 {
<p>Hello World</p>
text-align: center;
<section class=”centered”>Hello from the other side color: red;
</section> }
<p class=”centered”>Hello, It’s me</p>
<h6>Hello, How are you ?</h6>
CSS - Where To
CSS Where To
- You can apply CSS in 3 ways :

- Inline style

- Inside style tag

- Using a separate css file ( recommended )


02. JSS-Intro
JS

- JavaScript is a scripting or programming language that allows you to implement complex

features on web pages

- It enables you to create dynamically updating content, control multimedia, animate images.

- It is also used for event handling.


JS - Where To
JS Where To
- You can put your JS in 2 ways :

- Inside script tag

- Using the attribute src of the script tag


JS Where To
- Script Tag : inside head
<html>
<html>
<head>
<head>
<title>My title</title> <title>My title</title>
<script> </head>
function myFunction() { <body>
document.getElementById("head1").innerHTML = "A <h1 id="head1"
changes Heading 1";} onclick='myfunction()'>A
</script> heading</h1>
</head> <a class=’cls1’ href='#'>Link
<body> text</a>
<h1 id="head1" onclick='myfunction()'>A <p>Hakuna Matata</p>
heading</h1> </body>
...
</html>
</body>
</html>
JS Where To
- Script Tag : inside body

<html>
<head> <html>
<title>My title</title> <head>
</head> <title>My title</title>
<body> </head>
<h1 id="head1" onclick='myfunction()'>A <body>
heading</h1> <h1 id="head1"
... onclick='myfunction()'>A
<script> heading</h1>
function myFunction() { <a class=’cls1’ href='#'>Link
document.getElementById("head1").innerHTML = "A text</a>
changes Heading 1";}
<p>Hakuna Matata</p>
</script>
</body>
</body>
</html> </html>
JS Where To
- Using the attribute src of the script tag
<head>
<script src="./script.js" /> <html>
</head> <head>
<body> <title>My title</title>
... </head>
<body>
<script src="./script.js" />
<h1 id="head1"
</body>
onclick='myfunction()'>A
heading</h1>
// script.js <a class=’cls1’ href='#'>Link
function myFunction() { text</a>
document.getElementById("head1").innerHTML = "A <p>Hakuna Matata</p>
changes Heading 1"; </body>
} </html>
JS - Events
JS Events
- HTML events are actions that happen to HTML elements. ( Firing, Triggering )

- JavaScript can "react" on these events ( Handling ).

- When the event happens the handler get executed


<body>
<h1 onclick='myfunction()'>A heading</h1>
<a class=’cls1’ href='#'>Link text</a>
<p>Hakuna Matata</p>
</body>
Event : is the click event Handler : myfunction()
JS Events
- Upon clicking the heading, its text will change to “A changed Heading 1”

<body>
<h1 onclick='myfunction()'>A heading</h1>
<a class=’cls1’ href='#'>Link text</a>
<p>Hakuna Matata</p>
</body>
Event : is the click event Handler : myfunction()

// script.js
function myFunction() {
document.getElementById("head1").innerHTML = "A
changed Heading 1";
}
JS Events
03. JSS
JS

- JavaScript is a programming language initially designed to interact with elements of web

pages.

- It enables you to create dynamically updating content, control multimedia, animate images.

- It is also used for event handling.


JS

let formatted = true;if(formatted){console.log('The code is easy to read');}

let formatted = true;

if (formatted) {

console.log('The code is easy to read');

}
JS - Statements

let formatted = true;

if (formatted) {

console.log('The code is easy to read');

- Although the semicolon (;) is optional; you should always use it to terminate a statement.
JS - Comments
// this is a single-line comment

/* This is a block comment


that can span multiple lines */

- Comments are very useful when writing code, they allow you to include notes or hints.

- When executing the code, the JavaScript engine ignores the comments.
JS - Identifiers

- An identifier is a name you choose for variables, parameters, functions, classes, etc.

let formatted = true;

if (formatted) {

console.log('The code is easy to read');

}
JS - Identifiers
- Can Start with a letter (a-z, or A-Z), an underscore(_), or a dollar sign ($).

- Can’t start with a number.

- Can contain a sequence of characters including (a-z, A-Z), numbers (0-9), underscores (_), and

dollar signs ($).

- Can’t contain a whitespace.

- Identifiers are case-sensitive


JS - Identifiers
Identifier name Correct ?

myVar1 yes

List oranges22 no

$username yes

0password no
Bonus
JS - Reserved keywords
JS - Variables
JS - Variables

- A variable is a label that references a value like a number or string. Before using a variable,

you need to declare it.

- Variables are used to dynamically store values and change them.

- A variable has a unique identifier in a unique scope.


JS - Variables
JS - Variables
- A variable is a label that references a value like a number or string. Before using a variable,

you need to declare it.

var message;

let formatted;
JS - Variables
- A variable is a label that references a value like a number or string. Before using a variable,

you need to declare it.

var message = 'The code is easy to read';

let formatted = true;


What’s the difference
between let and var ?
JS - Variables
JS - Variables
- JavaScript is a dynamically typed language, you can assign a value of a different type to a

variable.

let message = 'Hello'; // string

let formatted = true; // boolean

let num = 100; // number


JS - Variables
- JavaScript is a dynamically typed language, you can assign a value of a different type to a

variable.

let message = 'Hello';

message = 100;
JS - Operators

let message = 'Hello';

message = 100;
Give it a try

- Try out this code in your browser console.

let message = 1020;


console.log(message);
console.log(typeof message);
message = true;
console.log(typeof message);
message = 'Together we code our evolution';
console.log(typeof message);
console.log(message + 1);
console.log(typeof number2);
JS - Operators
JS - Operators
- An operator is a symbol used to perform a specific operation on 1 or multiple variables.

- JS supports multiple types of operators, as example :

- Arithmetic Operators ( + - / *)

- Remainder operator (%)

- Assignment operators ( = += -= *= )

- Comparison operators ( == === )

- Logical operators ( ! || &&)


Give it a try
let x = 1;
let y = 2;

x = x + 1;
y+= 1;

console.log(x);
console.log(y);

console.log(x++);
console.log(++y);
console.log(x);

let message = "Hello";


let user = "john";

console.log(message + user);
JS - Conditions
JS - Conditions

if( condition )
statement;

let age = 18;


if (age >= 18) {
console.log('You can sign up');
}
JS - Conditions

if( condition ) {
// ...
} else {
// ...
}

let age = 18;

if (age >= 18) {


console.log('You can sign up.');
} else {
console.log('You must be at least 18 to sign up.');
}
JS - Loops
JS - Conditions

while (expression) {
// statement
}

let count = 1;
while (count < 10) {
console.log(count);
count +=2;
}
JS - Conditions

do {
statement;
} while(expression)

let count = 0;
do {
console.log(count);
count++;
} while (count < 5)
JS - Conditions

for ( ; ; ) {
// statements
}

for (let i = 1; i < 5; i++) {


console.log(i);
}
JS

- JavaScript is a scripting or programming language that allows you to implement complex

features on web pages

- It enables you to create dynamically updating content, control multimedia, animate images.

- It is also used for event handling.


JS - Arrays
JS

- JavaScript is a scripting or programming language that allows you to implement complex

features on web pages

- It enables you to create dynamically updating content, control multimedia, animate images.

- It is also used for event handling.


Give it a try

- JavaScript is a scripting or programming language that allows you to implement complex

features on web pages

- It enables you to create dynamically updating content, control multimedia, animate images.

- It is also used for event handling.


JS - JSON
JS

- JavaScript is a scripting or programming language that allows you to implement complex

features on web pages

- It enables you to create dynamically updating content, control multimedia, animate images.

- It is also used for event handling.


Give it a try

- JavaScript is a scripting or programming language that allows you to implement complex

features on web pages

- It enables you to create dynamically updating content, control multimedia, animate images.

- It is also used for event handling.


JS - Functions
JS

- JavaScript is a scripting or programming language that allows you to implement complex

features on web pages

- It enables you to create dynamically updating content, control multimedia, animate images.

- It is also used for event handling.


Give it a try

- JavaScript is a scripting or programming language that allows you to implement complex

features on web pages

- It enables you to create dynamically updating content, control multimedia, animate images.

- It is also used for event handling.


NEXT
- CSS - Flex
- JQuery
Resources
- https://www.javascripttutorial.net/
Thanks

You might also like