CGS 3066: Web Programming and Design Spring 2016 Introduction to JavaScript

What is JavaScript? A programming language that can be executed in every modern browser. “Interpreted” language – Do not need to be compiled before execution. – Must be executed by an interpreter. Browsers come with their own JavaScript Engine (e.g. V8 in Chrome, Gecko in Mozilla) Written in scripts, executed at the client side(browser) – To interact with the user locally – No need to refresh the page, less traffic for server

Are Javascript and Java Similar? ● No! ● Java is a full-fledged object-oriented programming language, popular for developing large-scale enterprise applications and web applications ● Javascript is meant for use in Web programming only ● No File I/O capability, networking functions ● Targeted for HTML authors ● Faster alternative to Java in web applications

What can we do with JavaScript? A lot Most common uses include – Interaction with user through pop-up boxes – Access any element in the document and manipulate its look, content and attributes – Create new elements and content and apply them to the document when and if they are needed – Event handling: execute operations when certain events are detected(button clicked, key pressed, mouse hovered, page loaded, value of some HTML element changed, or simply at specific time interval)

Javascript usage examples Form validation Survey/Questionnaire design with dynamic contents Draw and animate graphic elements Create User interface widgets(e.g. Search box with autocomplete, draggable and resizable objects)

How to use JavaScript JavaScript code can be inserted into a HTML file. – In both and For example JS Hello World window.alert("Hello World"); * The type attribute ("text/javascript“) is required for HTML4, optional for HTML5

JavaScript code in HTML must be inside the tag. JavaScript can be also included from external sources using tag. Just put the following into or tag async tells the browser to load script from source asynchronously (in parallel with loading HTML content ) defer tells the browser to load script after the entire HTML document is loaded How to use JavaScript

JavaScript Syntax JavaScript’s basic syntax is identical to that of C++ and Java. // begins a comment that ends at the end of the line /* and */ may be used to contain multiline comments For instance //This is Inline comment /*Multi- line comment*/ tags typically contain one or several Javascript ‘statements’ statements must be separated by new lines or the semicolon(;) character

JavaScript Variables Named variables are used to store data values. The “ var ” keyword is used to declare variables. “=” is used to set values to variables. Example: var length; length = 6; Variables may be declared and defined in a single statement: var length=6; Unlike HTML, Javascript variables are case-sensitive

JavaScript does not have typed variables. – The variable declarations do not specify a data type for the variables – May be used to associate values of any type to a variable – E.g. Integer: var num1 = 10; Floating point numbers: var PI = ; Alphabetic Character: var color = ‘c’; String of Characters: var firstname = “David”// ‘David’ also works Booleans : var x= true; var y= false; Empty/null value: var x=null; //not NULL or Null;case-sensitive Or, Arrays,Objects etc. JavaScript Variables

JavaScript has dynamic types. A Variable having value of a certain may be re-assigned to contain another data type var x; //no data type var x = 5; //it is a number x = “Steven” //change to a string You can use the JavaScript typeof operator to find the current data type of a JavaScript variable. window.alert(typeof "John"); //prints “string” JavaScript Variables

JavaScript Operators ● Arithmetic: +, -, *, /, %, ++, -- ● Assignment: =, +=, -=, *=, /=, %= etc. ● Relational/Comparison:, =, ==,===, != ● Logical: &&, ||, !

JavaScript String Concatenation operator ● The (+) operator is used to concatenate/join the operands when at least one operand is of String type var x=“Foo”+”bar” //x becomes ”Foobar” var y=“ben”+10 //y becomes ”ben10” (+=) may also be used for concatenation, depending on the context var x=5; x+=5;//x is 10 var y=“5” y+=5//y is “55” x+=y //x is “1055”

Javascript Input/Output capabilities Javascript can perform limited Input/output through pop-up boxes To generate a pop-up box: window.alert("Hello\nworld!"); Use ‘\n’ to enter new line inside pop-up message To read input from pop-up: var name= window.prompt(“Enter your name”); * alert() and prompt() also works even if not preceded by “window.”

Javascript Input/Output capabilities(2) To print some content directly to the web page, use document.write() function: document.write(“plain HTML content"); document.write(" we can also write Content with HTML tags "); document.writeln() automatically adds a line at the end of string document.writeln(“HTML content with newline");

Javascript Input/Output capabilities(3) Most current browsers provide access to the browser's debugging console. Although a non-standard feature, the console is frequently used be developers to print and inspect data in bulk To access the console output, press F12 and click on ‘console’ To print message to the console, use the console.log() function console.log(" press f12 or right click to Inspect Element. \n Then click Console to find this message!");