37
| Date post: | 17-Jan-2016 |
| Category: |
Documents |
| Upload: | shawn-watson |
| View: | 228 times |
| Download: | 1 times |
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 <body> and the <head> sections of an HTML page.• can be placed outside html file (External JavaScript)
JavaScript in <head><!DOCTYPE html><html><head>
<script>function myFunction() { document.getElementById("demo").innerHTML = "Paragraph changed.";}
</script></head><body>
<h1>JavaScript in Head</h1><p id="demo">A Paragraph.</p><button type="button" onclick="myFunction()">Try it</button>
</body></html>
JavaScript in <body><!DOCTYPE html><html><body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
<script>function myFunction() { document.getElementById("demo").innerHTML = "Paragraph changed.";}</script>
</body></html>
External JavaScript<!DOCTYPE html><html><body>
<h1>External JavaScript</h1>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Try it</button>
<p><strong>Note:</strong> myFunction is stored in an external file called "myScript.js".</p>
<script src="myScript.js"></script>
</body></html>
You can place an external script reference in <head> or <body> as you like.
External JavaScript AdvantagesPlacing 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 OutputJavaScript 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()<!DOCTYPE html><html><body>
<h1>My First Web Page</h1><p>My first paragraph.</p>
<script>window.alert(5 + 6);</script>
</body></html>
Using document.write()<!DOCTYPE html><html><body>
<h1>My First Web Page</h1><p>My first paragraph.</p>
<script>document.write(5 + 6);</script>
</body></html> The document.write() method should be used only for testing.
Using document.write()<!DOCTYPE html><html><body>
<h1>My First Web Page</h1><p>My first paragraph.</p>
<button type="button" onclick="document.write(5 + 6)">Try it</button>
</body></html> 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:
<!DOCTYPE html><html><body>
<h1>My First Web Page</h1><p>My First Paragraph.</p>
<p id="demo"></p>
<script>document.getElementById("demo").innerHTML = 5 + 6;</script>
</body></html>
Using console.log()<!DOCTYPE html><html><body>
<h1>My First Web Page</h1><p>My first paragraph.</p>
<p>Activate debugging in your browser (Chrome, IE, Firefox) with F12, and select "Console" in the debugger menu.</p>
<script>console.log(5 + 6);</script>
</body></html>
JavaScript Syntax<!DOCTYPE html><html><body><h1>JavaScript Statements</h1><p>Statements are separated by semicolons.</p><p>The variables x, y, and z are assigned the values 5, 6, and 11:</p><p id="demo"></p>
<script>var x = 5;var y = 6;var z = x + y;document.getElementById("demo").innerHTML = z;</script>
</body></html>
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 CaseHyphens: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<h1>My Web Page</h1><p id="myPar">I am a paragraph.</p><div id="myDiv">I am a div.</div><p><button type="button" onclick="myFunction()">Try it</button></p><script>function myFunction() { document.getElementById("myPar").innerHTML = "Hello Dolly."; document.getElementById("myDiv").innerHTML = "How are you?";}</script><p>When you click on "Try it", the two elements will change.</p>
Code Example 2<h1>JavaScript Operators</h1>
<p>The + operator concatenates (adds) strings.</p>
<p id="demo"></p>
<script>var txt1 = "John";var txt2 = "Doe";document.getElementById("demo").innerHTML = txt1 + " " + txt2;</script>
JavaScript Data Typesvar length = 16; // Numbervar lastName = "Johnson"; // Stringvar cars = ["Saab", "Volvo", "BMW"]; // Arrayvar x = {firstName:"John", lastName:"Doe"}; // Object
Try it 1<!DOCTYPE html><html><body>
<p id="demo"></p>
<script>var x = "Volvo" + 16 + 4;document.getElementById("demo").innerHTML = x;</script>
</body></html>
Results???
Try it 2<!DOCTYPE html><html><body>
<p id="demo"></p>
<script>var x = 16 + 4 + "Volvo";document.getElementById("demo").innerHTML = x;</script>
</body></html>
Results???
JavaScript Functionsfunction myFunction(p1, p2) { return p1 * p2; // The function returns the product of p1 and p2}
JavaScript Events<button onclick="getElementById('demo').innerHTML=Date()">The time is?</button>
<p id="demo"></p>
<button onclick="this.innerHTML=Date()">The time is?</button>
<p>Click the button to display the date.</p>
<button onclick="displayDate()">The time is?</button>
<script>function displayDate() { document.getElementById("demo").innerHTML = Date();}</script>
<p id="demo"></p>
JavaScript Strings<p id="demo"></p>
<script>var carName1 = "Volvo XC60";var carName2 = ‘BMW’;document.getElementById("demo").innerHTML =carName1 + "<br>" + carName2;
</script>
quotes inside a string<p id="demo"></p>
<script>
var answer1 = "It's alright";var answer2 = "He is called 'Johnny'";var answer3 = 'He is called "Johnny"';
document.getElementById("demo").innerHTML =answer1 + "<br>" + answer2 + "<br>" + answer3;
</script>
String Length<p id="demo"></p>
<script>var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";document.getElementById("demo").innerHTML = txt.length;</script>
Converting to Upper Case<p>Convert string to upper case:</p>
<button onclick="myFunction()">Try it</button>
<p id="demo">Hello World!</p>
<script>function myFunction() { var text = document.getElementById("demo").innerHTML; document.getElementById("demo").innerHTML = text.toUpperCase();}</script>
Converting to Lower Case<p>Convert string to lower case:</p>
<button onclick="myFunction()">Try it</button>
<p id="demo">Hello World!</p>
<script>function myFunction() { var text = document.getElementById("demo").innerHTML; document.getElementById("demo").innerHTML = text.toLowerCase();}</script>
The concat() Method<p>The concat() method joins two or more strings:</p>
<p id="demo"></p>
<script>var text1 = "Hello";var text2 = "World!";document.getElementById("demo").innerHTML = text1.concat(" ",text2);</script>
The charAt() Method<p>The charAt() method returns the character at a given position in a string:</p>
<p id="demo"></p>
<script>var str = "HELLO WORLD";document.getElementById("demo").innerHTML = str.charAt(0);</script>
String to array<p id="demo"></p>
<script>var str = "Hello";var arr = str.split("");var text = "";var i;for (i = 0; i < arr.length; i++) { text += arr[i] + "<br>"}document.getElementById("demo").innerHTML = text;</script>
Resources• w3schools.com
