Web Systems & Technologies CS-3548 Prepared By: Junaid Hassan Lecturer at UOS M.B.Din Campus junaidte14@gmail.com
Introduction to JAVASCRIPT (JS) Topics: Introduction to JAVASCRIPT (JS)
Intro to JS: Programming language of HTML and Web Front end development language Used to change the layout of web page dynamically Used to add interactivity in web page
Intro to JS: JS can change HTML styles (CSS) JS can hide HTML elements JS can change HTML content JS can change HTML styles (CSS) JS can hide HTML elements JS can show HTML elements document.getElementById("demo").innerHTML = "Hello World"; document.getElementById("demo").style.backgroundColor = “red"; document.getElementById("demo").style.display = "none";
Where & How to use JS: <script> tag is used to define JS JS can be placed inside <head> tag or inside <body> tag Another way to define JS is to add JS code in external file and then reference it inside web page
JS Example: <p id="demo">A Paragraph</p> <button type="button" onclick="myFunction()">Try it</button> <script> function myFunction() { document.getElementById("demo").innerHTML = "Paragraph changed."; } </script>
JS Output: document.getElementById("demo").innerHTML = 5 + 6; document.write(5 + 6); window.alert(5 + 6); console.log(5 + 6); <button onclick="document.write(5 + 6)">Try it</button>
JS Syntax: JS code lines are separated by semicolon (;) JS veriables are defined using ‘var’ keyword JS operators (+, -, *, /) JS expression is a combination of values, variables, and operators, which computes to a value JS comments (//, /* */) JS and CamelCase (In JS variables are defined in CamelCase e.g firstName etc.)
JS Functions: Block of code to perform some task We have to call that function to perform that task They avoid repetetion of code We can use a function multiple times in our code var x = myFunction(4, 3); function myFunction(p1, p2) { return p1 * p2; }
JS Arrays: A special variable which can hold multiple values at a time var items = [“item1", “item2", “item3"]; var items = [ “item1", “item2", “item3" ]; var items = new Array(“item1", “item2", “item3");
JS Objects: Objects are also like variables but they contain multiple values Objects contain properties + methods Properties are pairs of ‘name’ and ‘value’ Methods are functions var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:”blue”, fullName: function(){return this.firstName + “ ” + this.lastName;}}; person.firstName, person[‘firstName’] person.fullName();
JS Conditional Statements: Conditional statements are used to perform an action based on a condition If statement, else, if else, switch statements if (condition1) { block of code to be executed if condition1 is true } else if (condition2) { block of code to be executed if the condition1 is false and condition2 is true } else { block of code to be executed if the condition1 is false and condition2 is false }
JS Conditional Statements: Switch statement is used to perform different actions based on different cases switch(expression) { case n: code block break; case n: code block break; default: code block }
JS Loops (For, For/In): Loops can execuste a block of code a number of times for (i = 0; i < 5; i++) { text += "The number is " + i + "<br>"; } For/In loop is used to iterate through the properties of an object var person = {fname:"John", lname:"Doe", age:25}; var text = ""; var x; for (x in person) { text += person[x]; }
JS Loops (While, do/while): While loop, loops through a block of code as long as the condition is true while (i < 10) { text += "The number is " + i; i++; } In do/while loop, block of code will be executed at least once even if the condition is false. do { text += "The number is " + i; i++; } while (i < 10);
References: http://w3schools.com/js