javascript 101 - umkc wordpress · loops • useful if you want to repeat code execution • for...
TRANSCRIPT
![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](https://reader030.vdocuments.us/reader030/viewer/2022040505/5e37751a1e433474b3174674/html5/thumbnails/1.jpg)
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](https://reader030.vdocuments.us/reader030/viewer/2022040505/5e37751a1e433474b3174674/html5/thumbnails/2.jpg)
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](https://reader030.vdocuments.us/reader030/viewer/2022040505/5e37751a1e433474b3174674/html5/thumbnails/3.jpg)
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](https://reader030.vdocuments.us/reader030/viewer/2022040505/5e37751a1e433474b3174674/html5/thumbnails/4.jpg)
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](https://reader030.vdocuments.us/reader030/viewer/2022040505/5e37751a1e433474b3174674/html5/thumbnails/5.jpg)
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](https://reader030.vdocuments.us/reader030/viewer/2022040505/5e37751a1e433474b3174674/html5/thumbnails/6.jpg)
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](https://reader030.vdocuments.us/reader030/viewer/2022040505/5e37751a1e433474b3174674/html5/thumbnails/7.jpg)
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](https://reader030.vdocuments.us/reader030/viewer/2022040505/5e37751a1e433474b3174674/html5/thumbnails/8.jpg)
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](https://reader030.vdocuments.us/reader030/viewer/2022040505/5e37751a1e433474b3174674/html5/thumbnails/9.jpg)
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](https://reader030.vdocuments.us/reader030/viewer/2022040505/5e37751a1e433474b3174674/html5/thumbnails/10.jpg)
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](https://reader030.vdocuments.us/reader030/viewer/2022040505/5e37751a1e433474b3174674/html5/thumbnails/11.jpg)
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](https://reader030.vdocuments.us/reader030/viewer/2022040505/5e37751a1e433474b3174674/html5/thumbnails/12.jpg)
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](https://reader030.vdocuments.us/reader030/viewer/2022040505/5e37751a1e433474b3174674/html5/thumbnails/13.jpg)
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](https://reader030.vdocuments.us/reader030/viewer/2022040505/5e37751a1e433474b3174674/html5/thumbnails/14.jpg)
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](https://reader030.vdocuments.us/reader030/viewer/2022040505/5e37751a1e433474b3174674/html5/thumbnails/15.jpg)
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](https://reader030.vdocuments.us/reader030/viewer/2022040505/5e37751a1e433474b3174674/html5/thumbnails/16.jpg)
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](https://reader030.vdocuments.us/reader030/viewer/2022040505/5e37751a1e433474b3174674/html5/thumbnails/17.jpg)
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](https://reader030.vdocuments.us/reader030/viewer/2022040505/5e37751a1e433474b3174674/html5/thumbnails/18.jpg)
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](https://reader030.vdocuments.us/reader030/viewer/2022040505/5e37751a1e433474b3174674/html5/thumbnails/19.jpg)
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](https://reader030.vdocuments.us/reader030/viewer/2022040505/5e37751a1e433474b3174674/html5/thumbnails/20.jpg)
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](https://reader030.vdocuments.us/reader030/viewer/2022040505/5e37751a1e433474b3174674/html5/thumbnails/21.jpg)
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](https://reader030.vdocuments.us/reader030/viewer/2022040505/5e37751a1e433474b3174674/html5/thumbnails/22.jpg)
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](https://reader030.vdocuments.us/reader030/viewer/2022040505/5e37751a1e433474b3174674/html5/thumbnails/23.jpg)
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](https://reader030.vdocuments.us/reader030/viewer/2022040505/5e37751a1e433474b3174674/html5/thumbnails/24.jpg)
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](https://reader030.vdocuments.us/reader030/viewer/2022040505/5e37751a1e433474b3174674/html5/thumbnails/25.jpg)
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](https://reader030.vdocuments.us/reader030/viewer/2022040505/5e37751a1e433474b3174674/html5/thumbnails/26.jpg)
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](https://reader030.vdocuments.us/reader030/viewer/2022040505/5e37751a1e433474b3174674/html5/thumbnails/27.jpg)
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](https://reader030.vdocuments.us/reader030/viewer/2022040505/5e37751a1e433474b3174674/html5/thumbnails/28.jpg)
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](https://reader030.vdocuments.us/reader030/viewer/2022040505/5e37751a1e433474b3174674/html5/thumbnails/29.jpg)
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](https://reader030.vdocuments.us/reader030/viewer/2022040505/5e37751a1e433474b3174674/html5/thumbnails/30.jpg)
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](https://reader030.vdocuments.us/reader030/viewer/2022040505/5e37751a1e433474b3174674/html5/thumbnails/31.jpg)
Validation without JavaScript
• Q. What happens to my form validation if JavaScript is turned off?