組成 作用:(運營在用戶端瀏覽器) 特征:面向對象 BOM: 瀏覽器對象模型 完成視窗與視窗之間的通信,window對象是其核心對象, history【前進,後退,刷新】 是一個對象 使用【window.history】 location【地址】 DOM【】 screen【屏幕】 frames[真窗 ...
ECMAscript 基礎語法
變數 數據類型 運算符 數組 函數 對象
BOM 瀏覽器對象模型
window對象(獲取瀏覽器寬高)
history對象
location對象
DOM 文檔對象模型 輪播圖
元素獲取 操作屬性 操作樣式 節點 事件 時間對象
作用:(運營在用戶端瀏覽器)
1. 數據驗證
2. 動態創建和刪除元素
3. 操作元素的內容和樣式
4. 模擬動畫
5. 創建cookie
6. ajax 請求數據
。。。。。。
7. JSON格式的數據處理 *
特征:面向對象
1. 基於[對象]和[事件驅動]的鬆散型 解釋型語言
2. 客戶端腳本語言,實現用戶交互
完成視窗與視窗之間的通信,window對象是其核心對象,
-
history【前進,後退,刷新】 是一個對象 使用【window.history】
-
location【地址】
-
DOM【】
-
screen【屏幕】
-
frames[真視窗]
-
navigation
window對象:
屬性
1-1:獲取瀏覽器寬高
a.ie8及以上
window.innerWidth [獲取瀏覽器寬度]
window.innerHeight [獲取瀏覽器高度]
b.ie8以下
document.documentElement.ClientWidth [寬度]
document.documentElement.ClientHeight 【高度】
1-2: 重新獲取瀏覽器寬高
window.onreset=function () {
NewW=window.innerWidth;
NewH=window.innerHeight;
}
1-3:重新設置瀏覽器大小
window.onresize=function(){
}
1-4:瀏覽器滾動事件
window.onscroll=function (){
}
2.瀏覽器左上角距離屏幕左上角的偏移量
window.screenTop [垂直偏移量]
window.screenLeft [水平偏移量]
註意:
因為window是核心,可以省略window不寫
方法
alert() 彈出框
prompt() 輸入框
confirm() 提示框,返回true或flase
close() 關閉頁面
open(“url”) 打開頁面(“打開的頁面的路徑【根據本html位置的相對路徑】”)
open("url","","width=300,height=200");
setInterval(fn,毫秒數):隔毫秒數重覆不斷的執行一個函數fn
方法1
let t =setInterval(fn,3000)
function fn(){
}
方法2
setInterval(function(){
},1000)
clearInterval(t):清除setInterval的時間函數
let t =setInterval(fn,3000)
function fn(){
}
clearInterval(t)
setTimeout(fn,1000) 隔一定的時間只執行一次函數
cleanTimeout(t) 清除時間函數 【用法同上】
獲取表單的值
對象.value=
清空=“”
history對象
屬性:
history.length 用來顯示歷史記錄的長度
方法
history.forward() 前進
history.back()後退
history.go(0) 刷新 【1 前進,-1後退;不常用】
location對象
屬性:設計獲取當前頁面的地址
location.href=“ ” 設置或獲取頁面地址 設置新值
location.host:主機名+埠號
location.hostname:主機名
location.port:埠號
location.protocol:協議
location.pathname: 路徑
location.search: ?後面的查詢【搜索】欄位
方法
location.reload( ) 重新載入
location.replace("網頁.html") 頁面替換,不會增加歷史記錄
location.assign(“網頁.html”) 頁面替換, 能夠增加歷史記錄
獲取元素
獲取body:document.body
獲取html:document.documentElement
1. 獲取id名的元素:
let 變數=document.getElementById("id名")
例子: let box=document.getElementById("id名")
2.獲取class名的元素[得到的是集合,可以通過鍵名訪問]
let 對象=document.getElementsByClassName(“class名”)
通過遍歷改變樣式
集合通過單個下表改變,不能全部用class名同時改變
3. 獲取標簽名的元素[得到的是集合,可以通過鍵名訪問]
let 對象=document.getElementsByTagName(“標簽名”)
4.給對象加類
標簽加1個類名
對象.className=“類名”
div加多個類名
對象.className=“類名1 類名2 ”
5.指定範圍的多層級獲取【集合】
<div class="box">
<div class="box1">
<div class="box2"></div>
</div>
</div>
多樓層獲取
let box=document.getElementClassName("box");
let box1=box.getElementClassName("box1");
let box2=box1.getElementClassName("box2")
6.獲取選擇器選中的元素
let liss=document.querySelector("【選擇器】"); 獲取選擇器選中的第一個元素
let lis=document.querySelectorAll("【選擇器】"); 獲取選擇器選中的全部元素【集合】【下標或者foreach遍歷】
7.屬性選擇器
<textarea name="con" id="text" cols="30" rows="10"></textarea>
let con = document.querySelector("[name=con]")
操作樣式
獲取樣式
獲取行內樣式
對象.style.樣式名
獲取通用的樣式【css和行內】
getComputedStyle(對象,null).樣式名
設置行內樣式
對象.style.樣式名=“樣式值”
對象.style=“background:red;border-radius:50%”
批量操作類名
對象.className="class類名"
對象.className=“ ”;
對象.classList.add(“”) 添加類
對象.classList.remove(“”) 刪除類
對象.classList.toggle(“”) 切換類
對象.id="id名"
外部定義一個樣式,加到對象身上,參考第四點
操作屬性
操作標準屬性
已知的,系統自帶
對象.屬性
例子 : img.src
自定義屬性
獲取
對象.getAttrbutte("name")
設置
對象.setAttrbutte("name","value")
操作內容
innerText:不能識別html的標簽對
innerHTML: 可以識別html的標簽對
對象.innerText=“內容”
對象.innerHTML=“內容”
添加事件
對象.對象事件=function(){
}
元素的尺寸和位置
對象.offsetWidth:獲取元素的真實寬度
對象.offsetHeight:獲取元素的真實高度
對象.offsetTop:對象的上邊框距離具有定位的父元素的內邊框的垂直距離
對象.offsetLeft:對象的左邊框距離具有定位的父元素的內邊框的水平距離
對象.scrollTop:有滾動條的元素,瀏覽器滾動時在垂直方向的拉動距離
body的相容
document.body.scrollTop || document.documentElement.scrollTop
對象.scrollLeft:有滾動條的元素,瀏覽器在滾動時在水平方向的拉動距離
動態創建標簽
let div=document.createElement(“標簽名”)
創建的元素放到也面中:
document.body.appendChild(div)
父元素.appendChild(子元素)
引入JS
1. 外部引入方式
<head>
<script src='路徑'></script>
</head>
2. 內部引入方式(在html頁面中放入srcipt標簽,和body同級)
<script>
</script>
3. 放在事件後
<div onclick="alert(1)">文字等或事件</div>
註意:
~js的幾種引入方式是相互關聯的,可以相互操作與訪問
~外部js中不能添加srcipt標簽對
~嵌入式的js中不能添加src屬性
引入js的執行
1. 將srcipt標簽對放最最後
2.在.js文檔中加入
window.onload=function(){
需要執行的js代碼塊
}
輸出工具
彈出框:alter(' '); 數字可加可不加' ';
輸出到控制台:console.log('輸出到控制台');
輸出到html頁面中[可以識別html的標簽對,即解釋為html語言]:document.write('<h1>輸出到html頁面中 </h1>');
輸入工具
彈出框輸入:var num=prompt("提示文本",[預設值]);
提示工具
confirm("提示內容");
confirm返回值為true和false
註釋
單行註釋: ctrl+?或者/ //
塊註釋: ctrl+shift+/或者? /* 塊 */
拼接
1. 用“+”拼接
2. 模板字元串(es6):
`<td>${i}-${j}</td>`; 拼接部分用``括起來,變數用 ${變數}
識別空格,換行等
變數
一個容器,存儲數據
變數的聲明:
var:
let:
let命令,用來聲明變數。它的用法類似於var,但是所聲明的變數,只在
let命令所在的代碼塊
內有效
1. 適用於for迴圈
2. 先聲明,在使用
3. 不允許在相同作用域內重覆聲明同一個變數。
4. let可以識別塊級作用域
5. 不存在變數提升(先訪問後聲明) 報錯:沒有定義
const
聲明一個只讀的常量。一旦聲明,常量的值就不能改變。
聲明常量的
同時
進行賦值,不賦值就會報錯可以識別塊級作用域
不能重覆聲明
不存在變數提升【先訪問在聲明】
PI;
命名規範:
-
數字。字母。下劃線組成
-
不能以數字開頭
-
區分大小寫
-
不能以關鍵字(js中已經用到的)命名
-
不能以保留字(js中將來會用到的)命名
-
有意義
-
遵循的規則:首字母大寫 (Array String Obiect) ;駝峰命名法 (getElementByld)
賦值
-
先聲明再賦值
var num;
num=10; -
聲明的同時賦值
var num=10; -
一次性聲明多個變數,再賦值
var a,b,c;
a=1,b=2;
c=3; -
一次性聲明多個變數同時複製
var a=1,b=2,c=3;
註意事項:
-
變數要先聲明再訪問,變數的預設值是undefined
-
新值可以覆蓋舊值
-
變數可以用var關鍵字重新聲明
-
不用var關鍵字聲明時必須給變數賦值,並且為全局變數,先訪問後聲明變數,值為undefined:js執行時先預解析(即識別var 和function聲明的變數,不賦值),在解析,一句一句執行。
數據類型
根據在記憶體中的存儲位置劃分。基本數據類型存放在棧中,引用數據類型存放在堆中(指針存放在棧中,內容存放在堆中 )
基本數據類型
-
undefined
-
null 【空占位符】
-
string 【也是對象】
模板字元串 字元編碼 ASCII utf-8 unicode【萬國碼】 gb2312
轉義字元: \ \n[換行] \r \t[製表符] \' \ ""
let 對象=new String(“ ”);
編碼
對象.charCodeAt(2) 返回第2個位置的字元編碼
String.fromCharCode(字元編碼) 解碼
查找元素
對象.charAt(0) 字元串的第0個位置的元素【查找字元】
查找下標
對象.indexOf(“ ”) 查找對應字元的下標,如果有返回下標,如果沒有,返回-1【第一個字元開始的下標】
對象.lastIndexOf(“”) 倒著看查找,倒序看如果有返回下標,如果沒有,返回-1【第一個字元開始的下標】
對象.search(“”) 正則:有返回0;沒有返回-1;
對象.match(“”) 有的話,返回數組【返回值,下標,包含返回值的數組,】
沒有 返回null
字元串的截取:【返回新值,不改變原內容】
對象.substr(開始下標,【截取的長度】)
對象.substring(開始下標,結束的下標),從開始下標開始到結束下標之前,不取到結束的下標
對象.slice(開始下標,結束的下標),從開始下標開始到結束下標之前,不取到結束的下標【數組的方法】
字元串大小寫【轉換】
let str="AbCdEf";
str.toLowerCase() 轉換為小寫
str.toUpperCase() 轉換為大寫
替換:
str.replace(“山”,“閃”);
轉換【字元串轉換數組】
let str=“1,2,3,4,5,6”;
arr2=str.split(“,”); -
boolean
-
number 2e3=2*10^3
二進位: 0b開頭
八進位:以0o{0+字母o}開頭,後跟0-7的數
十六進位:以0x開頭,後跟0-9或者a-f
NaN:not a number 本來期望返回數值的操作,但並未返回數值的操作
引用數據類型
-
object(屬性與方法的集合)數組,函數,對象
-
深拷貝
let arr=【1,2,3,4】
let arr1;
arr1=arr; :傳址
arr1 和 arr具有相同地址 -
淺拷貝:
let arr=【1,2,3,4】
let arr1=【】
arr.foreach(function(value){
arr1.push(value)
})
判斷變數的數據類型 ,其結果為字元串
typeof用法:
var num="5555";
typeof num;
數據類型 | 值 | 情況 | typeof 的結果【看返回0 1代碼的前三位】 |
---|---|---|---|
undefined | undefined | undefined | |
null | null(空占位符) | object | |
boolean 布爾型 | true false | boolean | |
string 字元串型 | 帶" "或者' ' | string | |
number 數值型 | 整數,小數,八進位,十六進位,十進位 | ||
object |
運算符
表達式:能夠求值的語句
算術運算符
+ - * / % ++var var++ --var var --
+的特殊性
計算:操作對象是數值型
拼接:操作對象含有字元串,字元串中進行運算時,用()括起來
自增與自減
++var: ++在前,先算++,在執行本行的其他語句
var++:++在後,先執行本行的其他語句,在算++
關係運算符
返回值為布爾值 ,即true或者false
> < >= <= ==[等於] ===[全等於]--> 數值和數據類型相同 !=[不等於] !==[不全等]
如果比較的兩個對象都是字元串[數字型,字元],按照ASCII表對應的ASCII碼比較,逐位相比
如果比較的兩個對象都是數值,直接比大小
如果一個操作對象是字元串,另一個是操作對象是數值,先嘗試將字元串轉換為數字,如果轉換成功,按照數字比較大小;如果轉換不成,則返回false
1==true; 0==false ; ==數值相同
=== 數值和數據類型相同
undefined=null
賦值運算符
= +=[num+=10 等價於 num=num+10] -= *= /= %=
邏輯運算符[與或非]
測量值與變數之間的邏輯關係
假:0、false undefined null NaN “ ”【空字元串】
真:其餘為真
-
&&與
-
||或
-
!非【用來取反】
A B A && B A || B !A true true true true false true false false true false false true false true true false false false false true
返回值:
第一步:先看與或非兩邊的真假
第二步:在看返回的真假的內容
&& 同真為真,返回第一個假值 【遵循短路原則:看到假值,後邊的不看了】;全為真,返回最後一個真值
|| 同假為假,返回第一個真值 【遵循短路原則:看到真值,後邊的不看了】;全為假,返回最後一個假值
! 取反;返回值只有ture或false
運算符的優先順序
算術>關係運算符>邏輯運算符
三元運算符:
表達式?為真的執行語句:為假的執行語句 【類似if else】
一元運算符: typeof + - new
特殊運算符: () .
流程式控制制
代碼按照指定條件的執行順序
-
順序結構
-
分支結構
-
迴圈結構
順序結構
語句按照從上到下的順序進行執行
迴圈結構
當滿足條件時,重覆不斷的執行一段代碼
for迴圈:明確知道次數
for(初始條件;終止條件;步進值){
}
swith迴圈
switch(表達式【能夠求值的語句】){
case 值1【表達式能取到的值】:語句1;break;
case 值2【表達式能取到的值】:語句2;break;
...
default: 語句;
}
while迴圈
while(條件){
滿足條件時,執行語句;
}
例子:
var j=0;
while(j<5){
console.log(1);
j++;
}
do while迴圈
執行順序先執行迴圈體,在執行判斷語句
do{
迴圈體;
}while(條件)
例子:
var i=0;
do{
console.log(1);
i++;
}(i<5)
迴圈結束
continue
滿足條件終止本次迴圈
break
滿足條件,終止整個迴圈
分支結構
當條件成立時執行相應的語句
-
單分支結構
if條件:
if(表達式){
為真的執行語句【返回值為true執行的語句】
} -
雙分支
if條件:
if(表達式){
為真的執行語句
}
else{
為假的執行語句
} -
多分支
if條件:
if(表達式1){
表達式1成立時執行語句
}
else if(表達式2){
表達式1不成立 但 表達式2成立時執行語句
}
else if(表達式3){
表達式1不成立且表達式2不成立【但】表達式3成立時執行語句
}
else{
以上表達式都不成立時執行的語句
} -
嵌套分支
if(){
if(){
}
else{
}
}
else{
}
數學方法
取隨機數
Math.random() ; (0-1)
取整
向下取整【向左取整】: rgb=Math.floor(Math.random());
向上取整【向右取整】: rgb=Math.ceil(Math.random());
次冪[x的y次冪]
Math.pow(x,y)
一維數組
按照順序排列的一組相關數據。
特點:每一個數組元素都有一個特定的鍵名(即俗稱的下標)[字元串類型]
數組元素的預設值時undefined
數組的聲明[初始化數組]
-
先聲明後賦值
var arr=[];
arr[0]=89,arr[0]="adc",....; -
聲明的同時賦值
var arr=[90,89,88,76,56];
數組下標的範圍
訪問數組元素,範圍【0,n-1】
數組的長度
數組名.length; 例子: arr.length
註意:
數組的長度可變
arr=[90,89,88,76,56];
可以隨時添加元素,可跳著添加。如:
arr[6]="aaa";
數組元素可以時任意的數據類型
arr=[true,null,{name:},[1,2,3]]
遍曆數組元素
訪問數組的每一個元素
1. 用for迴圈遍曆數組
for(var i=0;i<arr.length;i++){
arr.[i]; 即可訪問arr的每個元素
}
2. 用for in迴圈遍曆數組
for(var i in arr){
i; //代表arr的鍵名(下標)
arr[i]; //元素
}
3.for of遍歷元素
for(item of arr1){
arr2.push(item)
}
4.foreach遍曆數組
用法:
arr.forEach(function (value,index){
})
value[名字隨便起]:數組中的當前元素【必須有】
index[名字隨便起]:數組當前元素的下標【鍵名】【可選】
清空數組
arr.length=0
二維數組
聲明:
var arr=[[1,2.3],["a","b"],[78,89];
訪問:
arr[行][列]
遍歷
for(var i=0;i<arr.length;i++){
for(var j=0;j<arr[i].length;j++){
arr[i][j]
}
}
數組身上的方法
向數組的後面插入一個或多個元素(.push)
arr.push(需要插入的內容);
刪除數組最後一位:.pop
arr