Upload
brian-dorsey
View
221
Download
0
Embed Size (px)
DESCRIPTION
In this chapter Introduction to JavaScript Three Layers of Web Programming with JavaScript ◦ Running a JavaScript Program ◦ Statements ◦ Comments ◦ Variable ◦ Date types ◦ Operations
Citation preview
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
ResourcesSimple Javascript
◦By kevin Yank and Cameron Adams W3Schools.
◦http://www.w3schools.com/js/default.asp
In this chapterIntroduction to JavaScriptThree Layers of WebProgramming with JavaScript
◦Running a JavaScript Program◦Statements◦Comments◦Variable◦Date types◦Operations
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)
Three Layers of WebThe way to create pages in the
way back.◦HTML, CSS, JavaScript all in one file.
Separation of Three LayersHTML: ContentCSS: PresentationJavaScript: Behavior
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
Programming with JavaScriptRunning a JavaScript ProgramTwo ways to insert JavaScript
code◦Internal:◦External:
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:
CommentsExactly the same with Java
◦Single line:
◦Multiple lines:
Variables: Store the dataDeclare a variable:
◦var color;Declare and initialize:
◦var color;◦color = “blue”;◦Or var color = “blue”;
assignment operator (=).
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";
Data Types for a variableBooleans
◦True or false; var lying = true; var truthful = false;
Arrays◦good ways to store individual pieces
of data
Data Types for a variableArrays (cont.)
◦More examples:
Data Types for a variableAssociative arrays:
◦Key-value in the array
Operations for variablesJavaScript Arithmetic OperatorsGiven y = 5;
Operations for variablesJavaScript Assignment Operators
Operations for variablesThe + Operator Used on Strings
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.