Lecture 8
Which one is legal?
For Loop
Why loops are useful?
For loop
For loop
For loop Example
While loop
While loop example
Do…while loop
Do…while example
Array
Array Example
Array
Events
Syntax
Common HTML Events
Example
Common HTML object events
Onclick event
Exercise
Mouse Events
Keyboard Events
onFocus event
onblur event
onchange event
Frame/Object Events
Form Events
Thank you!
505.57K
Категория: ПрограммированиеПрограммирование

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     Русский Правила