JavaScript學習記錄

時間  2021-08-13
標籤 javascript css html java 正則表達式 api 數組 瀏覽器 app dom 欄目 JavaScript 简体版
原文   原文鏈接

JavaScript

客戶端腳本語言
JavaScript = ECMAScript + BOM + DOMjavascript

ECMAScript

  • 客戶端腳本語言的標準

與html結合方式

  1. 內部定義css

    • 使用script標籤

  2. 外部定義html

    • 經過src屬性引入外部js文件

  3. 示例java

<!DOCTYPE html>
<html lang="en">
<!-- script可在任意地方寫，可是script在head中則先執行，
在body中則head執行完才執行 -->

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
	<!-- 內部方式 -->
    <script>
        alert("hello world");
        //註釋
    </script>
    
    <script src="js_0.js"></script><!-- 外部方式-->
</body>

</html>

註釋

  1. 單行註釋：//
  2. 多行/**/

數據類型

  1. 原始數據類型(基本數據類型)正則表達式

    • number:數字(整數，小數，NaN)（NaN 不是一個數字的數字類型）
    • string:字符串
    • boolean
    • null 空的佔位符
    • undefined：未定義。若是一個變量沒有給初始化值，則會默認賦值爲undefined

  2. 引用數據類型：對象api

變量

js爲弱類型語言：在開闢變量存儲空間時不定義空間未來存儲數據類型
var 變量名 = 初始化值;數組

<script>
        // var a = 3
        // alert(a);
        // a = "abb";
        // alert(a);
        //alter是輸出一個彈框
        var num0 = 1;
        var num1 = 1.1;
        var num2 = NaN;
        //document.write()爲輸出語句
        document.write(num0 + "</br>");
        document.write(num1 + "</br>");
        document.write(num2 + "</br>");
</script>

運算符

  1. 一元運算符：只有一個運算數的運算符 ++ --
  2. 算數運算符
  3. 賦值運算符 = += -=
  4. 比較運算符 ===(全等於)
  5. 邏輯運算符 && || ！
  6. 三元運算符 ？：判斷表達式的值，真爲1，假爲2
  7. 注意：類型不一樣時作運算，會先進行類型轉換

特殊語法

  1. 使用var關鍵字定義的變量是局部變量，不用的話是全局變量（不經常使用）

流程控制語句

  • 同Java
  • switch中的case判斷能夠是不一樣的類型的判斷條件

案例

//js_1.js
var num = 1;
var count = 1;
// document.write("<table border = '1' align = 'center'>");
document.write("<table align = 'center'>");
for (num = 1; num <= 9; num++) {
    document.write("<tr>");
    for (count = 1; count <= num; count++) {
        document.write("<td>");
        document.write(num + "*" + count + "=" + num * count + "   ");
        document.write("</td>");
    }
    // document.write("<br>")
    document.write("</tr>")
}
<!DOCTYPE html>
<html lang="en">
<style>
    td {
        border: 1px solid;//css寫邊框
    }
</style>

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
    <script src="js_1.js"></script>
</body>
</html>

對象

Fuction

  1. 函數(方法)對象
  2. 建立
//法一
var fun = new Fuction(形參列表，方法體);
//不經常使用
//法二
function 方法名稱(形參){
	方法體;
}
//法三
var 方法名 = function(形參){
	方法體;
}

  1. 方法瀏覽器

  2. 屬性app

    • length：形參個數

  3. 特色dom

    • 方法定義時形參的類型不用寫，返回值不需在方法定義中設置返回類型
    • 方法是一個對象，若是名稱相同，則會覆蓋
    • js中，方法的調用只與方法的名稱有關，和參數列表無關
    • 在方法聲明中有一個隱藏的內置對象(數組),arguments封裝全部實際參數

  4. 示例

function count(a, b) {
    alert(a + b);
}
// count(1, 2);

var count1 = function (a, b) {
    alert(a + b);
}
// count(2, 3);

function add() {
    var sum = 0;
    for (var i = 0; i < arguments.length; i++) {//這裏arguments.length則爲傳入形參個數
        // document.write(arguments[i]);
        sum += arguments[i];
    }
    return sum;
}
var m = add(1, 2, 3, 4, 5, 6);
// document.write(m);
alert(m);
// add(1, 2, 3, 4, 5);

array

  1. 建立
//法一
var arr = new Array(元素列表);
//法二
var arr = new Array(默認長度)
//法三
var arr = [元素列表]

  1. 方法

    • join(參數)：將數組中的元素按指定分割符拼接成字符串，默認逗號
    • push(參數)：添加參數在末尾

  2. 屬性

    • length表示數組的長度

  3. 特色

    • 數組中元素類型可變
    • 數組長度可變

  4. 示例

var arr1 = new Array(1, 2, 3);
document.write(arr1 + "<br>");

var arr2 = new Array(2);
arr2[1] = 12;
document.write(arr2 + "<br>");

// var arr3 = new Array[1, 2, 3, 4];
// document.write(arr3 + "<br>");

var arr4 = ["asd", 1, true];//類型可變，可是注意是中括號
document.write(arr4[1] + "<br>");
document.write(arr4 + "<br>");//默認輸出爲一個字符串，都拼接在一塊兒
document.write(arr4.join("-") + "<br>")
arr4.push("mt");
document.write(arr4.join("-") + "<br>")
//輸出結果：
/**1,2,3
  *,12
  *1
  *asd,1,true
  *asd-1-true
  *asd-1-true-mt */

Date

  • 日期類
  1. 建立
var date = new Date();
  1. 方法
    • tolocaleString()：返回日期本地形式的字符串
    • getTime()：返回當前毫秒值

Math

  • 數學對象
  1. 建立
    • Math對象不用建立，直接使用
  2. 方法
    • random() 返回介於0和1之間一個數，含0不含1
    • round(數) 約數
    • ceil(數) 向上舍入
    • floor(數) 向下舍入

RegExp

  • 正則表達式對象

  • 正則表達式：定義字符串的組成原則

    1. 單個字符 [] 如 [a]

      • \d:單個數字字符
      • \w：單個單詞字符

    2. 量詞符號

      • ? 表示出現0次或1次
      • * 出現0次或屢次
      • + 出現1次或屢次
      • {m,n} m<= 數量 <=n,若m或n沒有則表示最少或最多

  • 正則對象

    1. 建立
var reg = new RegExp("正則表達式");
    var reg = /正則表達式/;
  1. 示例
var reg = new RegExp("^\\w{6,12}$");
// 這裏前面的\表示轉義,^和$表示開始和結尾
var reg1 = /^\w{6,12}$/;
// 這種經常使用
alert(reg);
alert(reg1);

var uname = "asdfghjkl";
var flag = reg.test(uname);
// test函數檢測字符串是否符合要求
document.write(flag);

Global

  • 全局對象，裏面的方法不須要對象能夠直接調用

  • 方法

    • encodeURI() url編碼
    • decodeURL() url解碼
    • encodeURIComponent() 編碼
    • dencodeURIComponent() 解碼
    • parseInt() 將括號中內容轉成數字，逐一判斷數字直至非數字
    • isNaN() 判斷一個值是否爲NaN
    • eval() 將js字符串轉成腳原本執行

  • 示例

var uname = "江蘇";
var en = encodeURI(uname);
document.write(en + "<br>");
var den = decodeURI(en);
document.write(den + "<br>");

var n = "123abd";
var num = parseInt(n);
document.write(num + "<br>");
//123

var n1 = "n123abd";
var num1 = parseInt(n1);
document.write(num1 + "<br>");
//NaN

var code = "alert(\"victory\")";
document.write(code);
eval(code);

BOM

  • 瀏覽器對象模型，將瀏覽器各個組成部分封裝成對象

  • 組成

    • window：窗口對象
    • Navigator：瀏覽器對象
    • Screen：顯示器屏幕對象
    • History：歷史記錄對象
    • Location：地址欄對象

window對象

  • 建立

  • 方法

    • alert() 顯示帶有信息的警告框，只有肯定按鈕
    • confirm() 確認對話框，有肯定和取消按鈕，會返回true和false
    • prompt() 顯示可提示用戶輸入的對話框，會返回用戶輸入的值
    • 開關瀏覽器
      • open() 打開一個新界面。也能夠用一個var獲得界面的對象，便於下面對其的控制關閉
      • clode() 關閉瀏覽器窗口，誰調用關閉誰
    • 定時器有關的方法
      • setTimeout(方法,毫秒值)：指定毫秒後執行代碼
      • setInterval(方法,毫秒值)：循環定時，每過毫秒執行一次。有返回值，用於取消定時
      • clearTimeout(對象)：取消定時，將setInterval獲得一個對象放進來便可

  • 屬性

    • 獲取其餘dom對象

  • 特色

    • 不須要建立，直接使用，window.方法名
    • 其引用可省略

  • 示例

  1. 開關瀏覽器
//開關瀏覽器
var k;
var f = document.getElementById("bt");
f.onclick = function () {
	k = open("www.baidu.com");
}

var m = document.getElementById("close");
m.onclick = function () {
	k.close();//誰調用關閉誰
}
  1. 輪播圖
var m = 1;
var p = document.getElementById("pic");
var lunbo = function(){//假定有三張圖片
	m++;
	if(m>3){
		m = 1;
	}
	p.src = "../img/banner_"+m+".jpg";
	
}
setInterval(lunbo,2000);//無參方法不能夠帶括號！！！

Location對象

  • 地址欄對象
  • 建立：location
  • location.href("網址") 能夠跳轉界面
  • 案例：跳轉首頁
var t = 5;
var time = document.getElementById("time");
function jump(){
	t--;
	time.innerHTML = t+"";
	if(t==0){
		location.href = "http://www.baidu.com";
	}
}
setInterval(jump,1000);

History對象

history表示的是當前窗口開過的頁面，而不是瀏覽器的歷史記錄

  • 建立

    • window.history
    • history

  • 方法

    • back() 加載當前窗口中前一個url
    • forward() 加載當前窗口中下一個url
    • go(參數) 加載history列表中某個具體頁面
      • 正數 前進幾個歷史目錄
      • 負數 後退幾個歷史目錄

  • 屬性

    • length 返回當前窗口歷史列表中的url數量

DOM

簡單介紹

  • 控制html文檔內容
  • 獲取元素對象 document.getElementById("id")，看api手冊看屬性修改
  • 修改標籤體內容：innerHTML
var h = document.getElementById("title");
h.innerHTML = "hhhh";

  • 事件

    • 某些組件被執行了某些操做後，觸發某些代碼的執行
    • 綁定事件
      • onclick屬性，點擊後觸發。onclick後面至關於寫了一條js代碼，能夠建一個js方法調用
      • js獲取元素對象，設定事件屬性(經常使用，好維護)

  • 開關燈案例

var i = document.getElementById("pic");
var flag = false;
i.onclick = function(){
	if(flag){
		i.src = "../img/off.gif";
		flag = false;
	}else{
		i.src = "../img/on.gif";
		flag = true;
	}
}
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<img id= "pic" src="../img/off.gif">
		<script src = "./開關燈.js"></script>
	</body>
</html>

DOM

核心DOM

  • Document：文檔對象

    1. 建立(獲取)：在html dom模型中可使用window對象來獲取
    2. window.document
    3. document
    • 方法：

      • 獲取Element對象：

        1. getElementById() ： 根據id屬性值獲取元素對象。id屬性值通常惟一
        2. getElementsByTagName()：根據元素名稱獲取元素對象們。返回值是一個數組
        3. getElementsByClassName():根據Class屬性值獲取元素對象們。返回值是一個數組
        4. getElementsByName(): 根據name屬性值獲取元素對象們。返回值是一個數組

      • 建立其餘DOM對象：

        1. createAttribute(name)
        2. createComment()
        3. createElement()
        4. createTextNode()

  • Attribute:屬性對象

    1. setAttribute() 設置屬性
    2. removeAttribute() 刪除屬性
    • 案例
var b1 = document.getElementById("button1");
var b2 = document.getElementById("button2");
// var s = document.getElementById("jump");
var s = document.getElementsByTagName("a")[0];
//使用標籤名得到，由於返回的是數組，因此用的是第一個元素
//超連接只可在a標籤中用，如果p標籤則沒有用
button1.onclick = function(){
	
	s.setAttribute("href","https://www.baidu.com");
}
button2.onclick = function(){
	
	s.removeAttribute("href");
}
  • Node：節點對象其餘5個的父對象
    • 特色：全部dom對象均可以被認爲是一個節點
    • 方法：
      1. appendChild()：向節點的子節點列表的結尾添加新的子節點。
      2. removeChild()：刪除（並返回）當前節點的指定子節點。
      3. replaceChild()：用新節點替換一個子節點。
    • 屬性：
      • parentNode 返回節點的父節點。
    • 案例
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				border: 1px solid red;//對div邊框作設置
			}
			#div1{
				width: 200px;
				height: 200px;
			}
			#div2{
				width: 100px;
				height: 100px;
			}
			#div3{
				width: 50px;
				height: 50px;
			}
		</style>
	</head>
	<body>
		<!-- <img id= "pic" src="../img/banner_1.jpg" width="100%"> -->
		<!-- <a id = "jump">點擊跳躍</a> -->
		<!-- <input type="button" id = "button1" value="設置屬性">
		<input type="button" id = "button2" value="刪除屬性"> -->
		<div id = "div1">
			div1
			<div id = "div2">div2</div>
		</div>
		<!-- 當前div2是div1的子節點 -->
		<a id = "del" href = "javascript:void(0);">點擊刪除div2</a>
		<a id = "add" href = "javascript:void(0);">點擊添加div3</a>
		<!-- 這裏的a標籤因爲href沒寫，默認是當前頁面，因此點擊後頁
		面沒有變化，若是用button則功能正常 -->
		<!-- 須要在href中寫"javascript:void(0);"纔可保留其可點擊
		的屬性，但不進行超連接的跳轉 -->
		<!-- <script src = "./增刪節點.js"></script> -->
		<script>
		var del = document.getElementById("del");
		del.onclick = function(){
			var div1 = document.getElementById("div1");
			var div2 = document.getElementById("div2");
			div1.removeChild(div2);
		}
		var add = document.getElementById("add");
		add.onclick = function(){
			var div1 = document.getElementById("div1");
			var div3 = document.createElement("div");
			div3.setAttribute("id","div3");
			div1.appendChild(div3);
		}
		</script>
	</body>
</html>

HTML DOM

  • 標籤體的設置和獲取：innerHTML
var div = document.getElementById("div1");
var innerhtml = div.innerHTML;
div.innerHTML = "<input type = 'button'>";
//這裏的innerHTML即爲標籤體，能夠直接修改它，也能夠用+=添加東西
  • 控制元素樣式
    • style屬性設置
    • 提早定義類選擇器的樣式，經過元素classname來控制。在css中寫
var div = document.getElementById("div1");
div.onclivk = function(){
	div.style.border = "1px solid red";
}
div.onclivk = function(){
	div.className = "d1";//d1爲一個css樣式
}

事件監聽機制

  • 某些組件被執行了某些操做後，觸發某些代碼的執行
  • 常見的事件：

    • 點擊事件：

      1. onclick：單擊事件
      2. ondblclick：雙擊事件

    • 焦點事件

      1. onblur：失去焦點
      2. onfocus:元素得到焦點。

    • 加載事件：

      1. onload：一張頁面或一幅圖像完成加載。

    • 鼠標事件：

      1. onmousedown 鼠標按鈕被按下。
      2. onmouseup 鼠標按鍵被鬆開。
      3. onmousemove 鼠標被移動。
      4. onmouseover 鼠標移到某元素之上。
      5. onmouseout 鼠標從某元素移開。

    • 鍵盤事件：

      1. onkeydown 某個鍵盤按鍵被按下。
      2. onkeyup 某個鍵盤按鍵被鬆開。
      3. onkeypress 某個鍵盤按鍵被按下並鬆開。

    • 選擇和改變

      1. onchange 域的內容被改變。
      2. onselect 文本被選中。

    • 表單事件：

      1. onsubmit 確認按鈕被點擊。
      • 返回false不提交，true提交
      1. onreset 重置按鈕被點擊。
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程