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 GSU CS Department

Resources Simple Javascript ◦ By kevin Yank and Cameron Adams W3Schools. ◦

In this chapter Introduction to JavaScript Three Layers of Web Programming 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 browsers Java and JavaScript ◦ Nothing like each other but some syntax. Standardized JavaScript: ◦ ECMAScript (newest 5.1)

Three Layers of Web The way to create pages in the way back. ◦ HTML, CSS, JavaScript all in one file.

Separation of Three Layers HTML: Content CSS: Presentation JavaScript: Behavior

The third layer: Behavior JavaScript: Writing Into HTML Output JavaScript: Reacting to Events JavaScript: Changing HTML Element ◦ JavaScript: Changing HTML Content ◦ JavaScript: Changing HTML Images JavaScript: Changing HTML Styles JavaScript: Validate Input Check out the examples here: ◦

Programming with JavaScript Running a JavaScript Program Two ways to insert JavaScript code ◦ Internal: ◦ External:

JavaScript Statements In 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:

Comments Exactly the same with Java ◦ Single line: ◦ Multiple lines:

Variables: Store the data Declare a variable: ◦ var color; Declare and initialize: ◦ var color; ◦ color = “blue”; ◦ Or var color = “blue”; assignment operator (=).

Data Types for a variable Numbers ◦ integer or int. E.g., 3, 5, 100 ◦ Floating point number or float. E.g., ◦ 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 variable Booleans ◦ True or false;  var lying = true;  var truthful = false; Arrays ◦ good ways to store individual pieces of data

Data Types for a variable Arrays (cont.) ◦ More examples:

Data Types for a variable Associative arrays: ◦ Key-value in the array

Operations for variables JavaScript Arithmetic Operators Given y = 5;

Operations for variables JavaScript Assignment Operators

Operations for variables The + Operator Used on Strings

Exercise Write 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.