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
