第一章基礎語法 · javascript

javascript的使用 ``` <body>   <script language="JavaScript"> //1. 獲得當前系統時間 var a = new Date(); //類型推導 //2. 判斷小時<12, 上午, 否則下午 var hour = a.getHours(); if(hour <12) { document.write("上午好"); document.write("<br/>"); } else { document.write("下午好"); document.write("<br/>"); } </script> hello china <script language="JavaScript"> document.write("hello you"); </script> </body> ``` javascript變量和數據類型 ``` <script> //變量的數據類型 //js 跟 java 比, 弱類型的語言 //Number(整數,小數), String(''或""定界都可以), 布而類型(true,false),未定義(undefined),空類型(null) var a = 2; //Number var b = 2.5; //Number var c = "h"; //String var d = "hello" //String var e = 'hello world' //String var f = true; //boolean var g = false; //boolean var i; var j = null; //數組,對象類型 var x = [1,2,3,4]; //object var y = new Date(); //object //函數類型 var z = function(){alert("hello")}; //function //調用函數 z(); //typeof函數用來判斷變量的數據類型 document.write(typeof(a)+"<br/>"); document.write(typeof(b)+"<br/>"); document.write(typeof(c)+"<br/>"); document.write(typeof(d)+"<br/>"); document.write(typeof(e)+"<br/>"); document.write(typeof(f)+"<br/>"); document.write(typeof(g)+"<br/>"); document.write(typeof(i)+"<br/>"); document.write(typeof(j)+"<br/>"); document.write(typeof(x)+"<br/>"); document.write(typeof(y)+"<br/>"); document.write(typeof(z)+"<br/>"); </script> ``` 表達式和控制流程 ``` <script> //表達式 a+b //運算符 // 算術運算符 + - * / % ++ -- - var a = 5; var b = 2; var c = a/b; //2.5 // 賦值運算符 = += -= *= /= a+=b; // 比較運算符 == >= <= > < != // 邏輯運算符 && || ! //控制流程 // 順序執行分支(if if else, if elseif else, switch case), 循環(for while, do-while) //在頁面上輸出九九乘法表 for(var i=1; i<=9; i++) { for(var j=1; j<=i;j++) { document.writeln(i+"*"+j+"="+i*j+"  "); } //打印換行 document.write("<br/>"); } //打印8*8的# -方法1 for(var i=0; i<8;i++) { for(var j=0; j<8;j++) { document.write("#"); } //打印換行 document.write("<br/>"); } //打印8*8的# -方法2 for(var i=1; i<=64;i++) { document.write("#"); if(i%8==0) { //打印換行 document.write("<br/>"); } } </script> ``` 函數: ``` <script> //函數的定義 // 函數沒有返回值聲明; // 函數入參, 不能有var //沒有入參,沒有返回值 function jiujiu() { //在頁面上輸出九九乘法表 for(var i=1; i<=9; i++) { for(var j=1; j<=i;j++) { document.writeln(i+"*"+j+"="+i*j+"  "); } //打印換行 document.write("<br/>"); } } //有入參,沒有返回值 //在js里沒有函數重載的概念 function max(a, b) { console.log(a>b?a:b); return; } //有入參,有返回值的 function sum(a, b) { return a+b; } </script> ``` 自運行函數(三種寫法) ``` //自運行函數 //1. 匿名 //2. 聲明以后立即運行 (function(){ //在頁面上輸出九九乘法表 for(var i=1; i<=9; i++) { for(var j=1; j<=i;j++) { document.writeln(i+"*"+j+"="+i*j+"  "); } //打印換行 document.write("<br/>"); } })(); (function(){ //在頁面上輸出九九乘法表 for(var i=1; i<=9; i++) { for(var j=1; j<=i;j++) { document.writeln(i+"*"+j+"="+i*j+"  "); } //打印換行 document.write("<br/>"); } }()); !function(){ //在頁面上輸出九九乘法表 for(var i=1; i<=9; i++) { for(var j=1; j<=i;j++) { document.writeln(i+"*"+j+"="+i*j+"  "); } //打印換行 document.write("<br/>"); } }(); ``` 回調函數(入參里的函數-> 回調函數 ) ``` function yea() { console.log("oh yea!"); } function jiujiu(fun) { //在頁面上輸出九九乘法表 for(var i=1; i<=9; i++) { for(var j=1; j<=i;j++) { document.writeln(i+"*"+j+"="+i*j+"  "); } //打印換行 document.write("<br/>"); } //調用傳入的函數 fun(); } //注意,傳入的是函數名,不能有""定界符 jiujiu(yea); ``` 常用系統函數(parseInt, parseFloat, Number, isNaN, eval): ``` <script> //1. parseInt 字符串 -> 整數 //2. parseFloat 字符串 -> 小數 //3. Number("2")-> 2, Number("2.2") ->2.2 Number("2a") -> NaN //4. eval(str) -> 把入參字符串當成表達式運算. //5. isNaN() -> 判斷入參是不是NaN //所有從頁面上收集上來的數都是字符串 function calculate() { //1. 得到第一個數 var num1 = document.getElementById("num1").value; //2. 得到第二個數 var num2 = document.getElementById("num2").value; //2.5 判斷輸入的合法性 if(isNaN(Number(num1))) { //輸入非法; alert("輸入非法"); return; } if(isNaN(Number(num2))) { //輸入非法; alert("輸入非法"); return; } //3. 求和 var operator = document.getElementById("operator").value; /*var sum =0; switch(operator) { case "+": sum = Number(num1) + Number(num2); break; case "-": sum = Number(num1) - Number(num2); break; case "*": sum = Number(num1) * Number(num2); break; case "/": sum = Number(num1) / Number(num2); break; }*/ var sum = eval(num1 + operator + num2); //4. 把和放在第三個文本框里 document.getElementById("sum").value = sum; } </script> </head> <body> <input id="num1" type="text"> <select id="operator"> <option>+</option> <option>-</option> <option>*</option> <option>/</option> </select> <input id="num2" type="text"> = <input id="sum" type="text"> <button onclick="calculate();">求和</button> </body> ``` 常用系統函數(setTimeout, clearTimeout, setInterval, clearInterval): ``` <body> <span id="now"></span> <script> //setTimeout() -> 延時一段時間再執行 //setInterval() -> 每個一段時間執行 //在頁面上輸出當前系統時間. //js es5 -> ecmascript5 es6, es7 //js es5 變量的作用域分為2種,一種是函數級(var),一種是全局(不寫var). //es6 let聲明變量塊級作用域 var taskid; function showDate() { document.getElementById("now").innerHTML = new Date(); taskid = setTimeout(showDate,1000); } //1. 入參1 函數名, 入參2 毫秒數 //setTimeout("showDate()",1000); //setTimeout(showDate,1000); /*setTimeout(function(){ document.write(new Date()); },1000);*/ //在頁面上實時顯示系統時間 showDate(); function stoptime() { clearTimeout(taskid); } //var 定義的變量是函數級別的. function test() { a = 10; if(true) { var b = 20; } console.log(b); } </script> <script> test(); console.log(a); </script> <button onclick="stoptime()">讓時光停止吧</button> </body> ``` ``` <body> <span id="now"></span> <button onclick="stoptime()">讓時光停止吧</button> <button onclick="starttime()">走你</button> <script> var taskid; function showDate() { document.getElementById("now").innerHTML = new Date(); } function starttime() { showDate(); //初始執行也有延遲 taskid = setInterval(showDate,1000); } starttime(); function stoptime() { clearInterval(taskid); } </script> </body> ```