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