javaScript學習筆記一：javaScript基礎
文章目錄
javaScript入門
- js是一種直譯式腳本語言，是一種動態類型，弱類型基於原型的語言。也就是說js是一種運行在瀏覽器中的解釋型的編程語言。
- js的三種組成
ECMAScript :解釋器，翻譯者（描述了該語言 的語法和基本對象）它是javaScript的標準
DOM(Document Object Model):文檔對象模型，W3C是DOM的標準。
BOM:(Brower Object Model): 瀏覽器對象模型，缺乏標準。
- 第一個js代碼實現鼠標的移入移出事件。
鼠標移入事件：onmouseover
鼠標移出事件：onmouseout
步驟：
**1、通過id找到我們要改變的div **
2、修改我們的css屬性
這種寫法有個問題就是各種版本的瀏覽器兼容性差，最好將css屬性寫入到<style裏面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#tim{
width: 200px;
height: 200px;
border:1px solid black;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="tim" onmouseover="tim.style.background='red'" onmouseout="tim.style.background='white'"></div>
</body>
</html>
獲取標籤元素的操作
document.getElementById(‘Id名’) 返回這個Id名的元素
document.getElementsByTagName(‘標籤名’) 返回所有這個標籤名的元素集合，返回的是該標籤的數組
document.getElementsByClassName(‘className’) 返回所有這個class的元素的集合。
document.querySelector(“css任意選擇器”) 返回第一個
document.querySelectorAll(“css任意選擇器”) 返回符合的所有
document.documentElement 獲取HTML元素
document.body 獲取body元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#tim{
width: 200px;
height: 200px;
border:1px solid black;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="tim" class="xiaodi"></div>
<script type="text/javascript">
//返回這個id名的元素。
//document.getElementById('tim').style.background='red'
//返回所有這個標籤名的元素集合，獲取到的是一個集合，擁有數組的特性
//document.getElementsByTagName('div')[0].style.background='black'
//通過ClassName獲取到的也是一個集合
//document.getElementsByClassName('xiaodi')[0].style.background='yellow'
//document.querySelector("css任意選擇器")返回第一個
//css的選擇器包含div,className,id.
//使用時，div直接填div,className改爲.className,id修改爲#id
//document.querySelector("div").style.background='green'
//document.querySelector("#tim").style.background='red'
//document.querySelector(".xiaodi").style.background='black'
//document.querySelectorAll("css任意選擇器")返回所有，返回是一個數組。
//document.querySelectorAll(".xiaodi")[0].style.background='red'
</script>
</body>
</html>
JS編寫的最佳位置
- 一般情況下js寫在頁面的任何位置都可以，但是需要Script標籤包括着，但是別寫在html標籤外。
- 最常見的寫在head標籤內部或者body內部
- 寫在head標籤內需要寫上window.onload包着，要不然會報錯，因爲執行js時頁面標籤沒有加載。
window.onload的作用是當頁面加載完成後自動觸發事件。
一個頁面應該只有一個window.onload事件，如果寫多個，就會覆蓋執行最後一個。
js應該寫在body結束標籤之前。
- 下面代碼分別是將js寫在head標籤裏，寫在body標籤裏，引用外部js代碼。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#tim{
width: 200px;
height: 200px;
border:1px solid black;
margin: 0 auto;
}
</style>
<!-- <script type="text/javascript">
window.οnlοad=function(){
document.getElementById('tim').style.background='red'
}
</script> -->
<script type="text/javascript" src='js代碼應該寫在哪裏.js'></script>
</head>
<body>
<div id="tim"></div>
<!-- <script type="text/javascript">
window.οnlοad=function(){
document.getElementById('tim').style.background='black'
}
</script> -->
</body>
</html>
js輸出以及調試方式
- 彈窗型輸出
alert(“輸出內容”)
- 瀏覽器調試窗口輸出
console.log(“輸出內容”)
- innerHTML和innerText
給獲取到的元素一些內容
document.getElementById(‘id名’).innerHTML=‘內容’
- document.write(‘輸出內容’)
輸出內容會清空原有的html再生成一個新的html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='tim'>我是tim盒子</div>
<div id="rewrite">重寫</div>
<script type="text/javascript">
alert('我是彈窗內容')
console.log('我是在瀏覽器調試窗口')
document.getElementById('tim').innerHTML='<h1>我是Tim盒子的內容，我被注入進來了</h1>'
document.getElementById('tim').innerText='<h1>我是Tim盒子內容2，我被注入進來了</h1>'
document.getElementById('rewrite').onclick=function(){
document.write('我是新的html,原本的被窩替代掉了')
}
</script>
</body>
</html>
innerHtml可以帶css的標籤，innerText不能帶css標籤
常見的js事件
onclick 鼠標點擊事件
onmouseover 鼠標移動到某元素上
onmouseout 鼠標從某元素上面移開
onchange 元素值改變，一般用在表單元素上
onkeydown 用戶按下鍵盤按鍵
onfocus 元素獲得焦點
onblur 元素失去焦點
window.onload 頁面加載完成。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#tim{
width: 300px;
height: 300px;
background: red;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="tim"></div>
<input type="" name="" id="xd">
<script type="text/javascript">
document.getElementById('tim').onclick=function(){
alert('鼠標移入我的範圍內')
}
document.getElementById('tim').onmouseover=function(){
console.log('鼠標移入我的範圍內了')
}
document.getElementById('tim').onmouseout=function(){
console.log('鼠標移出我的範圍內了')
}
document.getElementById('xd').onchange=function(){
console.log(document.getElementById('xd').value)
}
//按下鍵盤事件
document.getElementById('xd').onkeydown=function(){
console.log('鍵盤按下了 ')
}
//獲取焦點事件
document.getElementById('xd').onfocus=function(){
console.log('獲取焦點事件')
}
//失去焦點事件
document.getElementById('xd').onblur=function(){
console.log('失去焦點事件')
}
</script>
</body>
</html>
動手操作div任意樣式
1、創建div和操作按鈕
2、獲取div和按鈕
3、給按鈕添加點擊事件
4、操作div樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#tim{
width: 100px;
height: 100px;
background: red;
margin: 0 auto;
}
</style>
</head>
<body>
<button id="taller">增高</button>
<button id="longer">增長</button>
<button id="changebg">改變背景顏色</button>
<div id="tim"></div>
<script type="text/javascript">
//給我們的增高按鈕添加點擊事件。
document.getElementById('taller').onclick=function(){
//獲取id名爲tim的div
document.getElementById('tim').style.height='300px'
}
document.getElementById('longer').onclick=function(){
//增長
document.getElementById('tim').style.width='300px'
}
document.getElementById('changebg').onclick=function(){
//增長
document.getElementById('tim').style.background='green'
}
</script>
</body>
</html>
JS的數據類型
- 基礎數據類型
字符串：string
數字(整型浮點型)：number
布爾：boolean
null：空對象
undefined：未定義
- 複雜數據類型
數組：Array
對象：Object
- 檢查數據類型的兩種基本方法
typeof
Object.prototype.toString.call(‘數據’)//鑑別複雜數據類型、引用數據類型。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
//字符串
console.log(typeof('string'))
//數字
console.log(typeof(345))
//布爾
console.log(typeof(true))
//null 就相當於一個空的對象
console.log(typeof(null))
//undefined
console.log(typeof(undefined))
//object
console.log(typeof({}))
//鑑別複雜數據類型
console.log(Object.prototype.toString.call({}))
//數組
console.log(typeof([]))
//鑑別複雜數據類型
console.log(Object.prototype.toString.call([]))
</script>
</body>
</html>
其中Object.prototype.toString.call()用於檢測複雜數據類型（對象，數組）
JS的變量
- 定義變量
var name
- 變量的規則
1、首字母必須是字母，或下劃線，或美元符號開頭，不能是數字。
2、後面的可以是字母，或下劃線，或美元符號，或數字，字母區分大小寫。
3、例如：var name 和var Name是不同的變量。
4、變量可以理解爲取一個別名，方便操作。
- 定義一個字符串
var name='zhangsan'
- js是先定義再執行的，即使沒有寫上定義代碼，js也會自動定義的，只不過沒有賦值。沒有賦值就是undefined(未定義)
數據類型之間的轉換
- js的常見數據類型
顯示轉換
Number() 轉換成數字類型
parseInt() 轉換成整型
parseFloat() 轉換成浮點數
String() 轉換成字符串
toString() 轉換成字符串
Boolean() 轉換成布爾模型
- 隱式轉換
操作時轉換，
數字和字符串拼接轉換成字符串
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
var a='122'
var b='abc'
//強制類型轉換（顯示轉換）
console.log(a,"類型:"+typeof(a))
console.log(a,"用number進行類型轉換後的類型："+typeof(Number(a)))
//用number轉換一個不是字符串的類型，但內容不是數字,轉換後會生成一個NaN類型，是Not a Number的縮寫。
console.log(b,"類型；"+typeof(b))
console.log(b,Number(b),"用number進行類型轉換後的類型："+typeof(Number(b)))
//浮點型轉換
var c=3.1415926
console.log(c,'整形轉換：'+parseInt(c))
console.log(c,'浮點型轉換：'+parseFloat(c))
//String和toString()效果一樣。
var d=123456
console.log(d,String(d),typeof(String(d)))
console.log(d,toString(),typeof(d.toString()))
//Boolean,只有0是false,其他數字都是true
console.log(d,Boolean(d))
var m=-1
console.log(m,Boolean(m))//true
//隱式轉換
//數字和數字相加表示求和
var sum
sum=1+2
console.log('sum='+sum)
//數字和字符串相加表示字符串拼接，這就是隱式轉換。
sum2=1+'2'
console.log('sum2='+sum2)
</script>
</body>
</html>
js創建複雜數據類型數組和對象
- 數組的創建
- 直接創建和利用構造函數創建
var arr=[]//空數組
var arr1=[3,4,5]//有內容的數組
//利用構造函數創建
var arr1=new Array();//創建空數組
var arr2=new Array(10);//創建一個長度爲10的數組
var arr3=new Array(5,4,3,2,1);//創建數組並初始化。
- 對象創建
var obj={}//創建空對象
var obj={a:1,b:2}//創建有內容的對象。
//利用構造函數創建
var obj=new Object()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
//直接創建數組
var arr=[]
var arr1=[1,2,3,4,5,6]
//構造函數創建數組
var arr2=new Array(1,2,4)
console.log(arr1.length)
console.log(arr2)
//對象直接創建
var obj={}
var obj2={a:1,b:2}
//利用構造函數創建
var obj3=new Object()
obj3={c:5,d:6}
obj3.m=6
obj3.e="123"
console.log(obj2)
console.log(obj3)
</script>
</body>
</html>
