javascript知識點(diǎn)詳解
一.JavaScript基本介紹
js誕生于1995年，是Javascript的縮寫，其與java語言沒有關(guān)系，當(dāng)時(shí)的主要目的是驗(yàn)證表單的數(shù)據(jù)是否合法
科普: Javascript的本來應(yīng)該叫l(wèi)ivescript，但是在發(fā)布前夕，想搭上媒體超熱java的順風(fēng)車，臨時(shí)把名字改為了javascript。(也就是說js跟java沒有關(guān)系，當(dāng)時(shí)的只是想借助java的名氣)
作用:負(fù)責(zé)控制web前端標(biāo)準(zhǔn)的前兩者。結(jié)構(gòu)和樣式;
如：箭頭切換圖片頁面，左下角的點(diǎn)也是
沒有js：沒有js的頁面，想要準(zhǔn)確提交信息，是非常麻煩的事。
ANS：js出生時(shí)是為了驗(yàn)證表單數(shù)據(jù)的合法性，js 就是在里面添加驗(yàn)證，輸入完成如果對就通過，如果不對就提示錯(cuò)誤，js就是解決這個(gè)問題。
當(dāng)今，js不僅能做驗(yàn)證，還能做網(wǎng)站特效
二、Javascript基礎(chǔ)語法
1.寫script標(biāo)簽，放在html頁面的最后位置，js代碼寫在html中的script標(biāo)簽中
2.從script標(biāo)簽的中間，alert("彈窗內(nèi)容，這里寫什么就會(huì)彈出什么");
<script>
alert("彈窗中的顯示內(nèi)容");
</script>
彈出警示框，彈出對話框 ：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> </html> <script type = "text/javascript"> alert(); </script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
<script type = "text/javascript">
alert('注意：彈出彈窗');
</script>
注意：瀏覽器 自帶的alert對話框，無法統(tǒng)一，這都是瀏覽器底層自帶的，無法修改。
三、JavaScript事件
定義:在什么情況下，執(zhí)行什么命令
作用:捕獲用戶的行為(單擊、雙擊、鼠標(biāo)的移入移出。.. )
例子1：在點(diǎn)擊時(shí)，進(jìn)行界面切換，在什么什么情況下，執(zhí)行的命令。
事件三要素:
事件的三要素：事件源.事件的類型 = 執(zhí)行的命令
1.事件源:《解釋就是這個(gè)事件加給誰)
2.事件類型:(就是指的這個(gè)事件是什么時(shí)候發(fā)生的)
3.執(zhí)行的指令:固定寫法function(H你的命令寫在這里}事件源""點(diǎn)事件名=匿名函數(shù)（匿名方法)
例子2：當(dāng)點(diǎn)擊div標(biāo)簽時(shí)，做一件事，如點(diǎn)擊后彈出對話框?！胕d類
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id = "div1">哈哈哈</div>
</body>
</html>
<script type = "text/javascript">
// 點(diǎn)擊頁面中的div,彈出對話框
// 第一步：如果想要控制某個(gè)標(biāo)簽必須先要找到它，在css中用選擇器尋找，js在當(dāng)前頁面的文檔找
//第二步：點(diǎn)擊頁面的div
// 第三步：彈出對話框
document.getElementById('div1').onclick=function()
{
alert('點(diǎn)擊時(shí)，才會(huì)彈出');
}
//事件的三要素：事件源.事件的類型 = 執(zhí)行的命令
</script>
例子3：添加標(biāo)簽p，用class類來
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id = "div1">哈哈哈</div>
<p class = "p1"> 我是p1標(biāo)簽</p>
<p class = "p1"> 我是p2標(biāo)簽</p>
</body>
</html>
<script type = "text/javascript">
// 點(diǎn)擊頁面中的div,彈出對話框
// 第一步：如果想要控制某個(gè)標(biāo)簽必須先要找到它，在css中用選擇器尋找，js在當(dāng)前頁面的文檔找
//第二步：點(diǎn)擊頁面的div
// 第三步：彈出對話框
document.getElementById('div1').onclick=function()
{
alert('點(diǎn)擊div時(shí)，才會(huì)彈出');
}
//事件的三要素：事件源.事件的類型 = 執(zhí)行的命令
document.getElementsByClassName('p1')[0].ondblclick=function()
{
alert('點(diǎn)擊p時(shí)，才會(huì)彈出');
}
// getElementsByClassName 通過class來找頁面中的元素，而class可以設(shè)置多個(gè)重復(fù)的類名
// 則在獲取時(shí)必須要在后面添加[0],從數(shù)字0開始計(jì)數(shù)
</script>
注意：
id是唯一的，即單一
而class是類，是復(fù)數(shù)，在js中用getElementsByClassName 通過class來找頁面中的元素，而class可以設(shè)置多個(gè)重復(fù)的類名，則在獲取時(shí)必須要在后面添加[0],從數(shù)字0開始計(jì)數(shù)
測試點(diǎn)：
1、未點(diǎn)擊彈出對話框
2、點(diǎn)擊未彈出對話框
四、 Javascript書寫位置（引入方式）
4.1 內(nèi)嵌js
內(nèi)嵌js:在html文件中。放在scipt標(biāo)簽里，即寫在html中放在script標(biāo)簽里面，叫內(nèi)嵌式
<script>
alert ("彈窗中的顯示內(nèi)容"");
</script>
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
<script type = "text/javascript">
alert('彈窗 內(nèi)嵌');
</script>
4.2 外鏈js
外鏈js:可以在單獨(dú)的js文件里，通過script標(biāo)簽中的src屬性引用到頁面中;即寫在單獨(dú)js文件，通過script中的src來鏈入到html頁面的，叫外鏈?zhǔn)?/p>
<script src="js文件的路徑>
此處不要寫代碼，寫什么都不會(huì)執(zhí)行
</script>
例子：
.html文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
<!-- <script type = "text/javascript">
alert('彈窗 內(nèi)嵌');
</script> -->
<script type="text/javascript" src="js.js">
</script>
js.js文件：
alert('彈窗 外鏈');
注意：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
<script type="text/javascript" src="js.js">
//此處如果是外鏈的語法，這里寫什么都不會(huì)執(zhí)行
alert('111111');
</script>
4.3 行內(nèi)js（禁止使用）
行內(nèi)js:寫在標(biāo)簽的屬性里，這個(gè)屬性必須是事件屬性。(任何標(biāo)簽都有事件屬性)，與行內(nèi)css一樣，不推薦使用! 即寫在html標(biāo)簽身上的，叫行內(nèi)式
<div onclick-alert ( 'heihei');”> 按鈕 </div>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div onclick = "alert('彈窗 行內(nèi)');">不規(guī)范范例</div>
</body>
</html>
注意：雙引號和單引號的區(qū)別在行內(nèi)，
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div onclick = "alert("彈窗 行內(nèi)");">不規(guī)范范例</div>
</body>
</html>
在行內(nèi)只能用單引號實(shí)現(xiàn)，否則無法執(zhí)行js行為
注意事項(xiàng)：
行內(nèi)js和行內(nèi)css一樣，都是不推薦使用 ！內(nèi)嵌和外鏈隨意使用，還是建議使用外鏈?zhǔn)?，因?yàn)槟軐?shí)現(xiàn)js代碼和html代碼的分離，更方便代碼的修改。
五、 js常見特效（了解）
需要將專業(yè)名詞與顯示效果對的上。
5.1 導(dǎo)航跟隨/電梯導(dǎo)航
導(dǎo)航：點(diǎn)哪去哪
5.2 返回頂部
點(diǎn)擊后，回到頁面最頂部
5.3 滾動(dòng)跟隨
哪個(gè)地方動(dòng)圖，讓用戶注意點(diǎn)在哪。
5.4 呼吸燈/焦點(diǎn)圖（banner圖）
圖片切換,漸隱漸現(xiàn)效果
5.5 js實(shí)現(xiàn)動(dòng)畫效果
測試時(shí)一定要多次觸發(fā)動(dòng)畫，查看動(dòng)畫是否有累積的情況。
注意：若是帶動(dòng)畫的效果存在經(jīng)典bug,js寫的,——?jiǎng)赢嬂鄯ebug,移入移出多少次，動(dòng)畫就會(huì)自行執(zhí)行多少次。
只要遇到動(dòng)畫的地方，——怎么測？重復(fù)觸發(fā)的測試，因?yàn)樗^的動(dòng)畫，不是點(diǎn)才動(dòng)。
5.6 模態(tài)窗口
模態(tài)窗口：彈出兩個(gè)層，一個(gè)負(fù)責(zé)蓋住下面的其他頁面內(nèi)容（背景色是灰色，無法操作底層其他控件），另外一個(gè)是讓用戶操作的層；只允許用戶操作彈初的那個(gè)層。
目的是：讓用戶優(yōu)先解決最上面的那個(gè)層
5.7 定時(shí)切換
5.8 自定義單選、多選、下拉菜單
系統(tǒng)自帶（原生的）：
自定義：
只要不是系統(tǒng)瀏覽器原生的，就算是自定義，這些程序需要js + html + css組合才能實(shí)現(xiàn)，肯定比原生的寫法浪費(fèi)時(shí)間，但是為了整體頁面的美觀，必須要求程序員按照設(shè)計(jì)師的要求實(shí)現(xiàn)。
總結(jié)
本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
總結(jié)JavaScript三種數(shù)據(jù)存儲(chǔ)方式之間的區(qū)別
這篇文章主要介紹了JavaScript三種數(shù)據(jù)存儲(chǔ)方式之間的區(qū)別,指的分別是sessionStorage和localStorage以及cookie三種瀏覽器端的數(shù)據(jù)存儲(chǔ)方式,需要的朋友可以參考下2016-05-05
這篇文章主要介紹了JavaScript靜態(tài)類型檢查工具FLOW簡介,需要的朋友可以參考下2015-01-01
正在學(xué)習(xí)javascript的朋友們，可以把這個(gè)小練習(xí)做一做，加強(qiáng)自己編寫代碼的能力2013-04-04
本篇文章小編將為大家介紹JS繼承--原型鏈繼承和類式繼承，有需要的朋友可以參考一下2013-04-04
JavaScript的目的分析...2007-01-01
JavaScript 中的無窮數(shù)(Infinity)詳解
這篇文章主要介紹了JavaScript 中的無窮數(shù)(Infinity)的相關(guān)資料,非常的細(xì)致全面,有需要的小伙伴可以參考下2020-02-02
javascript學(xué)習(xí)筆記_淺談基礎(chǔ)語法,類型,變量
下面小編就為大家?guī)硪黄猨avascript學(xué)習(xí)筆記_淺談基礎(chǔ)語法,類型,變量。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-09-09
本文主要是給大家簡單介紹了Array的相關(guān)基礎(chǔ)知識，到這里也算是能對Array有更全面的理解了，希望大家能夠喜歡，后續(xù)我們將繼續(xù)介紹關(guān)于array的內(nèi)容。2021-11-11
本文向大家簡單介紹了javascript事件的屬性列表，非常的詳細(xì)，推薦給有相同需求的小伙伴們。2015-03-03
JavaScript初級教程(第五課續(xù))...2007-04-04