CGS 3066: Web Programming and Design Fall 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 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) 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> <script type="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 <script src="myScript.js“ async defer></script> 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
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: 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 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”
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
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 ah ah!"; // "10 bananas, ah ah ah!" 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"
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("<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");
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!");
Popup Boxes alert("message"); // message confirm("message"); // returns true or false prompt("message"); // returns user input string JS