CGS 3066: Web Programming and Design Fall 2019

CGS 3066: Web Programming and DesignFall 2019 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 JavaScriptEngine(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) • JavaScript can • create an HTML element • add/modify content of an element • add attributes • change attribute values • add/modify styles • can manage event handlers

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

How to use JavaScript • JavaScript code in HTML must be inside the <script> tag. • JavaScript can be also included from external sources using <script> tag. • Just put the following into <head> or <body> tag <scriptsrc="myScript.js“ asyncdefer></script> • async tells the browser to load script from source asynchronously (in parallel with loading HTML content ) • defertells the browser to load script after the entire HTML document is loaded

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*/ • <script> 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 Variables • 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 = 3.1416; Alphabetic Character: var color = ‘c’; String of Characters: varfirstname = “David”// ‘David’ also works Booleans : var x= true; var y= false; Empty/null value:var x=null; //not NULL or Null; case-sensitive 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 typeofoperator to find the current data type of a JavaScript variable. window.alert(typeof "John"); //prints “string”

Math object var rand1to10 = Math.floor(Math.random() * 10 + 1); var three = Math.floor(Math.PI); • Methods: abs, ceil, cos, floor, log, max, min, pow, random, round, sin, sqrt, tan • Properties: E, PI

Special Vaues – null and undefined var ned = null; var benson = 9; // at this point in the code, // ned is null // benson's 9 // caroline is undefined • undefined : has not been declared, does not exist • null : exists, but was specifically assigned an empty or null value

JavaScript Operators Arithmetic: +, -, *, /, %, ++, -- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators Assignment: =, +=, -=, *=, /=, %= etc. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators Relational/Comparison: <, >, <=, >=, ==,===, != https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators Logical: &&, ||, ! https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators

String type and operations var name = “Dan King"; var fName = s.substring(0, s.indexOf(" ")); // “Dan" var len = name.length; // 8 • methods: charAt, charCodeAt, fromCharCode, indexOf, lastIndexOf, replace, split, substring, toLowerCase, toUpperCase • charAt returns a one-letter String (there is no char type) • length property (not a method as in Java) • Strings can be specified with "" or '' • concatenation with + : • 1 + 1 is 2, but "1" + 1 is "11"

String Concatenation 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”

String type and operations var count = 10; var s1 = "" + count; // "10" var s2 = count + " bananas, ah ahah!"; // "10 bananas, ah ahah!" var n1 = parseInt("42 is the answer"); // 42 var n2 = parseFloat("booyah"); // NaN var firstLetter = s[0]; // fails in IE var firstLetter = s.charAt(0); // does work in IE var lastLetter = s.charAt(s.length - 1); • escape sequences behave as in Java: \' \" \& \n \t \\

String Split/Join • split breaks apart a string into an array using a delimiter • can also be used with regular expressions (seen later) • join merges an array into a single string, placing a delimiter between them var s = "the quick brown fox"; var a = s.split(" "); // ["the", "quick", "brown", "fox"] a.reverse(); // ["fox", "brown", "quick", "the"] s = a.join("!"); // "fox!brown!quick!the"

JavascriptInput/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.”

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

JavascriptInput/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!");

Popup Boxes alert("message"); // message confirm("message"); // returns true or false prompt("message"); // returns user input stringJS

CGS 3066: Web Programming and Design Fall 2019