Introduction to JavaScript CSc 2320 Fall 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
Jan 17, 2018
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.