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.