0
JavaScript 101JavaScript 101
NETS 212 TA teamNETS 212 TA team
09/13/13 1
OutlineOutline
09/13/13 2
(1) Introduction to JavaScript
(2) Writing JavaScript programs
(1) Introduction to JavaScript(1) Introduction to JavaScript
09/13/13 3
JavaScript: FactsJavaScript: Facts
09/13/13 4
- Developed by NetScape, as LiveScript in 1995
- An interpreted programming ...
JavaScript: UsesJavaScript: Uses
09/13/13 5
- JS Could be integrated in HTML
(we will see how this works soon)
- HTML coul...
JavaScript: LimitationsJavaScript: Limitations
09/13/13 6
- Client-side JS cannot read or write files
(Q: why?)
- Same Ori...
JS in HTML: DemoJS in HTML: Demo
09/13/13 7
<html>
<head><title>Demo</title></head>
<body>
<script language="JavaScript">
...
…… and HTML in JS: Demoand HTML in JS: Demo
09/13/13 8
<html>
<head><title>Demo</title></head>
<body>
<script language="Ja...
External scripts!External scripts!
09/13/13 9
<html>
<head><title>Demo</title></head>
<body>
<script type="text/javascript...
Adding two numbersAdding two numbers
09/13/13 10
<html>
<head>
<title>Addition</title>
<script type="text/javascript">
fun...
Adding two numbers (cont'd)Adding two numbers (cont'd)
09/13/13 11
<body>
a:
<input type="text" id="input1">
b:
<input typ...
JavaScript: basic syntaxJavaScript: basic syntax
09/13/13 12
- Eloquent JavaScript;
http://eloquentjavascript.net/
- Varia...
Try it out!Try it out!
09/13/13 13
1. Reproduce the HelloWorld page
2. Write it using ’window.alert()'
3. Write a Minus pa...
(2) Writing JavaScript Programs(2) Writing JavaScript Programs
09/13/13 14
JavaScript: VariablesJavaScript: Variables
09/13/13 15
- Declare variables with the keyword var:
var varibleName;
- Assign...
JavaScript: Variables (Cont’d)JavaScript: Variables (Cont’d)
09/13/13 16
- Re-declaring a variable:
var varibleName = “Hel...
JavaScript: Data typesJavaScript: Data types
09/13/13 17
- JS has dynamic data types
var variableName; -- undefined;
var v...
JavaScript: Data types (Cont’d)JavaScript: Data types (Cont’d)
09/13/13 18
- Booleans:
var x = false;
var y = true;
- Arra...
JavaScript: Data types (Cont’d)JavaScript: Data types (Cont’d)
09/13/13 19
- Objects: defined by name and value pairs
var ...
JavaScript: FunctionsJavaScript: Functions
09/13/13 20
- Functions:
function foo(argument1, argument 2) {
some code;
}
- A...
JavaScript: Scope of variablesJavaScript: Scope of variables
09/13/13 21
var numberCars = 3; // global
numberTrees = 15; /...
JavaScript: Scope of variablesJavaScript: Scope of variables
09/13/13 22
function simpleFunction()
{
var colorCar = 'blue'...
JavaScript: OperatorsJavaScript: Operators
09/13/13 23
- Arithmetic:
+: x = y + 2;
-: x = y – 2;
*: x = y * 2;
/: x = y / ...
JavaScript: AssignmentJavaScript: Assignment
09/13/13 24
- Assignment:
=: x = y;
+=: x += y;
-=: x -= y;
*=: x *= y;
/=: x...
JavaScript: The ‘+’ operatorJavaScript: The ‘+’ operator
09/13/13 25
- Adding strings:
txt1 = “hello”;
txt2= “world”;
txt3...
JavaScript: Other operatorsJavaScript: Other operators
09/13/13 26
- Logical operators:
&& : and
|| : or
! : not
- Compari...
JavaScript: Conditional statementsJavaScript: Conditional statements
09/13/13 27
- if statement:
if (i < 20) {
i ++;
}
- i...
JavaScript: Conditional statementsJavaScript: Conditional statements
09/13/13 28
- if-else if-else statement :
if (i < 20)...
JavaScript: SwitchJavaScript: Switch statementsstatements
09/13/13 29
- Switch statement:
switch (n) {
case 1:
n ++;
break...
JavaScript: For-loopJavaScript: For-loop
09/13/13 30
- for-loop:
for (var i = 0; i <= names.length; i ++) {
document.write...
JavaScript: While-loopJavaScript: While-loop
09/13/13 31
- while-loop:
while (i < 10) {
i ++;
}
- do/while-loop:
do {
i ++...
JavaScript: BreakJavaScript: Break
09/13/13 32
- Break statement: breaks entire loop
while (i < 10) {
if (i ==3) {
break;
...
JavaScript: ContinueJavaScript: Continue
09/13/13 33
- Continue statement: breaks current iteration
while (i < 10) {
if (i...
JavaScript: ExceptionsJavaScript: Exceptions
09/13/13 34
- try: test a block of code for errors
- catch: actual error hand...
JavaScript: Exceptions (cont’d)JavaScript: Exceptions (cont’d)
09/13/13 35
- throw:
try {
if (x == 1)
throw “x should not ...
Try it out!Try it out!
09/13/13 36
Write a script that:
(1) takes one user input, say, i
(2) computes the i-th Fibonacci n...
ResourcesResources
09/13/13 37
- Douglas Crockford’s lecture:
http://www.youtube.com/watch?v=v2ifWcnQs6M&feature=
youtu.be...
Upcoming SlideShare
Loading in...5
×

Javascript

664

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
664
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
21
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Javascript"

  1. 1. JavaScript 101JavaScript 101 NETS 212 TA teamNETS 212 TA team 09/13/13 1
  2. 2. OutlineOutline 09/13/13 2 (1) Introduction to JavaScript (2) Writing JavaScript programs
  3. 3. (1) Introduction to JavaScript(1) Introduction to JavaScript 09/13/13 3
  4. 4. JavaScript: FactsJavaScript: Facts 09/13/13 4 - Developed by NetScape, as LiveScript in 1995 - An interpreted programming language (Q: what is an 'interpreted language'?) - Interpreted by web browsers (Q: have you ever written JS before?) - With OO capability (Q: is JS a sibling of Java?)
  5. 5. JavaScript: UsesJavaScript: Uses 09/13/13 5 - JS Could be integrated in HTML (we will see how this works soon) - HTML could be integrated in JS (we will see how this works too!) - Offload some computation to the user side (Q: why bother?)
  6. 6. JavaScript: LimitationsJavaScript: Limitations 09/13/13 6 - Client-side JS cannot read or write files (Q: why?) - Same Origin Policy (Q: what is XSS?) - Cannot do multithread
  7. 7. JS in HTML: DemoJS in HTML: Demo 09/13/13 7 <html> <head><title>Demo</title></head> <body> <script language="JavaScript"> document.write('Hello World!'); </script> </body> </html> script tags actual script
  8. 8. …… and HTML in JS: Demoand HTML in JS: Demo 09/13/13 8 <html> <head><title>Demo</title></head> <body> <script language="JavaScript"> document.write('<h2>Hello World!</h2>'); </script> </body> </html>
  9. 9. External scripts!External scripts! 09/13/13 9 <html> <head><title>Demo</title></head> <body> <script type="text/javascript" src="helloworld.js"></script> </body> </html>
  10. 10. Adding two numbersAdding two numbers 09/13/13 10 <html> <head> <title>Addition</title> <script type="text/javascript"> function Add() { var a=parseInt(document.getElementById("input1").value); var b=parseInt(document.getElementById("input2").value); document.getElementById("result").value=a+b; } </script> </head>
  11. 11. Adding two numbers (cont'd)Adding two numbers (cont'd) 09/13/13 11 <body> a: <input type="text" id="input1"> b: <input type="text" id="input2"> result: <input type="text" id="result" > <input type="button" id="compute" value="Add those two!" onclick="Add()"> </body> </html>
  12. 12. JavaScript: basic syntaxJavaScript: basic syntax 09/13/13 12 - Eloquent JavaScript; http://eloquentjavascript.net/ - Variables, Functions, Structures: http://www.tutorialspoint.com/javascript/javascript_variables.htm
  13. 13. Try it out!Try it out! 09/13/13 13 1. Reproduce the HelloWorld page 2. Write it using ’window.alert()' 3. Write a Minus page instead of Addition 4. Read the online tutorials for more advanced syntax
  14. 14. (2) Writing JavaScript Programs(2) Writing JavaScript Programs 09/13/13 14
  15. 15. JavaScript: VariablesJavaScript: Variables 09/13/13 15 - Declare variables with the keyword var: var varibleName; - Assign values to variables with ‘=’: var i = 0; var seasLogin= “angchen”; - Default variable value is ‘undefined’: var age; - Declaring multiple variables in one statement: var i = 0, seasLogin=“angchen”, status = “student”;
  16. 16. JavaScript: Variables (Cont’d)JavaScript: Variables (Cont’d) 09/13/13 16 - Re-declaring a variable: var varibleName = “HelloWorld”; var variableName; - General rules: (1) must begin with a letter, (2) or with a ‘$’ or ‘_’. (3) names are case sensitive
  17. 17. JavaScript: Data typesJavaScript: Data types 09/13/13 17 - JS has dynamic data types var variableName; -- undefined; var variableName = “angchen”; – quotes over strings var variableName = 0; -- number - Strings: inside quotes var seasLogin = ‘angchen’; -- or equivalently: var seasLogin= “angchen”; - Numbers: var age = 40; -- or equivalently: Var age = 40.0;
  18. 18. JavaScript: Data types (Cont’d)JavaScript: Data types (Cont’d) 09/13/13 18 - Booleans: var x = false; var y = true; - Arrays: indices are zero-based var names = new Array (); names[0] = “antonis”; names[1] = “vishwa”; names[2] = “ang”; Or: var names = new Array(“antonis”, “vishwa”, “ang”);
  19. 19. JavaScript: Data types (Cont’d)JavaScript: Data types (Cont’d) 09/13/13 19 - Objects: defined by name and value pairs var student = { firstname : “Ang”, lastname : “Chen”, seaslogin : “angchen” }; - You can address the properties by: name = student.lastname; id = student[“seaslogin”];
  20. 20. JavaScript: FunctionsJavaScript: Functions 09/13/13 20 - Functions: function foo(argument1, argument 2) { some code; } - An example: an addition function with two arguments and a return value: function add (a, b) { return a + b; }
  21. 21. JavaScript: Scope of variablesJavaScript: Scope of variables 09/13/13 21 var numberCars = 3; // global numberTrees = 15; // global if (numberTrees > numberCars) { var numberRoads = 4; // global } else { var numberLakes = 9; // global, but will be undefined since never get in here. }
  22. 22. JavaScript: Scope of variablesJavaScript: Scope of variables 09/13/13 22 function simpleFunction() { var colorCar = 'blue'; // local colorTree = 'green'; // global, once this function is called if (colorCar != colorTree) { var colorRoad = 'grey'; // local anywhere in this function after this line } else { var colorLake = 'aqua'; // local, but will be undefined since never get in here. } }
  23. 23. JavaScript: OperatorsJavaScript: Operators 09/13/13 23 - Arithmetic: +: x = y + 2; -: x = y – 2; *: x = y * 2; /: x = y / 2; %: x = y % 2; ++: x = ++y; x = y ++; --: x = y --; x = --y;
  24. 24. JavaScript: AssignmentJavaScript: Assignment 09/13/13 24 - Assignment: =: x = y; +=: x += y; -=: x -= y; *=: x *= y; /=: x /= y; %=: x %= y;
  25. 25. JavaScript: The ‘+’ operatorJavaScript: The ‘+’ operator 09/13/13 25 - Adding strings: txt1 = “hello”; txt2= “world”; txt3= txt1 + “ ” + txt2; - What about adding strings and numbers? txt1 = “hello”; x = 5; y = txt1 + x; - Question: what is z? x = “5”; y = 5; z = x + y;
  26. 26. JavaScript: Other operatorsJavaScript: Other operators 09/13/13 26 - Logical operators: && : and || : or ! : not - Comparison operators: ==: equal ===: exactly equal (both the type and the value) != : not equal !==: not exactly equal >: great than >=: greater than or equal to <: less than <=: less than or equal to
  27. 27. JavaScript: Conditional statementsJavaScript: Conditional statements 09/13/13 27 - if statement: if (i < 20) { i ++; } - if-else statement: if (i < 20) { i ++; } else { i += 2; }
  28. 28. JavaScript: Conditional statementsJavaScript: Conditional statements 09/13/13 28 - if-else if-else statement : if (i < 20) { i ++; } else if (i > 15) { i += 2; } else { i += 3; }
  29. 29. JavaScript: SwitchJavaScript: Switch statementsstatements 09/13/13 29 - Switch statement: switch (n) { case 1: n ++; break; case 2: n += 2; break; default: break; }
  30. 30. JavaScript: For-loopJavaScript: For-loop 09/13/13 30 - for-loop: for (var i = 0; i <= names.length; i ++) { document.write( names[i] ); } - for/in-loop: loop through properties of an object: var student = { firstname : “Ang”, lastname : “Chen”, seaslogin : “angchen” }; for (x in student) { txt += x; }
  31. 31. JavaScript: While-loopJavaScript: While-loop 09/13/13 31 - while-loop: while (i < 10) { i ++; } - do/while-loop: do { i ++; } while ( i <10 )
  32. 32. JavaScript: BreakJavaScript: Break 09/13/13 32 - Break statement: breaks entire loop while (i < 10) { if (i ==3) { break; } x ++; -- a break statement will still get us here! }
  33. 33. JavaScript: ContinueJavaScript: Continue 09/13/13 33 - Continue statement: breaks current iteration while (i < 10) { if (i ==3) { continue; } }
  34. 34. JavaScript: ExceptionsJavaScript: Exceptions 09/13/13 34 - try: test a block of code for errors - catch: actual error handling - throw: customize your errors try { whatisthisfunction(“who cares?!”); } catch (err) { errorCnt ++; document.write(“there is an error”); }
  35. 35. JavaScript: Exceptions (cont’d)JavaScript: Exceptions (cont’d) 09/13/13 35 - throw: try { if (x == 1) throw “x should not be 0!”; if (isNAN(x)) throw “x is not a number!”; } catch (err) { errorCnt ++; document.write(“there is an error”); }
  36. 36. Try it out!Try it out! 09/13/13 36 Write a script that: (1) takes one user input, say, i (2) computes the i-th Fibonacci number (3) prints it on the webpage
  37. 37. ResourcesResources 09/13/13 37 - Douglas Crockford’s lecture: http://www.youtube.com/watch?v=v2ifWcnQs6M&feature= youtu.be - And his book: JavaScript: The Good Parts - Eloquent JavaScript; http://eloquentjavascript.net - A concise tutorial: http://www.tutorialspoint.com/javascript/javascript_o verview.htm
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×