Java Script基礎
技術標籤：javascriptjava
Java Script
概念
JavaScript（簡稱“JS”） 是一種具有函式優先的輕量級，解釋型或即時編譯型的程式語言，是動態型別、弱型別、基於原型繼承的語言，它的直譯器被稱為JavaScript引擎，作為瀏覽器的一部分，廣泛用於客戶端的指令碼語言，用來給HTML網頁增加動態功能，作為開發Web頁面的指令碼語言。
Java Script組成
-
ECMAScript語法()
-
文件物件模型（DOM Document Object Model）()
-
瀏覽器物件模型(BOM Browser Object Model)()
Java Script基本語法
變數宣告
在JavaScript中，任何變數都用var關鍵字來宣告，var是variable的縮寫,var是宣告關鍵字，a是變數名，語句以分號結尾
var a = 1;
基本型別
變數的基本型別有Number、String、Boolean、Undefined、Null五種
1.宣告一個數字Number型別
var a=1;
2.宣告一個字串String型別
var a="1";
3.宣告一個布林Boolean型別
var a=false;
注意：在JavaScript中，當一個變數未被初始化的時候，它的值為undefined
引用型別
var student={id:1,name:"張三",age:18};
document.write(student.id);
document.write(student.name);
document.write(student.age);
陣列型別
var students = [
{id: 1,name: "張三",age: 18},
{id: 2,name: "李四",age: 18},
{id: 3,name: "王五",age: 19}
];
document.write 運算子
1.邏輯運算
&& ：與 要求表示式左右兩邊的表示式同為true，整體結果才為true
| | ：或 要求表示式左右兩邊的表示式只要有一個為true，整體結果就為true
！：非 將布林值取反操作
2.關係運算
等於 ==
小於 <
小於等於 <=
大於 >
大於或等於 >=
不等於 !=
值和型別相同 ===
var a=1;
var b=2;
a==a //true
a==b //false
a<b //false
a<=b //false
a>b //true
a>=b //true
a!=b //true
a===b //false
//===比較兩個引用，==比較兩個值，比較兩個值的時候，不考慮資料型別
//1=="1" //true
條件分支結構
if-else分支
var a=1;
var b=1;
if(a==b){
document.write("相等");
}else{
document.write("不相等");
}
switch分支
var a=2;
switch(a){
case 1:
document.write("值為1");
break;
case 2:
document.write("值為2");
break;
case 3:
document.write("值為3");
break;
default:
document.write("值不是3也不是2也不是1");
}
迴圈結構
for迴圈
求1~100的值
var a=0;
for(var i=1;i<=100;i++){
a+=i;
}
document.write(a);
while迴圈
求1~100的值
var a=0;
var i=1;
while(i<=100){
a+=i;
i++;
}
document.write(a);
do-while迴圈
求1~100的值
var a=0;
var i=1;
do{
a+=i;
i++;
}while(i<=100);
document.write(a);
函式
用function關鍵字來宣告，後面是方法名字，引數列表裡不寫var。整個方法不寫返回值型別
//關鍵字 方法名 引數
function functionName(parameters){
//執行的程式碼
}
常見彈窗函式
alert彈框：這是一個只能點選確定按鈕的彈窗
confirm彈框：這是一個你可以點選確定或者取消的彈窗
prompt彈框：這是一個你可以輸入文字內容的彈窗
事件
- onchange：HTML 元素內容改變
- onclick：使用者點選 HTML 元素
- onmouseover：使用者將滑鼠移入一個HTML元素中
- onmousemove：使用者在一個HTML元素上移動滑鼠
- onmouseout：使用者從一個HTML元素上移開滑鼠
- onkeyup：鍵盤
- onkeydown：使用者按下鍵盤按鍵
- onload：瀏覽器已完成頁面的載入
- onsubmit：表單提交
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function upColor(){
var div = document.getElementsByTagName("div")[0];
div.style.backgroundColor=Color();
}
function Color(){
var num1=Math.round(Math.random()*255);
var num2=Math.round(Math.random()*255);
var num3=Math.round(Math.random()*255);
return "rgb("+num1+","+num2+","+num3+")";
}
</script>
</head>
<body>
<div style="width: 500px; height: 500px; background-color: aqua;" onmousemove="upColor()" ></div>
</body>
</html>
案例效果
