JavaScript
- JavaScript是一門跨平台，面向對象的腳本語言，來控制網頁行為的，它能夠使網頁可交互。
- 基礎語法與java類似
-
JavaScript（簡稱：JS） 在 1995 年由 Brendan Eich 發明，並於 1997 年成為一部 ECMA 標准。
-
ECMAScript 6 (ES6) 是最新的 JavaScript 版本（發布於 2015 年)。
JavaScript引入方式
內部方式
- 在html文件中，使用<script>標簽來編寫js代碼。
- 建議編
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> </body> </html> <!-- 內部引入--> <script> alert("京阿"); </script>
寫在<body>元素底部，可以提高顯示速度，將javaScript寫在body中的最后，先加載html界面。
- 將js代碼編寫為一個后綴名為js的文件中。
- 在html文件中通過<script scr="js路徑"></script>引入文件
<script src="../js/alert.js"></script>
alert("真菜");
-
區分大小寫：與 Java 一樣，變量名、函數名以及其他一切東西都是區分大小寫的
-
每行結尾的分號可有可無、建議寫上
-
注釋
-
單行注釋：// 注釋的內容
-
多行注釋：/* 注釋的內容 */
-
-
一對大括號標識代碼塊
輸出語句
- windows.alert(): 寫入警告框
- document.write():寫入到html頁面
- console.log();在控制台輸出
<script> window.alert("hello js~"); //彈出警告框 document.write("<h4>四級標題</h4>"); //寫出html文檔 console.log("js log..."); //寫出日志到控制台 </script>
變量介紹
- JavaScript 中用var關鍵字(variable的縮寫)類聲明變量
- Java是一門弱類型語言，變量可以存放不同類型的值
JavaScript
var age=10； age="王王"
變量
弱類型語言，變量可以存放不同類型的值，其他與Java一樣
var
- 作用域：全局變量
let
- 作用域 let的關鍵字存在的代碼快內
- 不允許重復聲明
const
- 定義一個只讀的常量
數據類型
number :數字（整數，小數，NAN）
string：字符，字符串，單雙引皆可
boolean: 布爾。
null: 對象為空 對於null會返回object，null被認為是對象占位符
undefined:未定義
typeof: 獲取數據類型
運算符
類似於Java
==
- 1判斷類型是否一樣，不一樣進行類型轉換
- 再去比值
===全等於
- 不會進行類型轉換
類型轉換
其他類型轉化為bumber
1 string:按照字符轉的子面值，轉為數字，如果字面值不是數字，轉化為NAN
var str=+"adc";+號代表正數 parseInt()
2 boolean true 轉換為1 false 轉換為0
其他類型轉換為boolean（用於簡化健壯性判斷）
1 number 0和NAN轉換為0，其他數字為true
2 string 空字符串為false
3 null 為false
4 undefined為false0
流程控制語句
和Java一樣
函數
通過function關鍵詞進行定義，兩種語法為
- function functionName（參數1，參數 2...）{
要執行的代碼
//不需要寫返回值，形參不需要類型
//有返回值直接return
}
- var functionName=function（參數1，參數2）
{
要執行代碼
}
- 傳遞參數的時候傳幾個都能運行，但是沒太意義
JavaScript對象
Array
var 變量名 = new Array(元素列表);
-
格式二
var 變量名 = [元素列表];
方法 put（E...e） splice 參考手冊w3c
String
var 變量名 = new String(s);
-
格式二
var 變量名 = s; // 單引、雙引都可以
trim() 去除空格
自定義對象
var 對象名稱 = {
屬性名稱1:屬性值1,
屬性名稱2:屬性值2,
...
函數名稱:function (形參列表){}
...
};
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定義對象</title>
</head>
<body>
</body>
</html>
<script>
var person = {
name : "百麗",
age : 26,
eat:function () {
alert("上班干活...");
}
};
alert(person.name);
alert(person.age);
person.age = 38;
alert(person.age);
person.eat();
</script>
Window對象
-
Browser Object Model 瀏覽器對象模型
-
JavaScript 將瀏覽器的各個組成部分封裝為對象
-
Window：瀏覽器窗口對象
-
Navigator：瀏覽器對象 (了解)
-
Screen：屏幕對象 (了解)
-
History：歷史記錄對象
-
Location：地址欄對象
-
2.Window窗口對象
-
-
屬性：獲取其他 BOM對象
- 方法
-
Document Object Model 文檔對象模型
-
將標記語言的各個組成部分封裝為對象
-
Document：整個文檔對象
-
Element：元素對象
-
Attribute：屬性對象
-
Text：文本對象
-
Comment：注釋對象
-
-
JavaScript 通過 DOM， 就能夠對 HTML進行操作了
-
改變 HTML 元素的內容
-
改變 HTML 元素的樣式（CSS）
-
對 HTML DOM 事件作出反應
-
添加和刪除 HTML 元素
-
-
getElementById(id值)：根據id屬性值獲取，返回一個Element對象
-
getElementsByTagName(標簽名)：根據標簽名稱獲取，返回Element對象數組
-
getElementsByName(name值)：根據name屬性值獲取，返回Element對象數組
-
getElementsByClassName(class值)：根據class屬性值獲取，返回Element對象數組
事件監聽
-
-
事件監聽：JavaScript 可以在事件被偵測到時執行對應的代碼。
事件綁定
方式一：通過 HTML標簽中的事件屬性進行綁定
<input type="button" onclick='on()’>
function on(){
alert("我被點了");
}
方式二：通過 DOM 元素屬性綁定
<input type="button" id="btn"> document.getElementById("btn").onclick = function (){ alert("我被點了"); }
常見事件
正則表達式
定義了字符串組成規則
-
-
直接賦值
var reg = /^\w{6,12}$/;-
創建對象
var reg = new RegExp("^\\w{6,12}$"); -
-
成員方法
test(str)：用於判斷是否滿足指定的規則。滿足為true、不滿足為false。
