2017, Fall Pusan National University Ki-Joune Li JavaScript - Basic 2017, Fall Pusan National University Ki-Joune Li
JavaScript JavaScript is one of the 3 languages all web developers must learn: HTML to define the content of web pages CSS to specify the layout of web pages JavaScript to program the behavior of web pages JavaScript is like any other high level language like Java Almost similar syntax But different semantics Script Language: need no compiling to make executable machine code
JavaScript - Example First example: JavaScript can insert HTML contents <!DOCTYPE html> <html> <head></head> <body> <h1>Welcome to JavaScript</h1> <script type="text/javascript"> document.writeln("<p>Inserted Line</p>"); </script> </body> </html> Method of document object
JavaScript - Example Second example: JavaScript can change HTML contents via getElementById(): to find an HTML element (with id="demo") and changes the element content (innerHTML) Example Third example: JavaScript can change HTML attributes This example changes an HTML image by changing the src (source) attribute of an <img> tag:
JavaScript - Example Fourth example: JavaScript can receive user input <!DOCTYPE html> <html> <head></head> <body> <script type="text/javascript"> var name; name=window.prompt("Please enter your name"); document.writeln("<p>Hello "+name+", Welcome to JS programming</p>"); </script> </body> </html> Method of window object
JavaScript – Parsing a value Fifth example: JavaScript can parse given type from user input <!DOCTYPE html> <html> <head></head> <body> <script type="text/javascript"> var firstNumber, secondNumber; var number1, number2, sum; firstNumber=window.prompt("Please enter first number"); number1=parseInt(firstNumber); secondNumber=window.prompt("Please enter scond number"); number2=parseInt(secondNumber); sum=number1+number2; document.writeln("<p>The sum is "+sum+"</p>"); </script> </body> </html> Function or method of global object
JavaScript – Variables JavaScript does not require any type declaration before using it. Loosely typed language: cf. C/C++ Language Automatic conversion of type number1 becomes an integer var number 1; firstNumber=window.prompt("Please enter a number"); number1=parseInt(firstNumber); var number 1; firstNumber=window.prompt("Please enter a number"); number1=parseFloat(firstNumber);
JavaScript – Variables Example var length = 16; // Number var lastName = "Johnson"; // String var x = {firstName:"John", lastName:"Doe"}; // Object <!DOCTYPE html> <html> <body> <script type="text/javascript"> var x=16+"volvo"; document.writeln(x); </script> </body> </html> <!DOCTYPE html> <html> <body> <script type="text/javascript"> var x=16+4+"volvo"; document.writeln(x); </script> </body> </html>
JavaScript – Operators JavaScript provides almost the same operators of Java +, /, *, -, % (reminder), +=, ++, -- <, <=, >, >=, ==, != except ===, !== With the same operator precedence <!DOCTYPE html> <html> <head></head> <body> <script type="text/javascript"> var name; var now=new Date(); var hour=now.getHours(); if (hour<12) document.writeln("<p> Good Morning</p>"); else if (hour>=12) { hour-=12; if(hour<6) document.writeln("<p> Good Afternoon</p>"); else document.writeln("<p> Good Evening</p>"); } </script> </body> </html>
JavaScript – Control Statements JavaScript provides almost the same control statements if, else, while, do while, for, break, continue <!DOCTYPE html> <html> <head></head> <body> <script type="text/javascript"> var amount, principal=1000.00, rate=0.02; document.writeln("<table> <caption>Calculating Interest</caption>"); document.writeln("<thead><tr><th>Year</th><th>Amount </th></tr></thead>"); document.writeln("<tbody>"); for(var year=1;year<=10;++year) { amount=principal*Math.pow(1.0+rate, year); document.writeln("<tr><td>"+year+"</td><td>"+amount.toFixed(2)); document.writeln("</td></tr>"); } document.writeln("</tbody></table>"); </script> </body>