Lecture 8
1/29

JavaScript

1. Lecture 8

JavaScript
Senior-Lecturer: Sarsenova Zh.N.

2. Which one is legal?

My_variable
$my_variable
1my_example
_my_variable
@my_variable
My_variable_example
++my_variable
%my_variable
#my_variable
~my_variable
myVariableExample
Legal
Illegal

3. For Loop

• A loop is a block of code that allows you
to repeat a section of code a certain
number of times, perhaps changing
certain variable values each time the
code is executed.

4. Why loops are useful?

• Loops are useful because they allow you to
repeat lines of code without retyping them
or using cut and paste in your text editor.
• They save time and trouble of repeatedly
typing the same lines of code, but also
avoids typing errors in repeated lines.
• You are also able to change one or more
variable values each time the browser
passes through the loop.

5. For loop

for (initial_expression; test_exp; change_exp)
{ statements; }
• One of the most used and familiar loops is the
for loop.
• It iterates through a sequence of statements
for a number of times controlled by a
condition.
• The change_exp determines how much has
been added or subtracted from the counter
variable.

6. For loop

for ( varname=1;varname<11;varname+=1 )
initialization
Tells the loops
when to stop
running
Determines the rate at
which the variable is
changed and whether it
gets larger or smaller

7. For loop Example

<script type=“text/javascript”>
var counter;
for (counter = 1; counter <= 10; counter++)
{
document.write(counter*counter + “ “);
}
</script>
• Display the square of numbers
• Output: 1 4 9 16 25 36 49 64 81 100

8. While loop

• A while loop just looks at a short comparison and repeats
until the comparison is no longer true.
• The while loop begins with a termination condition and
keeps looping until the termination condition is met.
• The counter variable is managed by the context of the
statements inside the curly braces.
while(varname<11)
{
}

9. While loop example

<html>
<head>
<title>While loop example</title>
<script language=“JavaScript”>
var counter = 100;
var numberlist = “”;
while (counter > 0) {
numberlist += “Number “ + counter + “<br>”;
counter -= 10;
}
document.write(numberlist);
</script> <body> … </body>
</html>

10. Do…while loop

• The do/while loop always executes statements in
the loop in the first iteration of the loop.
• The termination condition is placed at the
bottom of the loop.
• Syntax:
do {
statements;
counter increment/decrement;
} while (termination condition)

11. Do…while example

12. Array

• An Array contains a set of data
represented by a single variable name.
• Arrays in JavaScript are represented by
the Array Object, we need to “new
Array()” to construct this object.
• The first element of the array is
“Array[0]” until the last one Array[i-1].
• E.g. myArray = new Array(5)
– We have myArray[0,1,2,3,4].

13. Array Example

<script type=“text/javascript”>
Car = new Array(3);
Car[0] = “Ford”;
Car[1] = “Toyota”;
Car[2] = “Honda”;
document.write(Car[0] + “<br>”);
document.write(Car[1] + “<br>”);
document.write(Car[2] + “<br>”);
</script>

14. Array

• You can also declare arrays with
variable length.
–arrayName = new Array();
–Length = 0, allows automatic
extension of the length.
–Car[9] = “Ford”; Car[99] =
“Honda”;

15. Events

• The most exciting JavaScript-powered pages are
dynamic. Which means they perform various actions as
your visitor interacts with them(moving his mouse,
typing in the text, clicking things, and so on).
• Events are notifications that an HTML element sends
out when specific things happen
• An HTML event can be something the browser does, or
something a user does.
Examples
• An HTML web page has finished loading
• An HTML input field was changed
• An HTML button was clicked

16. Syntax

• <element event='some JavaScript'>

17. Common HTML Events

The other events we can find here:
https://www.w3schools.com/jsref/dom_obj_event.asp

18. Example

19. Common HTML object events

20. Onclick event

21. Exercise

• When the button is clicked, trigger myFunction()
with an event.

22. Mouse Events

23. Keyboard Events

24. onFocus event

25. onblur event

Execute a JavaScript when a user leaves an input field:

26. onchange event

27. Frame/Object Events

28. Form Events

29. Thank you!

English     Русский Rules