JavaScript Basics: Comments, Variables, Events
Translated by
ScribdTranslationsJavaScript Basics: Comments, Variables, Events
Translated by
ScribdTranslationsDkhilInes STI
JavaScript Summary
The comments:
There are two ways to write a comment.
Single-line comments: they are placed at the end of the line, after //
Example://comment
Multi-line comments:
they are placed between /* and */
Example :/*comment*/
Display a variable in a dialog box:
alert('Hello world');
Display a variable in the document (page):
[Link]('Hello world');
Ask the visitor for a string of characters
var age =prompt("Texte d'invite");
Insert JavaScript into an HTML page:
Between the <script> and </script> tags in the header or in the body of the HTML page
Example: <script >
alert('message');
</script>
Place the code in a separate file with the .js extension. In this case, you need to create a file.
.js file that contains the JavaScript code we will use.
Example : <scriptsrc="[Link]">
</script>
In an HTML tag, associate an event that will trigger the script
Example : <ponclick="alert('Hello!');"/p>
The variables
Vara=20 local variable
a=20 global variable
The concatenation
Age=18 ;
alert("Vous avez " + age + " ans") ; //affiche :vous avez 18 ans
Use of function
The declaration of a function in the header of the page, between the tags
<head> and </head>.
functionnonfunction( parameters)
{ Traitement ;}
Function call: functionName(parameters)
TIC 1
DkhilInes STI
Conditional Structures
If (condition)
{ }
Else
{ }
switch(selector)
{
casevaleur1: traitement;
break;
casevaleur2: traitement;
break;
…
default:traitement;
break;
}
Iterative structures
while(condition)
{ instructions }
for(initialization; condition; increment)
{ instructions }
do
instructions
while(condition);
The operators
In algorithm In JavaScript
A=A+ 1 A++
A=A+ X A+=X
A=A- 1 A--
A=A- X A-=X
If (a = b) IF (a== b)
If (a ≠ b) IF (a != b)
ET &&
OU ||
A MOD B A%B
ICT 2
DkhilInes STI
Event management in JavaScript
In JavaScript, an event is an action that occurs:
The Events
onblur It triggers when the element loses focus.
onclick Triggers on a click on the element.
onfocus Triggers when the element gains focus.
oninput Triggers as soon as the value of an element has changed.
onload Triggers when the page is fully loaded.
It triggers when the mouse pointer hovers
onmouseover
the element.
onsubmit Triggers when a form is submitted.
Today, in JavaScript, there are three main ways to implement a handler
of events.
ICT 3
DkhilInes STI
Example with the 3 methods: display a message in an HTML element when a
event is triggered.
1heMethod: Using HTML event-type attributes
The content of the element
Span with an id='s1'
change to 'enter your '
password
When you place the cursor
in the text box
call the function
2thMethod: the addEventListener() method poster
Allows execution of the
JavaScript immediately
during the loading of the
Event page.
Action Allows listening
(detect) the event
and trigger an action
through a function.
TIC 4
DkhilInes STI
3thmethod: call an event with the element's Id
We use the id of the
text area for
detect the event
on focus and we call
directly function
poster
Objects in JavaScript
ICT 5
DkhilInes STI
ICT 6
