JavaScript(宣告變數方式,變數,註釋)
阿新 • • 發佈：2018-12-10
- js的程式碼寫在哪裡?
- 如何獲取操作元素的權力(DOM)
- 操作元素權力一次性,操作100次需要用到變數(給人起文字 = 變數名),變數的命名規範
- 三種宣告變數的方式的區別
- 註釋
- innerHTML /innerText
- onload/defer
js程式碼寫在哪裡?
- 行內,寫在標籤屬性裡面,不推薦使用
- 內部,程式碼需要放在script(雙標籤)標籤裡面,script標籤的位置任意,解析到script標籤的時候,交給js解析器
- 外部js檔案,利用src屬性引入
- script可以防止於任何位置,不同的位置要注意載入順序,通常放在head或body結束之前
如何獲取操作元素的權力
給一個方法(DOM提供的)/api 傳遞一個 名字,這個方法會通過這個名字去找到
對應的標籤,確定標籤存在時,就返回這個標籤的操作權力
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head 變數的命名規範
- 不能純數字
- 不能以數字開頭
- 名字嚴格區分大小寫
- 不能使用關鍵字和保留字(目前沒有特殊意義,以後可能會有)
- 可以使用符號 (最好是英文符號,$,_)
- 雖然可以使用中文作為名字,但是非常不推薦使用
- 不能使用四則運算子
變數應該是英文符號或者是英文字母開頭,中間可以有數字,但是開頭不能有數字或者全部純數字
可以宣告多個變數,變數不一定要馬上賦值
宣告變數
用來宣告變數的關鍵字: var let const class function import
三個宣告變數(var let const)的區別,通常情況下,龍頭老大是window
//在script標籤裡面的第一層,全域性變數
/*
var 全域性變數 會自動的成為window 的屬性
let 和 const 宣告的全域性變數 不會成為 window的屬性 不能在
js出生時帶來的一個不好的弊端 儘量不要使用 var 會存在變數提升
let const必須先宣告,後使用,不提前宣告會報錯
let 和 const 的區別
let 宣告的 叫做 變數 ,可以被改變
const 宣告的 叫做 常量 ,不可以被改變(通過等號重新賦值),恆定
*/
//除錯方式console.log()列印日誌
//字串一定要加引號,關鍵字和變數不需要加引號
var a = 1;
let b = 2;
console.log(b); //列印2
b = 123;
console.log(b); //列印123
const c = 3;
console.log(c); //列印3
c = 4; //會報錯,提示不能給常量賦值
什麼時候使用let/const?
- let 宣告的變數可以重新賦值,需要對它重新賦值
- const 宣告的變數不可以重新賦值,不需要對它重新賦值
es6 老版本的瀏覽器不相容,IE基本全不相容
使用第三方工具(webpack)es6轉換es5程式碼,如果es5本身有相容IE的,就需要自己寫
註釋
單行註釋
//單行註釋
多行註釋
/*
多行註釋
多行註釋
*/
###innerHTML和innerText的區別
| innerHTML/innerText | 含義 |
|---|---|
| innerHTML | 可以解析標籤,希望解析標籤的時候使用 |
| innerText | 就是純文字 不會解析標籤 |
| innerHTML/innerText | 內容沒有標籤,兩者都可以 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div id="box" style="width: 500px;"></div>
<p id="p1"></p>
<script>
let box1 = docuement.getElementById("box");
let p = document.getElementById("p1");
//box1 代表id值為box的 div的操作權力
//box1 就是id值為box的 div 這個標籤的本身/本體
//DOM 0級 同類只能繫結一次
box1.onmousernter = function(){
console.log("滑鼠進來了");
box1.innerHTML = "<a href="https:www.baidu.com">這是滑鼠移入事件的內容</a>";
//拿到box1的id
console.log(box1.id);
//直接物件.style,操作的是行內樣式
console.log(box1.style.width);
box1.style.width = "400px";//更改該標籤的width值,操作的是行內樣式值
}
box1.onmouseleave = function(){
console.log("鼠標出去了");
box1.innerText = "<a href="https:www.baidu.com">這是滑鼠移出事件的內容</a>";
p.innerHTML = "123";
}
</script>
</body>
###小提示
//在上面那個程式碼的基礎上,增加上去,放在事件裡面
let str = p.innerHTML;//不代表p的本身,代表的p的內容,只是資料而已
//str只是代表p標籤裡面的內容
//帶等號是賦值,不帶是設定
str = 1234;//相當於是重置變數的值,不能給p.innerHTML設定為1234
p.innerHTML = 123;//這個才是真正的給p.innerHTML 設定值
p.innerHTML = str;
console.log(str);
onload/defer
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box{
width: 100px;
height: 100px;
background-color: pink;
}
</style>
<script>
let divBox = document.getElementById("box");//獲取不到,返回null ==> null不能設定屬性
divBox.onclick =function(){
console.log("滑鼠移入了");
}
//效果沒有出現,按f12==>看一下控制檯有沒有紅叉出現,Uncaught TypeError: Cannot set property 'onclick' of null,屬性不能設定為空
//報錯型別:報錯提示
/*
解決思路:
程式碼大致是從上往下
不能給null設定屬性 ==> 這個物件為null,一定是document.getElementById("box")沒有獲取到 ==> 標籤還沒載入 ==> script標籤的位置
*/
/*
如果script一定要寫在head標籤裡面
解決辦法:
1.把那些內容放在下面這裡,window.onload 等待載入完成後才執行
window.onload = function(){
let divBox = document.getElementById("box");
divBox.onclick =function(){
console.log("滑鼠移入了");
}
}
2.採用外部js檔案
2.1直接把解決辦法1的內容放到外部js裡面
//1.js內容
2.2延遲載入,等整個檔案載入完成以後,也就是defer 在window.onload的之前,只對外部js有用
<script src="1.js" defer></script>
*/
</script>
</head>
<body>
<div id="box"></div>
<script>
console.log(1);//1先執行
</script>
</body>
</html>
沒有找到標籤的原因:
- 標籤id名寫錯
- 程式碼執行到script標籤,頁面還沒載入
注意點
- 寫JS程式碼 嚴格區分大小寫
- 一個環境變數只需宣告一次,不需要重複宣告 重複宣告可能會報錯
- 變數第一次使用時,必須宣告,後續使用不需要宣告
- 變數的使用規則: 必須先宣告,後使用
- 語句結束的時候,要加分號;
- js操作標籤需要使用DOM,事件是相互獨立的
- 只要有特殊含義,就不能加引號,帶引號意味著都是文字
- script標籤到底放在哪裡?最好放在body結束標籤之前
###小練習:
滑鼠的移入移出的練習
參考程式碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>滑鼠移入移出</title>
<style>
body{
margin: 0;
}
.box{
width: 300px;
height: 100px;
background-color: pink;
margin: 10px auto;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div id="box1" class="box">div1</div>
<div id="box2" class="box">div2</div>
<script>
let oBox1 = document.getElementById("box1"),
oBox2 = document.getElementById("box2"),
color = "red",
defaultColor = "pink";
//簡寫,宣告多個變數,如上
//當使用類似於background-color的單樣式的話,要使用駝峰命名
oBox1.onmouseenter = function(){
oBox2.style.backgroundColor = color;
}
oBox2.onmouseenter = function(){
oBox1.style.backgroundColor = color;
}
oBox1.onmouseleave = function(){
oBox2.style.backgroundColor = defaultColor;
}
oBox2.onmouseleave = function(){
oBox1.style.backgroundColor = defaultColor;
}
</script>
</body>
</html>