JavaScript

JavaScript is the programming language of HTML and the Web. Easy to learn One of the 3 languages of all developers MUST learn: 1. HTML to define the content of web pages 2. CSS to specify the layout of web pages 3. JavaScript to program the behavior of web pages

JavaScript can be placed in the and the sections of an HTML page. can be placed outside html file (External JavaScript)

JavaScript in function myFunction() { document.getElementById("demo").innerHTML = "Paragraph changed."; } JavaScript in Head A Paragraph. Try it

JavaScript in My Web Page A Paragraph Try it function myFunction() { document.getElementById("demo").innerHTML = "Paragraph changed."; }

External JavaScript External JavaScript A Paragraph. Try it Note: myFunction is stored in an external file called "myScript.js". You can place an external script reference in or as you like.

External JavaScript Advantages Placing JavaScripts in external files has some advantages: It separates HTML and code It makes HTML and JavaScript easier to read and maintain Cached JavaScript files can speed up page loads

JavaScript Output JavaScript can "display" data in different ways: Writing into an alert box, using window.alert(). Writing into the HTML output using document.write(). Writing into an HTML element, using innerHTML. Writing into the browser console, using console.log().

Using window.alert() My First Web Page My first paragraph. window.alert(5 + 6);

Using document.write() My First Web Page My first paragraph. document.write(5 + 6); The document.write() method should be used only for testing.

Using document.write() My First Web Page My first paragraph. Try it The document.write() method should be used only for testing.

Using innerHTML To access an HTML element, JavaScript can use the document.getElementById(id) method. The id attribute defines the HTML element. The innerHTML property defines the HTML content:

My First Web Page My First Paragraph. document.getElementById("demo").innerHTML = 5 + 6;

Using console.log() My First Web Page My first paragraph. Activate debugging in your browser (Chrome, IE, Firefox) with F12, and select "Console" in the debugger menu. console.log(5 + 6);

JavaScript Syntax JavaScript Statements Statements are separated by semicolons. The variables x, y, and z are assigned the values 5, 6, and 11: var x = 5; var y = 6; var z = x + y; document.getElementById("demo").innerHTML = z;

JavaScript Variables JavaScript uses the var keyword to define variables. An equal sign is used to assign values to variables. var x; x = 6;

JavaScript Operators = + -* / (5 + 6) * 10

JavaScript Expressions Example 5 * 10 x * 10 "John" + " " + "Doe"

JavaScript Comments Code after double slashes // or between /* and */ is treated as a comment. var x = 5; // I will be executed // var x = 6; I will NOT be executed

JavaScript is Case Sensitive All JavaScript identifiers are case sensitive. The variables lastName and lastname, are two different variables. lastName = "Doe"; lastname = "Peterson";

JavaScript and Camel Case Hyphens: first-name, last-name, master-card, inter-city. Underscore: first_name, last_name, master_card, inter_city. Camel Case: FirstName, LastName, MasterCard, InterCity. In programming languages, especially in JavaScript, camel case often starts with a lowercase letter: firstName, lastName, masterCard, interCity.

Code Example 1 My Web Page I am a paragraph. I am a div. Try it function myFunction() { document.getElementById("myPar").innerHTML = "Hello Dolly."; document.getElementById("myDiv").innerHTML = "How are you?"; } When you click on "Try it", the two elements will change.

Code Example 2 JavaScript Operators The + operator concatenates (adds) strings. var txt1 = "John"; var txt2 = "Doe"; document.getElementById("demo").innerHTML = txt1 + " " + txt2;

JavaScript Data Types var length = 16; // Number var lastName = "Johnson"; // String var cars = ["Saab", "Volvo", "BMW"]; // Array var x = {firstName:"John", lastName:"Doe"}; // Object

Try it 1 var x = "Volvo" ; document.getElementById("demo").innerHTML = x; Results???

Try it 2 var x = "Volvo"; document.getElementById("demo").innerHTML = x; Results???

JavaScript Functions function myFunction(p1, p2) { return p1 * p2; // The function returns the product of p1 and p2 }

JavaScript Events The time is? The time is? Click the button to display the date. The time is? function displayDate() { document.getElementById("demo").innerHTML = Date(); }

JavaScript Strings var carName1 = "Volvo XC60"; var carName2 = ‘BMW’; document.getElementById("demo").innerHTML = carName1 + " " + carName2;

quotes inside a string var answer1 = "It's alright"; var answer2 = "He is called 'Johnny'"; var answer3 = 'He is called "Johnny"'; document.getElementById("demo").innerHTML = answer1 + " " + answer2 + " " + answer3;

String Length var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; document.getElementById("demo").innerHTML = txt.length;

Converting to Upper Case Convert string to upper case: Try it Hello World! function myFunction() { var text = document.getElementById("demo").innerHTML; document.getElementById("demo").innerHTML = text.toUpperCase(); }

Converting to Lower Case Convert string to lower case: Try it Hello World! function myFunction() { var text = document.getElementById("demo").innerHTML; document.getElementById("demo").innerHTML = text.toLowerCase(); }

The concat() Method The concat() method joins two or more strings: var text1 = "Hello"; var text2 = "World!"; document.getElementById("demo").innerHTML = text1.concat(" ",text2);

The charAt() Method The charAt() method returns the character at a given position in a string: var str = "HELLO WORLD"; document.getElementById("demo").innerHTML = str.charAt(0);

String to array var str = "Hello"; var arr = str.split(""); var text = ""; var i; for (i = 0; i < arr.length; i++) { text += arr[i] + " " } document.getElementById("demo").innerHTML = text;

Resources w3schools.com