Download presentation
Presentation is loading. Please wait.
1
2017, Fall Pusan National University Ki-Joune Li
JavaScript - Basic 2017, Fall Pusan National University Ki-Joune Li
2
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
3
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
4
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:
5
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
6
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
7
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);
8
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>
9
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>
10
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= , 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>
Similar presentations
