introduction to javascript csc 2320 fall 2014 disclaimer: all words, pictures are adopted from...
DESCRIPTION
In this chapter Introduction to JavaScript Three Layers of Web Programming with JavaScript ◦ Running a JavaScript Program ◦ Statements ◦ Comments ◦ Variable ◦ Date types ◦ OperationsTRANSCRIPT
![Page 1: Introduction to JavaScript CSc 2320 Fall 2014 Disclaimer: All words, pictures are adopted from “Simple JavaScript”by Kevin Yank and Cameron Adams and also](https://reader031.vdocuments.net/reader031/viewer/2022012919/5a4d1b177f8b9ab0599923d5/html5/thumbnails/1.jpg)
Introduction to JavaScriptCSc 2320Fall 2014
Disclaimer: All words, pictures are adopted from “Simple JavaScript”by Kevin Yank and Cameron Adams and also from W3schools.Edited by Guoliang Liu, Only for Course CSc2320 at GSU CS Department
![Page 2: Introduction to JavaScript CSc 2320 Fall 2014 Disclaimer: All words, pictures are adopted from “Simple JavaScript”by Kevin Yank and Cameron Adams and also](https://reader031.vdocuments.net/reader031/viewer/2022012919/5a4d1b177f8b9ab0599923d5/html5/thumbnails/2.jpg)
ResourcesSimple Javascript
◦By kevin Yank and Cameron Adams W3Schools.
◦http://www.w3schools.com/js/default.asp
![Page 3: Introduction to JavaScript CSc 2320 Fall 2014 Disclaimer: All words, pictures are adopted from “Simple JavaScript”by Kevin Yank and Cameron Adams and also](https://reader031.vdocuments.net/reader031/viewer/2022012919/5a4d1b177f8b9ab0599923d5/html5/thumbnails/3.jpg)
In this chapterIntroduction to JavaScriptThree Layers of WebProgramming with JavaScript
◦Running a JavaScript Program◦Statements◦Comments◦Variable◦Date types◦Operations
![Page 4: Introduction to JavaScript CSc 2320 Fall 2014 Disclaimer: All words, pictures are adopted from “Simple JavaScript”by Kevin Yank and Cameron Adams and also](https://reader031.vdocuments.net/reader031/viewer/2022012919/5a4d1b177f8b9ab0599923d5/html5/thumbnails/4.jpg)
Introduction to JavaScript
JavaScript is a Scripting Language◦Lightweight programming language◦Programming code embedded in
HTML◦Can be executed by all modern web
browsersJava and JavaScript
◦Nothing like each other but some syntax.
Standardized JavaScript:◦ECMAScript (newest 5.1)
![Page 5: Introduction to JavaScript CSc 2320 Fall 2014 Disclaimer: All words, pictures are adopted from “Simple JavaScript”by Kevin Yank and Cameron Adams and also](https://reader031.vdocuments.net/reader031/viewer/2022012919/5a4d1b177f8b9ab0599923d5/html5/thumbnails/5.jpg)
Three Layers of WebThe way to create pages in the
way back.◦HTML, CSS, JavaScript all in one file.
![Page 6: Introduction to JavaScript CSc 2320 Fall 2014 Disclaimer: All words, pictures are adopted from “Simple JavaScript”by Kevin Yank and Cameron Adams and also](https://reader031.vdocuments.net/reader031/viewer/2022012919/5a4d1b177f8b9ab0599923d5/html5/thumbnails/6.jpg)
Separation of Three LayersHTML: ContentCSS: PresentationJavaScript: Behavior
![Page 7: Introduction to JavaScript CSc 2320 Fall 2014 Disclaimer: All words, pictures are adopted from “Simple JavaScript”by Kevin Yank and Cameron Adams and also](https://reader031.vdocuments.net/reader031/viewer/2022012919/5a4d1b177f8b9ab0599923d5/html5/thumbnails/7.jpg)
The third layer: BehaviorJavaScript: Writing Into HTML OutputJavaScript: Reacting to EventsJavaScript: Changing HTML Element
◦JavaScript: Changing HTML Content◦JavaScript: Changing HTML Images
JavaScript: Changing HTML StylesJavaScript: Validate InputCheck out the examples here:
◦http://www.w3schools.com/js/js_intro.asp
![Page 8: Introduction to JavaScript CSc 2320 Fall 2014 Disclaimer: All words, pictures are adopted from “Simple JavaScript”by Kevin Yank and Cameron Adams and also](https://reader031.vdocuments.net/reader031/viewer/2022012919/5a4d1b177f8b9ab0599923d5/html5/thumbnails/8.jpg)
Programming with JavaScriptRunning a JavaScript ProgramTwo ways to insert JavaScript
code◦Internal:◦External:
![Page 9: Introduction to JavaScript CSc 2320 Fall 2014 Disclaimer: All words, pictures are adopted from “Simple JavaScript”by Kevin Yank and Cameron Adams and also](https://reader031.vdocuments.net/reader031/viewer/2022012919/5a4d1b177f8b9ab0599923d5/html5/thumbnails/9.jpg)
JavaScript StatementsIn JavaScript each statement has
to be separated by a new line or a semicolon. So, two statements could be written like this:
Or
Or both:
![Page 10: Introduction to JavaScript CSc 2320 Fall 2014 Disclaimer: All words, pictures are adopted from “Simple JavaScript”by Kevin Yank and Cameron Adams and also](https://reader031.vdocuments.net/reader031/viewer/2022012919/5a4d1b177f8b9ab0599923d5/html5/thumbnails/10.jpg)
CommentsExactly the same with Java
◦Single line:
◦Multiple lines:
![Page 11: Introduction to JavaScript CSc 2320 Fall 2014 Disclaimer: All words, pictures are adopted from “Simple JavaScript”by Kevin Yank and Cameron Adams and also](https://reader031.vdocuments.net/reader031/viewer/2022012919/5a4d1b177f8b9ab0599923d5/html5/thumbnails/11.jpg)
Variables: Store the dataDeclare a variable:
◦var color;Declare and initialize:
◦var color;◦color = “blue”;◦Or var color = “blue”;
assignment operator (=).
![Page 12: Introduction to JavaScript CSc 2320 Fall 2014 Disclaimer: All words, pictures are adopted from “Simple JavaScript”by Kevin Yank and Cameron Adams and also](https://reader031.vdocuments.net/reader031/viewer/2022012919/5a4d1b177f8b9ab0599923d5/html5/thumbnails/12.jpg)
Data Types for a variableNumbers
◦integer or int. E.g., 3, 5, 100◦Floating point number or float. E.g.,
3.1415◦var num = 5;◦var decimal = 10.2;
Strings◦A series of characters coverd by ‘’ or
“” var single = 'Just single quotes'; var double = "Just double quotes";
![Page 13: Introduction to JavaScript CSc 2320 Fall 2014 Disclaimer: All words, pictures are adopted from “Simple JavaScript”by Kevin Yank and Cameron Adams and also](https://reader031.vdocuments.net/reader031/viewer/2022012919/5a4d1b177f8b9ab0599923d5/html5/thumbnails/13.jpg)
Data Types for a variableBooleans
◦True or false; var lying = true; var truthful = false;
Arrays◦good ways to store individual pieces
of data
![Page 14: Introduction to JavaScript CSc 2320 Fall 2014 Disclaimer: All words, pictures are adopted from “Simple JavaScript”by Kevin Yank and Cameron Adams and also](https://reader031.vdocuments.net/reader031/viewer/2022012919/5a4d1b177f8b9ab0599923d5/html5/thumbnails/14.jpg)
Data Types for a variableArrays (cont.)
◦More examples:
![Page 15: Introduction to JavaScript CSc 2320 Fall 2014 Disclaimer: All words, pictures are adopted from “Simple JavaScript”by Kevin Yank and Cameron Adams and also](https://reader031.vdocuments.net/reader031/viewer/2022012919/5a4d1b177f8b9ab0599923d5/html5/thumbnails/15.jpg)
Data Types for a variableAssociative arrays:
◦Key-value in the array
![Page 16: Introduction to JavaScript CSc 2320 Fall 2014 Disclaimer: All words, pictures are adopted from “Simple JavaScript”by Kevin Yank and Cameron Adams and also](https://reader031.vdocuments.net/reader031/viewer/2022012919/5a4d1b177f8b9ab0599923d5/html5/thumbnails/16.jpg)
Operations for variablesJavaScript Arithmetic OperatorsGiven y = 5;
![Page 17: Introduction to JavaScript CSc 2320 Fall 2014 Disclaimer: All words, pictures are adopted from “Simple JavaScript”by Kevin Yank and Cameron Adams and also](https://reader031.vdocuments.net/reader031/viewer/2022012919/5a4d1b177f8b9ab0599923d5/html5/thumbnails/17.jpg)
Operations for variablesJavaScript Assignment Operators
![Page 18: Introduction to JavaScript CSc 2320 Fall 2014 Disclaimer: All words, pictures are adopted from “Simple JavaScript”by Kevin Yank and Cameron Adams and also](https://reader031.vdocuments.net/reader031/viewer/2022012919/5a4d1b177f8b9ab0599923d5/html5/thumbnails/18.jpg)
Operations for variablesThe + Operator Used on Strings
![Page 19: Introduction to JavaScript CSc 2320 Fall 2014 Disclaimer: All words, pictures are adopted from “Simple JavaScript”by Kevin Yank and Cameron Adams and also](https://reader031.vdocuments.net/reader031/viewer/2022012919/5a4d1b177f8b9ab0599923d5/html5/thumbnails/19.jpg)
ExerciseWrite a simple JavaScript to pop
up an alert.◦No need to submit.
Try the following code and see the difference:◦var a=“string”; var b=“2”; var c =
a+b; alert(c);◦var a=“string”; var b=2; var c =
a+b; alert(c);◦Output the same or not? If not, why?◦No need to submit.