Java Script WWWJava Script Dec 1995 Netscape Navigator

WWW技術發展-Java. Script ß (Dec. 1995) Netscape Navigator 2. 0支援 Java. Script Þ 可於Brower中解譯執行的程式語言 <script>

Advantages of Using Java. Script ß ß ß ß Validate user's input. Perform aggregrate

How to Put a Java. Script Into an HTML Page <html> <body> <script type="text/javascript">

Where to Put a Java. Script ß Scripts in the head section: <html> <head>

Using an External Java. Script <html> <head> <script type="text/javascript" src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20760%20570%22%3E%3C/svg%3E' data-src="xxx. js"></script> </head> <body> </html>

Inline Java. Script <script type="text/javascript"> var i=0; </script> </head> <body> <h 2 onclick="alert('You click

Java. Script Basics ß ß Java. Script is Case Sensitive Java. Script Statements var

Java. Script Comments ß Single line comments start with //. // This will write

Java. Script Variables ß ß Variable names are case sensitive. Variable names must begin

Declaring Java. Script Variables ß Declare Java. Script variables with the var statement. var

Java. Script Data Types number var data = -20; var pi = 3. 14159;

Data Types相關函數 ß typeof( ) var str 1 = "Hello World!"; typeof(str 1) string

Number var var var i j k x y z = = = 15;

String var str. HW="Hello World!"; var str. HW 1='Hello World!'; var str 1="Hello Mr.

Boolean var is. Ok = false; var is. Admin = true; var be. True

Array ß Declare an array var arr 1 = new Array(); var arr 2

運算子(Operator) 算術運算子(Arithmetic Operators) Given that y=5, Operator + * / % ++ -- Description

The + Operator Used on Strings ß use + operator to add two or

Adding Strings and Numbers ß If you add a number and a string, the

Other Adding types ß Booleans + Numbers number ß Booleans + Strings string ß

比較運算子(Comparison Operators) var x= 5; Operato r == Description Example is equal to x==8

邏輯運算子(Logical Operators) Given that x=6 and y=3, Operator Description Example and (x < 10

條件運算子(Conditional Operator) variablename = (condition) ? value 1 : value 2; str 1 =

位元運算子(bitwise operator) Operator Description & Bitwise AND. 0 x 1234 & 0 x 00

指定運算子(Assignment Operators) Given that x=10 and y=5, Operator = += -= *= /= %=

Conditional Statements if statements if (condition) { // statements if condition is TRUE }

var name = "林志玲"; var gender ="f"; var is. Married=false; var title ; if

switch (expression or variable case label: //statements if expression break; default: //statements if expression

var color. Choice ="紅"; switch (color. Choice) { case "紅": document. bg. Color="red"; break;

Loop Statement for statement for (intialize; conditional test; increment/decrement) { //Statements to execute; }

while (condition) { // Statements; // Increment/decrement; } var i=1; var sqt=0; while (sqt<1000)

do/while do { // Statements; // Increment/decrement; } while (condition) var i=1; var sqt;

for/in for (variable in object) { //statements } for (var attr in document) {

var arr 1 = new Array(); arr 1[0] = 2; arr 1[4] = "The

with ( object ) { //statements } function click() { alert("click event!"); } with

break & continue var i=1; var sq; while (i < 1000) { sq =

function name (arg 1, arg 2, …) { // statements // return something, if

function hr() { document. write('<hr size="5" color="green" width="90%">'); } function hr 1(hr. Size, hr.

function get. H 1() { var h 1; h 1 = document. get. Elements.

function arguments function sum( ) { var s=0; for (var i=0; i<arguments. length; i++)

recursive function fb(i) { if (i==1) return 0; if (i==2) return 1; return fb(i-2)+fb(i-1);

global vs. local variables var j, n, m, p; j = 1; n= 10;

object var rgb = {r: "ff", g: "ff", b: "00"}; var employee = {

function as object function circle(r) { this. r = r; this. area = Math.

Slides: 46

Download presentation

Java. Script基礎

WWW技術發展-Java. Script ß (Dec. 1995) Netscape Navigator 2. 0支援 Java. Script Þ 可於Brower中解譯執行的程式語言 <script> for (i=0; i<10; i++) { document. write("<hr size="+2*i+" width=" + 40*i+" color='red'>"); } alert("Welcome to Java. Script Test!n. See you!"); </script>

Advantages of Using Java. Script ß ß ß ß Validate user's input. Perform aggregrate calculations. Easily prompt a user for confirmation, alert, popup information. Control of Web browser's behaviors and HTML page component's properties. Conditionalize HTML. Perform operations independent of server information. Control of Dynamic HTML. http: //web 2. im. ncnu. edu. tw/ycchen/www/js/by. Example. html http: //web 2. im. ncnu. edu. tw/ycchen/www 2000/npm. html

How to Put a Java. Script Into an HTML Page <html> <body> <script type="text/javascript"> <!-document. write("Hello World!"); //--> </script> </body> </html>

Where to Put a Java. Script ß Scripts in the head section: <html> <head> <script type="text/javascript">. . . </script> </head> ß ß Scipts in the body section Scripts in both the body and the head section

Using an External Java. Script <html> <head> <script type="text/javascript" src="xxx. js"></script> </head> <body> </html>

Inline Java. Script <script type="text/javascript"> var i=0; </script> </head> <body> <h 2 onclick="alert('You click on me!'); ">Click here!</h 2> <a href="Java. Script: i++; alert('i = ' +i); void 0; ">Count</a> </form> </body>

Java. Script Basics ß ß Java. Script is Case Sensitive Java. Script Statements var i; var j j=6; i=j+2; ß Java. Script statements can be grouped in blocks, using { and }.

Java. Script Comments ß Single line comments start with //. // This will write a header: document. write("<h 1>This is a header</h 1>"); var i; //comments at the End of a Line ß Multi line comments start with /* and end with */. /* The code below will write one header and two paragraphs */

Java. Script Variables ß ß Variable names are case sensitive. Variable names must begin with Þ Þ Þ ß a letter: var 1 underscore character: _var 1 dollar sign character: $var 1 Variable names should not be the same as Java. Script keywords. (see Appdendix F).

Declaring Java. Script Variables ß Declare Java. Script variables with the var statement. var x; var carname; ß Assign values to the variables when you declare them. var x=5; var carname="Volvo"; ß var x, carname; var x=5, carname="Volvo"; Assign values to variables that have not yet been declared x=5; carname="Volvo"; ß Redeclaring a Java. Script variable will not lose its original value. var x=5; var x;

Java. Script Data Types number var data = -20; var pi = 3. 14159; string var str 1 = "Hello World!"; var str 2 = 'Hello World!'; boolean var is. Admin = true; var is. Login = false; array var arr 1 = new Array(); arr 1[0] = 1. 414; function var hw = function () { document. write("Hello World!"); } object var today = new Date();

Data Types相關函數 ß typeof( ) var str 1 = "Hello World!"; typeof(str 1) string ß parse. Int( ) parse. Int("329 for. Young") 329 parset. Int("329 for. Young", 16) 12959 (=0 x 329 f) ß ß parse. Float( ) parse. Float("3. 29 for. Young") 3. 29 eval( ) eval("3+2") 5

Number var var var i j k x y z = = = 15; -20; . 38; 4. 2 e-3; 0 xa 5; 047;

String var str. HW="Hello World!"; var str. HW 1='Hello World!'; var str 1="Hello Mr. Smith's World"; var str 2='Hello Mr. Smith"s World'; var str 3="Hello Mr. Smith"s World"; var str 4='Hello Mr. Smith's World'; ß Escape characters: (Appendix G) Þ , b, t, n, v, f, r, ", ', \, x. XX, u. XXXX Latin 1 Unicode

Boolean var is. Ok = false; var is. Admin = true; var be. True =1; var be. False = 0;

Array ß Declare an array var arr 1 = new Array(); var arr 2 = new Array(3); var arr 3 = []; var arr 4 = new Array(1. 5, '2009', true); var arr 5 = [1. 5, '2009', true]; arr 1[0] = 45; arr 1["暨大"]="www. ncnu. edu. tw";

運算子(Operator) 算術運算子(Arithmetic Operators) Given that y=5, Operator + * / % ++ -- Description Example Result Addition x=y+2 x=7 Subtraction x=y-2 x=3 Multiplication x=y*2 x=10 Division x=y/2 x=2. 5 Modulus (division remainder) Increment x=y%2 x=1 x=++y x=6 Decrement x=--y x=4

The + Operator Used on Strings ß use + operator to add two or more string variables together. txt 1="What a very "; txt 2="nice day"; txt 3=txt 1+txt 2; // What a very nice day"

Adding Strings and Numbers ß If you add a number and a string, the result will be a string. typeof( ) operator var n=2; typeof(nps) "string" var s="0. 5"; typeof(smn) "number" var nps, spn, nms, smn; nps = n+s; // "2. 05", a string spn = s+n; // "0. 52", a string nms = n*s; // 1, a number smn = s*n; // 1, a number

Other Adding types ß Booleans + Numbers number ß Booleans + Strings string ß Booleans +Booleans number

比較運算子(Comparison Operators) var x= 5; Operato r == Description Example is equal to x==8 is false is exactly equal to (value and type) is not equal x===5 is true x==="5" is false x!=8 is true > is greater than x>8 is false < is less than x<8 is true >= is greater than or equal to x>=8 is false <= is less than or equal to x<=8 is true === !=

邏輯運算子(Logical Operators) Given that x=6 and y=3, Operator Description Example and (x < 10 && y > 1) is true || or (x==5 || y==5) is false ! not !(x==y) is true &&

條件運算子(Conditional Operator) variablename = (condition) ? value 1 : value 2; str 1 = (gender=="m") ? "先生" : "女士"; str 2 = (gender=="m") ? "先生" : (is. Married) ? "女士" : "小姐";

位元運算子(bitwise operator) Operator Description & Bitwise AND. 0 x 1234 & 0 x 00 ff 0 x 0034 | Bitwise OR 9 | 10 11 ^ Bitwise XOR. 9 ^ 10 3 ~ Bitwise NOT ~0 x 0 f -16 << Shift left. 7 << 1 14 >> Shift right. 7 >> 1 3 Shift right, zero fill. -1 >>> 2 1073741823 >>> Example

指定運算子(Assignment Operators) Given that x=10 and y=5, Operator = += -= *= /= %= <<= >>>= &= |= ^= Example x = y x += y x -= y x *= y x /= y x %= y a <<= b a >>>= b a &= b a |= b a ^= b Same As x x x a a a = = = x+y x-y x*y x/y x%y a<<b a>>>b a&b a|b a^b Result x=5 x=15 x=50 x=2 x=0

Conditional Statements if statements if (condition) { // statements if condition is TRUE } if (condition) { //statements if condition is TRUE; } else { //statements if condition is FALSE; } if (condition) { //Statements if condition is TRUE; } else { //Statements if no prior condition is true; }

switch (expression or variable case label: //statements if expression break; default: //statements if expression break; } name) { matches this label; does not match any label;

var color. Choice ="紅"; switch (color. Choice) { case "紅": document. bg. Color="red"; break; case "綠": document. bg. Color="green"; break; default: document. bg. Color="white"; break; }

Loop Statement for statement for (intialize; conditional test; increment/decrement) { //Statements to execute; } for (var i=1; i<10; i++) { document. write('<hr color="red" size="10" width="'+i*50 +'">'); }

while (condition) { // Statements; // Increment/decrement; } var i=1; var sqt=0; while (sqt<1000) { sqt = i*i; i++; }

do/while do { // Statements; // Increment/decrement; } while (condition) var i=1; var sqt; do { sqt = i*i; i++; } while (sqt<1000)

for/in for (variable in object) { //statements } for (var attr in document) { document. write(attr+" = "+document[attr]+" "); }

var arr 1 = new Array(); arr 1[0] = 2; arr 1[4] = "The 5 th element"; arr 1["暨大"]="www. ncnu. edu. tw"; arr 1["im"] = "www. im. ncnu. edu. tw"; for (var ind in arr 1) { document. write(ind+" => " +arr 1[ind] +" "); } if(!arr 1[1]) { alert("index 1不存在!"); }

with ( object ) { //statements } function click() { alert("click event!"); } with (document) { bg. Color ="#ccffcc"; onclick = click; alert(location); }

break & continue var i=1; var sq; while (i < 1000) { sq = i*i; if (i*i == 267289) break; i++; } alert (i+"*"+i+" = 267289"); var i=1; for (i=1; i <= 100; i++) { document. write(i+"*"+i+" = "+ i*i+" "); if ((i%10) !=0) continue; document. write("<hr>"); }

function name (arg 1, arg 2, …) { // statements // return something, if any }

function hr() { document. write('<hr size="5" color="green" width="90%">'); } function hr 1(hr. Size, hr. Color, hr. Width) { document. write('<hr size="'+hr. Size+'" color="'+hr. Color +'" width="'+hr. Width+'">'); } hr(); hr 1("10", "red", "800"); hr 1("20", "green", "75%");

function get. H 1() { var h 1; h 1 = document. get. Elements. By. Tag. Name("h 1"); return h 1[0]. inner. HTML; } function show. H 1() { alert(get. H 1()); } <body onload="show. H 1()"> <h 1>Java. Script function - Example 2</h 1> … </body>

function arguments function sum( ) { var s=0; for (var i=0; i<arguments. length; i++) { s += arguments[i]; } return s; } var total 1 = sum(1, 100, 1000); var total 2 = sum(3, 300);

recursive function fb(i) { if (i==1) return 0; if (i==2) return 1; return fb(i-2)+fb(i-1); }

global vs. local variables var j, n, m, p; j = 1; n= 10; m=100; function test(i, j) { var m=1; j++; n=i+j+m; return n; } p = test(5, 50); document. write("j = " + j+" "); document. write("n = " + n+" "); document. write("m = " + m+" "); document. write("p = " + p+" "); j=1 n = 57 m = 100 p = 57

object var rgb = {r: "ff", g: "ff", b: "00"}; var employee = { "name" : "王小明", "age" : 12, "gender" : "m", is. Married : false} document. write(typeof(rgb)+" "); document. write(typeof(employee)+" "); document. bg. Color="#"+rgb. r+rgb. g+rgb. b; for (var attr in employee) { document. write(attr +" = "+ employee[attr]+" "); }

function as object function circle(r) { this. r = r; this. area = Math. PI*r*r; this. peri = 2*Math. PI*r; this. print=function () {document. write("radius = "+r+" "); } } var ball = new circle(10); document. write("Area: "+ball. area+" "); document. write("Perimeter: "+ball. peri+" "); ball. print();