JavaScript 101 - UMKC WordPress · Loops • Useful if you want to repeat code execution • for...

31
JavaScript 101 Vishal Kurup

Transcript of JavaScript 101 - UMKC WordPress · Loops • Useful if you want to repeat code execution • for...

Page 1: JavaScript 101 - UMKC WordPress · Loops • Useful if you want to repeat code execution • for loops • while loops • do…while loops. for loop for(i = 0; i < 10; i ++) {document.write

JavaScript 101

Vishal Kurup

Page 2: JavaScript 101 - UMKC WordPress · Loops • Useful if you want to repeat code execution • for loops • while loops • do…while loops. for loop for(i = 0; i < 10; i ++) {document.write

What is JavaScript?

• Is a dialect of ECMAScript

• A lightweight, easy to learn Object Oriented Programming language

• Is a client‐side language

• Is versatile – Can be inserted into any page (regardless of extension)

• Doesn’t require a special license

• Not the same as Java

Page 3: JavaScript 101 - UMKC WordPress · Loops • Useful if you want to repeat code execution • for loops • while loops • do…while loops. for loop for(i = 0; i < 10; i ++) {document.write

What is it used for?

• For adding dynamic content to web pages

• For carrying actions based on events

• Validate data (forms)

• Browser detection

• Slideshows, Image Effects and much more

Page 4: JavaScript 101 - UMKC WordPress · Loops • Useful if you want to repeat code execution • for loops • while loops • do…while loops. for loop for(i = 0; i < 10; i ++) {document.write

Basic form of a JavaScript block

<script type = “text/javascript”><!‐‐Do something/code

//‐‐></script>

• Note: JavaScript is case‐sensitive (X is not equal to x)

• JavaScript ignores whitespace

Page 5: JavaScript 101 - UMKC WordPress · Loops • Useful if you want to repeat code execution • for loops • while loops • do…while loops. for loop for(i = 0; i < 10; i ++) {document.write

Where is JavaScript code placed?

• In the <head></head> section of your page

• In the <body></body> section of your page

• What’s the difference?

• External Files (.js extension)

Page 6: JavaScript 101 - UMKC WordPress · Loops • Useful if you want to repeat code execution • for loops • while loops • do…while loops. for loop for(i = 0; i < 10; i ++) {document.write

Variable Declaration in JavaScript

<script type = “text/javascript”>

var variable1;

var variable2 = 5;

var variable2;

variable 3;

</script>

Page 7: JavaScript 101 - UMKC WordPress · Loops • Useful if you want to repeat code execution • for loops • while loops • do…while loops. for loop for(i = 0; i < 10; i ++) {document.write

Operators

• Arithmetic Operators

• Assignment Operators

• (Boolean) Comparison Operators

• Logical Operators

Page 8: JavaScript 101 - UMKC WordPress · Loops • Useful if you want to repeat code execution • for loops • while loops • do…while loops. for loop for(i = 0; i < 10; i ++) {document.write

Arithmetic Operators

• + (Addition)

• ‐ (Subtraction)

• * (Multiplication)

• /  (Division)

• %  (Modulus)

• ++ (Increment)

• ‐‐ (Decrement)

Page 9: JavaScript 101 - UMKC WordPress · Loops • Useful if you want to repeat code execution • for loops • while loops • do…while loops. for loop for(i = 0; i < 10; i ++) {document.write

Addition Operator & Strings

• You can actually use the addition (+) operator to add two lines of text

• Example:var audience = “WLG”;

document.write(“Hello” +  audience + “members!”);

Page 10: JavaScript 101 - UMKC WordPress · Loops • Useful if you want to repeat code execution • for loops • while loops • do…while loops. for loop for(i = 0; i < 10; i ++) {document.write

Assignment Operators

• (x = 5)

• (x += 5) same as x = x+5

• (x ‐= 5) same as x = x‐5

• (x *= 5) same as x = x * 5

• (x /= 5) same as x = x/5

• (x %= 5) same as x = x%5

Page 11: JavaScript 101 - UMKC WordPress · Loops • Useful if you want to repeat code execution • for loops • while loops • do…while loops. for loop for(i = 0; i < 10; i ++) {document.write

Comparison Operators

• == 

• ===

• !=

• >

• <

• >=

• <=

Page 12: JavaScript 101 - UMKC WordPress · Loops • Useful if you want to repeat code execution • for loops • while loops • do…while loops. for loop for(i = 0; i < 10; i ++) {document.write

Logical Operators

• &&

• ||

• !

Page 13: JavaScript 101 - UMKC WordPress · Loops • Useful if you want to repeat code execution • for loops • while loops • do…while loops. for loop for(i = 0; i < 10; i ++) {document.write

Conditional Statements

• if

• if…else

• if…else if…else

Page 14: JavaScript 101 - UMKC WordPress · Loops • Useful if you want to repeat code execution • for loops • while loops • do…while loops. for loop for(i = 0; i < 10; i ++) {document.write

if statements

if (x > 5)

{

code to be executed;

}

Page 15: JavaScript 101 - UMKC WordPress · Loops • Useful if you want to repeat code execution • for loops • while loops • do…while loops. for loop for(i = 0; i < 10; i ++) {document.write

if...else statements

if (x > 5)

{

execute this code;

}

else

{

execute this code instead;

}

Page 16: JavaScript 101 - UMKC WordPress · Loops • Useful if you want to repeat code execution • for loops • while loops • do…while loops. for loop for(i = 0; i < 10; i ++) {document.write

if...else if…else

if (x > 5){

execute this code;}else if (x > 4){

execute this code;}else {

execute this code;}

Page 17: JavaScript 101 - UMKC WordPress · Loops • Useful if you want to repeat code execution • for loops • while loops • do…while loops. for loop for(i = 0; i < 10; i ++) {document.write

Loops

• Useful if you want to repeat code execution

• for loops

• while loops

• do…while loops

Page 18: JavaScript 101 - UMKC WordPress · Loops • Useful if you want to repeat code execution • for loops • while loops • do…while loops. for loop for(i = 0; i < 10; i ++) {document.write

for loop

for(i = 0; i < 10; i ++)

{

document.write (i);

}

Output: 0123456789

Page 19: JavaScript 101 - UMKC WordPress · Loops • Useful if you want to repeat code execution • for loops • while loops • do…while loops. for loop for(i = 0; i < 10; i ++) {document.write

while loop

var x = 6;

while (x > 1)

{

document.write(x);

x‐‐;

}

Output: 65432

Page 20: JavaScript 101 - UMKC WordPress · Loops • Useful if you want to repeat code execution • for loops • while loops • do…while loops. for loop for(i = 0; i < 10; i ++) {document.write

do…while loop

var x = 5;

do

{

document.write(x);

x‐‐;

}

while (x > 1);

Page 21: JavaScript 101 - UMKC WordPress · Loops • Useful if you want to repeat code execution • for loops • while loops • do…while loops. for loop for(i = 0; i < 10; i ++) {document.write

Functions

• A good way to break your program/code into a smaller segment that does a specific thing.

• Where you place JavaScript code that you want to execute only when called.

• Begins with the keyword “function”

Page 22: JavaScript 101 - UMKC WordPress · Loops • Useful if you want to repeat code execution • for loops • while loops • do…while loops. for loop for(i = 0; i < 10; i ++) {document.write

Function ‐ Example

function checkvalue(parameters)

{

if (x < 10)

{ 

document.write(“The value of x is “ + 10);

}

}

Page 23: JavaScript 101 - UMKC WordPress · Loops • Useful if you want to repeat code execution • for loops • while loops • do…while loops. for loop for(i = 0; i < 10; i ++) {document.write

Pop‐Up Boxes

• alert (“your text”)

• confirm (“your text”) 

//OK = True, Cancel = False

• prompt (“your text”)

//Input value or null

Page 24: JavaScript 101 - UMKC WordPress · Loops • Useful if you want to repeat code execution • for loops • while loops • do…while loops. for loop for(i = 0; i < 10; i ++) {document.write

Objects

• An object is a "package" of data; a collection of values and functions all classed under a single name. – (Aaron Weiss)

• Objects have properties• Objects have methods• JavaScript has built‐in objects and also allows you to define your own object.

• e.g. the document object• document.URL• document.getElementById()

Page 25: JavaScript 101 - UMKC WordPress · Loops • Useful if you want to repeat code execution • for loops • while loops • do…while loops. for loop for(i = 0; i < 10; i ++) {document.write

Objects – Properties (Examples)

• Image.src

//Sets or Returns the URL of the image

• String.length

//Returns the length of a given string

• Document.URL

//Returns the full URL of the current document

Page 26: JavaScript 101 - UMKC WordPress · Loops • Useful if you want to repeat code execution • for loops • while loops • do…while loops. for loop for(i = 0; i < 10; i ++) {document.write

Objects – Method Examples

• Window.setTimeout();

//Call a function or evaluate an expression after a specified # of milliseconds

• Date.getDay();

//Gets the day of the week (0‐6)

• String.toUpperCase();

Page 27: JavaScript 101 - UMKC WordPress · Loops • Useful if you want to repeat code execution • for loops • while loops • do…while loops. for loop for(i = 0; i < 10; i ++) {document.write

Form Validation

A basic example: basic‐validation.html

Page 28: JavaScript 101 - UMKC WordPress · Loops • Useful if you want to repeat code execution • for loops • while loops • do…while loops. for loop for(i = 0; i < 10; i ++) {document.write

Form Validation

An intermediate example: form‐validation.html

Page 29: JavaScript 101 - UMKC WordPress · Loops • Useful if you want to repeat code execution • for loops • while loops • do…while loops. for loop for(i = 0; i < 10; i ++) {document.write

A Simple Slideshow

• Slideshow.html

Page 30: JavaScript 101 - UMKC WordPress · Loops • Useful if you want to repeat code execution • for loops • while loops • do…while loops. for loop for(i = 0; i < 10; i ++) {document.write

JavaScript Tip

• The HTML <noscript> tag

<script type = “text/javascript”>

var variable1 = “Welcome to my site”;

document.write(variable1);

</script>

<noscript>

You have JavaScript turned off! The force is not strong with you!

</noscript>

Page 31: JavaScript 101 - UMKC WordPress · Loops • Useful if you want to repeat code execution • for loops • while loops • do…while loops. for loop for(i = 0; i < 10; i ++) {document.write

Validation without JavaScript

• Q. What happens to my form validation if JavaScript is turned off?


MATLAB Loops and Branching. Loop types Counted loops; called for loop Conditional loops; called while loop.

MATLAB Loops and Branching. Loop types Counted loops; called for loop Conditional loops; called while loop.

Loops Robin Burke IT 130. Outline Announcement: Homework #6 Conditionals (review) Iteration while loop while with counter for loops.

Loops Robin Burke IT 130. Outline Announcement: Homework #6 Conditionals (review) Iteration while loop while with counter for loops.

For Loops › for (variable set; condition; incremental or decrement){ // loop beginning › } // loop end While loops › while (condition) { // beginning.

For Loops › for (variable set; condition; incremental or decrement){ // loop beginning › } // loop end While loops › while (condition) { // beginning.

1 Loops & More WHILE loops FOR loops Range operator Running totals Random Numbers.

1 Loops & More WHILE loops FOR loops Range operator Running totals Random Numbers.

while loops - Borenstein Lab

while loops - Borenstein Lab

COMPLEX SYSTEMS: Artificial Life, Culture & Evolutionng46/000-2015-Fall-ALICE...switch statements if/else commands while loops do-while loops for loops nested for loops break statement

COMPLEX SYSTEMS: Artificial Life, Culture & Evolutionng46/000-2015-Fall-ALICE...switch statements if/else commands while loops do-while loops for loops nested for loops break statement

while Loops in Matlabgerry/class/ME350/pdf/ME... · while loops (1) while loops are most often used when an iteration is repeated until some termination criterion is met. Syntax:

while Loops in Matlabgerry/class/ME350/pdf/ME... · while loops (1) while loops are most often used when an iteration is repeated until some termination criterion is met. Syntax:

Loops ISYS 350. Two Types of Loops while loop for loop.

Loops ISYS 350. Two Types of Loops while loop for loop.

1.6 Loops academy.zariba.com 1. Lecture Content 1.While loops 2.Do-While loops 3.For loops 4.Foreach loops 5.Loop operators – break, continue 6.Nested.

1.6 Loops academy.zariba.com 1. Lecture Content 1.While loops 2.Do-While loops 3.For loops 4.Foreach loops 5.Loop operators – break, continue 6.Nested.

While Loops PowerPoint

While Loops PowerPoint

While and Do-While Loops

While and Do-While Loops

CS305j Introduction to Computing While Loops 1 Topic 15 Indefinite Loops - While Loops "If you cannot grok [understand] the overall structure of a program.

CS305j Introduction to Computing While Loops 1 Topic 15 Indefinite Loops - While Loops "If you cannot grok [understand] the overall structure of a program.

Contents · 5 8.7.1. “While” Loops ..... 106

Contents · 5 8.7.1. “While” Loops ..... 106

1 Agenda Summary of last class Loops Simple Loops WHILE Loops FOR Loops Records Cursors.

1 Agenda Summary of last class Loops Simple Loops WHILE Loops FOR Loops Records Cursors.

CS201 - Repetition loops. Types Of Loops Counting Loop (while, for) Sentinel-Controlled Loop (while, for) Endfile-Controlled Loop (while, for) Input Validation.

CS201 - Repetition loops. Types Of Loops Counting Loop (while, for) Sentinel-Controlled Loop (while, for) Endfile-Controlled Loop (while, for) Input Validation.

While Loops, Wrappers, and Graphical I.O.elm/Teaching/121_S12/... · While loops Almost like for loops, but slightly different Wrapper classes Mostly used for converting numbers to

While Loops, Wrappers, and Graphical I.O.elm/Teaching/121_S12/... · While loops Almost like for loops, but slightly different Wrapper classes Mostly used for converting numbers to

1 Agenda - Loops while for for & while Nested Loops do-while Misc. & Questions.

1 Agenda - Loops while for for & while Nested Loops do-while Misc. & Questions.

Loops ISYS 350. Three Types of Loops while loop do while loop for loop.

Loops ISYS 350. Three Types of Loops while loop do while loop for loop.

Chapter 5: Repetition Statements. In this chapter, you will learn about: Basic loop structures while loops Interactive while loops for loops Loop programming.

Chapter 5: Repetition Statements. In this chapter, you will learn about: Basic loop structures while loops Interactive while loops for loops Loop programming.

Loop variations do-while and for loops. Do-while loops Slight variation of while loops Instead of testing condition, then performing loop body, the loop.

Loop variations do-while and for loops. Do-while loops Slight variation of while loops Instead of testing condition, then performing loop body, the loop.