目錄
Web前端有三層
-
HTML: 從語義的角度, 描述頁面結構.
-
CSS: 從審美的角度, 描述樣式(美化頁面).
-
JavaScript: 從交互的角度, 描述行為(提升用戶體驗).
JavaScript的組成
JavaScript基礎分為三個部分:
-
ECMAScript: JavaScript的語法標准. 包括變量, 表達式, 運算符, 函數, if語句, for語句等.
-
DOM: 文檔對象模型. 操作網頁上的元素的API. 比如讓盒子移動, 變色, 輪播圖等.
-
BOM: 瀏覽器對象模型. 操作瀏覽器部分功能的API. 比如讓瀏覽器自動滾動.
PS: API指應用程序編程接口.
JavaScript的特點
- 簡單易用
- 解釋型語言: 邊解釋邊執行.
- 基於對象: 內置大量現成的對象, 編寫少量程序即可完成目標.
JS在網頁中輸出信息的寫法
- 彈出警告框:
alert("") - 控制台輸出:
console.log("")
JS在網頁中用戶輸入的寫法
prompt()語句: prompt()用於彈出"能讓用戶輸入的對話框".
<script type="text/javascript">
var a = prompt("今天是什么天氣?");
console.log(a);
</script>
直接量
直接量又稱"字面量", 它是常量.分為兩種: 數字, 字符串
變量
變量三要素:
-
用於聲明變量的關鍵字. 比如:
var(聲明全局變量),let(聲明局部變量) -
變量的賦值. 把等號左邊的值賦給右邊的變量名.
-
變量名. 變量名遵循命名規范. 在命名規范內可以隨意取名.
變量類型: 數值型(number), 字符串類型(string).
記住兩個內置函數:
typeof(): 獲取變量的類型parseInt(): 將字符串轉換為數字
數據類型
數據類型包括:
- 基本數據類型.
number,string,boolean(布爾值),null(空對象),undefined(未定義對象) - 引用數據類型.
Function,Object,Array,String,Date
運算符
運算符分類: 賦值運算符, 算數運算符, 比較運算符
- 賦值運算符
以var x=12, y=5來演示示例:
- 算數運算符
以var a=5, b=2來演示示例:
- 比較運算符
以var x=5來演示示例:
數據類型轉換
-
數值類型 ==> 字符串類型
- 隱式轉換
var n1 = 123; var n2 = '123'; var n3 = n1+n2; // 隱式轉換 console.log(typeof n3);- 強制類型轉換:
String(),toString()
// 強制類型轉換String(),toString() var str1 = String(n1); console.log(typeof str1); var num = 234; console.log(num.toString()) -
字符串類型 ==> 數值類型
var stringNum = '789.123wadjhkd';
var num2 = Number(stringNum);
console.log(num2)
// parseInt()可以解析一個字符串 並且返回一個整數
console.log(parseInt(stringNum))
console.log(parseFloat(stringNum));
- 任何數據類型都可以轉換為
boolean類型
var b1 = '123';
var b2 = 0;
var b3 = -123
var b4 = Infinity;
var b5 = NaN;
var b6; //undefined
var b7 = null;
// 非0既真
console.log(Boolean(b7))
流程控制
-
if,if-else,if-else if-else -
邏輯"與(
&&)", 邏輯"或(||)" -
switch. 注意break穿透 -
while循環
-
do-while語句
-
for循環
[參考資料]https://www.cnblogs.com/majj/p/9095485.html
常用內置函對象
- 數組Array
- 字符串String
- 日期對象Date
- 內置對象Math
- 函數Function
- 偽數組arguments
[參考資料1]https://www.cnblogs.com/majj/p/9095590.html
[參考資料2]http://www.runoob.com/jsref/jsref-tutorial.html
函數
-
函數的作用:
- 將大量重復的語句寫在函數里, 以后需要這些語句的時候, 可以直接調用, 避免重復勞動.
- 簡化編程, 讓編程模塊化.
-
函數的定義
-
函數的調用
-
函數的參數: 形參和實參
-
函數的返回值
[參考資料]https://www.cnblogs.com/majj/p/9102247.html
偽數組arguments
-
arguments代表的是實參. arguments只在函數中使用.
-
返回實參的個數:
arguments.length -
之所以說arguments是偽數組, 是因為: arguments可以修改元素, 但不能改變數組的長度.
[參考資料]https://www.cnblogs.com/majj/p/9102342.html
關於DOM的事件操作
-
事件: JS是以事件驅動為核心的一門語言.
-
事件三要素:
- 事件源: 引發后續事件的html標簽.
- 事件: js中已經封裝了許多事件.
- 事件驅動程序: DOM操作, 即對元素的具體操作, 如樣式,動作等.
-
DOM操作步驟:
- 獲取事件源: 定位到具體某個元素(標簽)上.
- 綁定事件: 用戶對頁面進行某種操作(如:單擊,鼠標移入等), 這種操作就可以看作是一個事件. 綁定事件意味着把"用戶操作"與"具體元素"聯系到一起, 即用戶對"某個元素(事件源)"進行了"某種操作(事件)".
- 編寫事件驅動程序: 事件驅動程序是"某種操作"結束后會發生的事情.
<body>
<div id="box1"></div>
<script type="text/javascript">
//1. 獲取事件源
var div = document.getElementById("box1");
//2. 綁定事件
div.onclick = function(){
//3. 編寫事件驅動程序
alert("這里是事件驅動程序")
}
</script>
</body>
- 常見事件如下:
DOM操作中"事件三要素詳述"
獲取事件源的常見方式:
- 通過
id獲取單個標簽
<body>
<div id="box1"></div>
<script type="text/javascript">
//通過"id"獲取"單個標簽"
var div1 = document.getElementById("box1");
</script>
</body>
- 通過
標簽名獲取標簽數組
<body>
<div></div>
<script type="text/javascript">
//通過"標簽名"獲取"標簽數組"
var arr1 = document.getElementByTagName("div");
</script>
</body>
- 通過
類名獲取標簽數組
<body>
<div class="top"></div>
<script type="text/javascript">
//通過"類名"獲取"標簽數組"
var arr2 = document.getElementByClassName("top");
</script>
</body>
綁定事件的方式:
- 直接綁定匿名函數.
<div id="box1"></div>
<script type="text/javascript">
var div1 = getElementById("box1");
//綁定匿名函數
div1.onclick = function(){
alert("這里是事件驅動程序");
}
</script>
- 先單獨定義函數, 再對其進行綁定.
<div id="box1"></div>
<script type="text/javascript">
var div1 = getElementById("box1");
//綁定事件
div.onclick = fn; //綁定的是函數名fn,沒有小括號!
//單獨定義函數
function fn(){
alert("這里是事件驅動程序");
}
</script>
- 通過"行內綁定"的方式.
<!--行內綁定-->
<div id="box1" onclick="fn()"></div>
<script type="text/javascript">
function fn(){
alert("這里是事件驅動程序");
}
</script>
事件驅動程序:
- 已知有一個盒子, 寬100px, 高100px, 背景色pink, 鼠標移動上去有小手. 現在, 我們的需求是: 當鼠標點擊這個盒子時, 原本的盒子變大了, 背景變紅了. 代碼如下:
<head>
<style>
#box{
width: 100px; //寬度: 100px
height: 100px; //高度: 100px
background-color: pink; //背景色: 粉色
cursor: pointer; //鼠標移入: 有小手
}
</style>
</head>
<body>
<div id="box"></div>
<script type="text/javascript">
//獲取事件源
var oDiv = document.getElementById("box");
//綁定事件
oDiv.onclick = function(){
//事件驅動程序
oDiv.style.width = "200px"; //屬性要寫引號
oDiv.style.height = "200px";
oDiv.style.backgroundColor = "red"; //使用駝峰體
}
</script>
</body>
[參考資料]https://www.cnblogs.com/majj/p/9102401.html
定時器
setTimeOut(): 在指定時間結束后只執行一次.
//定時器,異步運行
function hello(){
alert("hello");
};
//使用方法名字執行方法
var t1 = window.setTimeout(hello,1000);
var t2 = window.setTimeout("hello()",3000);//使用字符串執行方法
window.clearTimeout(t1);//去掉定時器
setInterval():以指定時間為周期進行循環執行.
//實時刷新 時間單位為毫秒
setInterval('refreshQuery()',8000);
//刷新查詢
function refreshQuery(){
console.log('每8秒調一次');
}
BOM介紹
BOM: Browser Object Model, 瀏覽器對象模型.
BOM結構圖:
從上圖可以看出:
- window對象是BOM的頂層(核心)對象, 所有對象都是通過它延伸出來的, 因此其他對象可以稱為是window的子對象.
- DOM是BOM的的一部分.
window對象:
- wondow對象是JavaScript中的頂級對象.
- 全局變量,自定義函數也是window對象的屬性和方法.
- 對window對象下的屬性和方法進行調用時, 可以省略window.
BOM的常見方法和內置對象
彈出系統對話框:
alert(); //不同瀏覽器中alert彈出框的外觀是不同的
confirm(); //缺點: 兼容不太好
prompt(); //不推薦使用
打開窗口, 關閉窗口:
window.open(url,target)
- 參數解釋:
url: 要打開的地址.target: 新窗口的地址. 可以是:_blank,_self,_parent父框架.
- 代碼示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--行間的js中的open() window不能省略-->
<button onclick="window.open('https://www.luffycity.com/')">路飛學城</button>
<button>打開百度</button>
<button onclick="window.close()">關閉</button>
<button>關閉</button>
</body>
<script type="text/javascript">
var oBtn = document.getElementsByTagName('button')[1];
var closeBtn = document.getElementsByTagName('button')[3];
oBtn.onclick = function(){
//open('https://www.baidu.com')
//打開空白頁面
open('about:blank',"_self")
}
closeBtn.onclick = function(){
if(confirm("是否關閉？")){
close();
}
}
</script>
</html>
location對象的屬性:
- href: 跳轉.
- hash: 返回url中
#后面的內容, 包含#. - host: 主機名, 包括端口.
- hostname: 主機名.
- pathname: url中的路徑部分.
- protocol: 協議 一般是http, https.
- search: 查詢字符串.
location.href屬性舉例:
- 舉例1: 點擊盒子時, 進行跳轉.
<body>
<div>smyhvae</div>
<script>
var div = document.getElementsByTagName("div")[0];
div.onclick = function () {
location.href = "http://www.baidu.com"; //點擊div時，跳轉到指定鏈接
//window.open("http://www.baidu.com","_blank"); //方式二
}
</script>
</body>
- 舉例2: 5秒后自動跳轉到百度.
<script>
setTimeout(function () {
location.href = "http://www.baidu.com";
}, 5000);
</script>
location對象的方法:
- location.reload(): 重新加載
setTimeout(function(){
//3秒之后讓網頁整個刷新
window.location.reload();
},3000)
navigator對象:
window.navigator 的一些屬性可以獲取客戶端的一些信息.
- userAgent：系統，瀏覽器
- platform：瀏覽器支持的系統，win/mac/linux
console.log(navigator.userAgent);
console.log(navigator.platform);
history對象:
- 后退：
history.back()history.go(-1)：0是刷新
- 前進：
history.forward()history.go(1)
client,offset,scroll系列
client系列:
clientTop: 內容到邊框頂部的距離, 即邊框的高度.clientLeft: 內容區域到邊框左部的區域, 即邊框的寬度.clientWidth: 內容區域+左右padding, 表示可視寬度.clientHeight: 內容區域+上下padding, 表示可視高度.
屏幕的可視區域:
<script type="text/javascript">
// 屏幕的可視區域
window.onload = function(){
// document.documentElement 獲取的是html標簽
console.log(document.documentElement.clientWidth);
console.log(document.documentElement.clientHeight);
// 窗口大小發生變化時，會調用此方法
window.onresize = function(){
console.log(document.documentElement.clientWidth);
console.log(document.documentElement.clientHeight);
}
}
</script>
offset系列:
offsetWidth: 占位寬=內容+padding+border.offsetHeight: 占位高.offsetTop: 如果盒子沒有設置定位,offsetTop表示到body頂部的距離; 如果盒子設置了定位, 那么offsetTop是以父輩為基准的top值.offsetLeft: 如果盒子沒有設置定位,offsetLeft表示到body左部的距離; 如果盒子設置了定位, 那么offsetLeft是以父輩為基准的left值.
scorll系列:
scrollTopscrollLeftscrollWidthscrollHeight: 內容的高度+padding, 不包含邊框.