avaScript和Java有什么聯(lián)系
根據(jù)目前我自己的理解,不要被名字有相似字節(jié)所欺騙,這兩個(gè)語(yǔ)言其實(shí)沒(méi)有什么聯(lián)系,如果說(shuō)有的話(huà),應(yīng)該就是關(guān)鍵字和對(duì)象的一些范疇有點(diǎn)相似或者說(shuō)是有種模仿的感覺(jué)。但是實(shí)際上一個(gè)作為腳本的輕量語(yǔ)言[^7],一個(gè)作為有完整體制的大型語(yǔ)言[^8],兩者是沒(méi)有任何可比性的。
JS的內(nèi)鏈外鏈
內(nèi)鏈
? JS的內(nèi)鏈,也就是在html文件內(nèi)的調(diào)用使用與css類(lèi)似,也有兩種方式,即在html文件的<head></head>中書(shū)寫(xiě)使用或是在<body></body>中使用。
<head></head>內(nèi)書(shū)寫(xiě)
? 在<head></head>中對(duì)JS的代碼進(jìn)行書(shū)寫(xiě)時(shí),我們使用<script></script>對(duì)我們的JS代碼進(jìn)行包裹,與html及CSS的法則一樣,其作用也是用來(lái)標(biāo)明其JS的代碼塊屬性。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script>
function displayDate(){
document.getElementById("demo").innerHTML=Date();
}
</script>
</head>
<body>
<h1>我的第一個(gè) JavaScript 程序</h1>
<p id="demo">這是一個(gè)段落</p>
<button type="button" onclick="displayDate()">顯示日期</button>
</body>
</html>
###### <body></body>內(nèi)書(shū)寫(xiě)
? 與在<head></head>中類(lèi)似的,我們?cè)?lt;body></body>中對(duì)JS的書(shū)寫(xiě)和使用同樣是在<script></script>中實(shí)現(xiàn),其作用也與上述的一致。
<!DOCTYPE html>
<html>
<body>
<script>
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>");
</script>
</body>
</html>
外鏈
與css有些不同的,JS的外鏈同樣使用的是<script></script>標(biāo)簽來(lái)實(shí)現(xiàn)。JS即可以出現(xiàn)本地的JS文件的鏈接,也可以調(diào)用網(wǎng)上的JS文件進(jìn)行鏈接,但調(diào)用網(wǎng)絡(luò)上的文件有可能會(huì)受到目標(biāo)文件服務(wù)器和網(wǎng)絡(luò)的影響,使用的頻率沒(méi)有本地的調(diào)用高。
? 調(diào)用本地JS文件:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="../js/js_for_Seat_selection_nterface.js" ></script>
</head>
<body>
</body>
</html>
調(diào)用網(wǎng)絡(luò)的JS文件:
<!DOCTYPE html>
<html>
<head>
<script src="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"> </script>
</head>
<body>
</body>
</html>
? JS的外鏈與css類(lèi)似的,也可以在同個(gè)文件里調(diào)用多個(gè)JS文件使用。其中還有很多較css的相似部分就不在這里重復(fù)說(shuō)了,可以參考之前的css部分內(nèi)容。
JS的語(yǔ)法關(guān)鍵字
JS的語(yǔ)法關(guān)鍵字有很多很多,因?yàn)镴S是一門(mén)以對(duì)象為基礎(chǔ)的語(yǔ)言,我們?cè)谑褂脮?huì)發(fā)現(xiàn)很多例如document.getElementById("demo").innerHTML=x;的語(yǔ)句,這里的getElementById(),innerHTML其實(shí)都是JS為我們已經(jīng)封裝(可以理解為打包)好了的方法和方法中的參數(shù)。所以我們?cè)谶@里主要介紹一些基本的關(guān)鍵字。
function
function的作用其實(shí)很簡(jiǎn)單,就是聲明一個(gè)函數(shù),表明我這里的是一個(gè)函數(shù),我們用一個(gè)看例子來(lái)看:
function myFunction(){
var x="";
var time=new Date().getHours();
if (time<20){
x="Good day";
}
document.getElementById("demo").innerHTML=x;
}
上述的例子就是為我們聲明了一個(gè)叫做myFunction的的函數(shù),其后的花括號(hào)中包含的就是函數(shù)中的內(nèi)容。
var
在JS中,var的作用就是聲明一個(gè)變量,在JS中,對(duì)于變量的類(lèi)型沒(méi)有嚴(yán)格的規(guī)定,所以JS也是一門(mén)弱語(yǔ)言,被定義的變量只有在第一次被賦值時(shí)才會(huì)被系統(tǒng)分配相應(yīng)數(shù)據(jù)類(lèi)型的空間。
var a;
a=10;
但實(shí)際上我們會(huì)發(fā)現(xiàn),在實(shí)際使用時(shí)不僅僅是var可以聲明一個(gè)變量,$也可以成功聲明一個(gè)變量,甚至不需要任何的申明關(guān)鍵字也可以直接創(chuàng)建一個(gè)變量。但實(shí)際上是有非常大的差別的,$是JQ中的一個(gè)已經(jīng)過(guò)定義的自定義函數(shù)名,而在單純的JS中是沒(méi)有任何意義的,一般是在你的文件已經(jīng)引入了一個(gè)JQ數(shù)據(jù)庫(kù)后才出現(xiàn)$也可以創(chuàng)建變量的情況,而相較于不使用任何關(guān)鍵字而直接創(chuàng)建一個(gè)變量,其實(shí)質(zhì)是在整個(gè)JS文件的最上層windows中創(chuàng)建了一個(gè)對(duì)象屬性,詳細(xì)的解釋我會(huì)在文末提供一個(gè)網(wǎng)絡(luò)來(lái)源的博客地址,其中對(duì)創(chuàng)建對(duì)象屬性有一個(gè)較為詳細(xì)的解釋。
所以我們?cè)诼暶鲃?chuàng)建變量時(shí)一定要使用var關(guān)鍵字,不使用任何關(guān)鍵字創(chuàng)建變量,雖然可行,但卻存在著語(yǔ)法錯(cuò)誤。
new
與其它的面向?qū)ο蠓椒ㄒ粯拥模琂S中創(chuàng)建對(duì)象所使用的個(gè)關(guān)鍵字也是new,我們通過(guò)它來(lái)創(chuàng)建一個(gè)對(duì)象。
person=new Object();
在上述的例子中,我們創(chuàng)建了一個(gè)名為person的對(duì)象,object我們?cè)谶@里可以簡(jiǎn)單的理解為一個(gè)類(lèi)型為對(duì)象的數(shù)據(jù)結(jié)構(gòu)。這句代碼的意思就是創(chuàng)建一個(gè)對(duì)象,對(duì)象名為person。
JS的結(jié)構(gòu)語(yǔ)句
其實(shí)說(shuō)是JS的結(jié)構(gòu)語(yǔ)句,我們不難發(fā)現(xiàn)的,這些結(jié)構(gòu)語(yǔ)句其實(shí)很多都是我們?cè)谄渌Z(yǔ)言中也能見(jiàn)到的語(yǔ)言語(yǔ)法,我們?cè)谶@里也是將它們簡(jiǎn)單的歸類(lèi)再來(lái)說(shuō)明一下。
###### if else
if else語(yǔ)句主要的作用其實(shí)也很簡(jiǎn)單,就是做一個(gè)判斷,就像它的翻譯 一樣——如果….就….. 否則…..。
if(...){
...
}
else{
....
}
? 上述的就是它的基本格式,我們可以看到在if后面的小括號(hào)中會(huì)有一個(gè)判斷語(yǔ)句,其中的語(yǔ)句用來(lái)判斷真假來(lái)控制語(yǔ)句的執(zhí)行部分。花括號(hào)中的就是滿(mǎn)足條件時(shí)執(zhí)行的語(yǔ)句。
這一條語(yǔ)句是可以嵌套的,我們通過(guò)對(duì)它的嵌套來(lái)進(jìn)行多層的判斷。
if(...){
if(...){
...
}
else{
....
}
}
else{
....
}
while
我們先來(lái)看它的格式:
while(...){
...
}
while是一個(gè)循環(huán)語(yǔ)句,在關(guān)鍵字后面的小括號(hào)中,也同樣是一條判斷語(yǔ)句,用來(lái)控制循環(huán)的執(zhí)行。在花括號(hào)中是我們的循環(huán)內(nèi)容。
do while
可能我們會(huì)發(fā)現(xiàn),這條語(yǔ)句和上一條語(yǔ)句非常的相似,我們還是先來(lái)看它的格式:
do{
...
}while(...)
它一樣是一條控制循環(huán)的語(yǔ)句,不過(guò)和上一個(gè)語(yǔ)句有所區(qū)別的,它是先循環(huán)后判斷,而while是先判斷后循環(huán),有的時(shí)候我們?cè)诓灰匝源蟾缜闆r下使用會(huì)達(dá)到不一樣的效果。
for
js for( var i=0;1<=10;i++){ ... }
for語(yǔ)句也同樣是一個(gè)循環(huán)語(yǔ)句,我們?cè)谏厦媾e出了一個(gè)實(shí)例,從例子中我們看到,for和它的循環(huán)語(yǔ)句是有區(qū)別的,我們需要在判斷的語(yǔ)句中定義變量,規(guī)定執(zhí)行循環(huán)的條件,及控制循環(huán)的條件變化。
但實(shí)際上,有些時(shí)候我們只需要寫(xiě)明控制循環(huán)的條件語(yǔ)句就可以了,其他的兩條語(yǔ)句可以不在括號(hào)中寫(xiě)出。但要注意的,我們需要保留它的分號(hào),不然會(huì)出現(xiàn)語(yǔ)法錯(cuò)誤。
switch
js switch(...){ case '...': ...;break; case '...': ...;break; .... default:...; }
這是一個(gè)條件選擇語(yǔ)句,我們通過(guò)判斷語(yǔ)句來(lái)選擇到一個(gè)具體的分支,執(zhí)行相應(yīng)的語(yǔ)句。
有關(guān)于break,default 的作用,我們就不細(xì)說(shuō)了,大家可以去網(wǎng)上查看它的詳細(xì)信息。
JS的效果實(shí)現(xiàn)(HTML的事件響應(yīng))
我們已經(jīng)很簡(jiǎn)單的介紹了一下JS的語(yǔ)法和關(guān)鍵字,那么我們下面來(lái)說(shuō)在網(wǎng)頁(yè)中如何觸發(fā)JS的代碼,又或者說(shuō)是如觸發(fā)相應(yīng)的事件。
##### 點(diǎn)擊事件
點(diǎn)擊事件就是通過(guò)頁(yè)面點(diǎn)擊觸發(fā)的事件,我們要注意的,在網(wǎng)頁(yè)中其實(shí)不是只有按鈕才可以作為點(diǎn)擊事件的載體,基本上所有的網(wǎng)頁(yè)元素都可以作為點(diǎn)擊事件的載體。也就是說(shuō)其實(shí)我們可以在任意一個(gè)元素中添加一個(gè)點(diǎn)擊事件。
? 下面我們來(lái)看常用的格式:
<html>
<body>
<input type="checkbox" name="ticket_seat"id="tucket_18" class="ticket_input"value="18"onclick="ticket_onclick()">
<script>
function ticket_onclick(){
...
}
</script>
</body>
</html>
? 在上述的例子中我們可以看到,在標(biāo)簽中加入一個(gè)onclick屬性,在后面寫(xiě)上要觸發(fā)的函數(shù)名。這樣我們?cè)邳c(diǎn)擊網(wǎng)頁(yè)上的元素之后,我們就可以觸發(fā)相應(yīng)的JS函數(shù)。
對(duì)于我們的onclick字段,我們可以像常規(guī)的函數(shù)調(diào)用來(lái)看待它,也就是說(shuō),我們也是可以通過(guò)它向函數(shù)傳入?yún)?shù)。
后記:對(duì)于大部分轉(zhuǎn)行的人來(lái)說(shuō),找機(jī)會(huì)把自己的基礎(chǔ)知識(shí)補(bǔ)齊,邊工作邊補(bǔ)基礎(chǔ)知識(shí),真心很重要。
"我們相信人人都可以成為一個(gè)IT大神,現(xiàn)在開(kāi)始,選擇一條陽(yáng)光大道,助你入門(mén),學(xué)習(xí)的路上不再迷茫。這里是北京尚學(xué)堂,初學(xué)者轉(zhuǎn)行到IT行業(yè)的聚集地。"
TML+CSS學(xué)完好久了,一直沒(méi)啥時(shí)間總結(jié),現(xiàn)在總結(jié)了下學(xué)的過(guò)程:
之所以放在一起總結(jié),是因?yàn)镠TML和CSS沒(méi)有啥很多的編程邏輯,都是需要去記住并且熟練使用的,熟練使用是得去一個(gè)個(gè)敲過(guò)一遍。所謂的代碼量積累好像就是這么回事,只有多敲才能會(huì)。
小白用的嗶哩嗶哩上的教程視頻,因?yàn)閭€(gè)人學(xué)習(xí)方法的原因,都是跟著那教程去敲的,當(dāng)然課后練習(xí)的話(huà),都是自己先摸索敲了一遍在去看的講解,小白覺(jué)得這樣可以加深印象。
還有就是沒(méi)有熟練之前要天天的去練,哪怕一天半小時(shí)也好。因?yàn)橐坏┮惶鞗](méi)有練就會(huì)忘掉,還得回去找之前的筆記來(lái)看。(因?yàn)橛惺碌R了兩三天沒(méi)去學(xué),結(jié)果又重頭的看了一遍,血淋淋的學(xué)習(xí)效率教訓(xùn)。不管怎樣,貴在堅(jiān)持。)
當(dāng)然,因?yàn)樾“谆A(chǔ)是真的差,沒(méi)有什么教程是可以完完全全都講完的,使用小白看完了嗶哩嗶哩的教程又跑去了網(wǎng)易云課堂找了一份HTML+CSS的教程來(lái)看,為的是查漏補(bǔ)缺。
有一種播放叫做1.5倍播放。看的過(guò)程,別跟播放器里一倍的速度看,調(diào)成1.5倍或是2.0倍播放速度,因?yàn)槟切〇|西,多數(shù)都是理解使用的。哪怕忘了,百度一下就可以直接搞定了。打基礎(chǔ)階段所以還是記住熟練使用才好。
HTML小白也就看了兩天吧,用了半天做了下練習(xí);CSS對(duì)于零基礎(chǔ)的人來(lái)說(shuō)建議12-15天,當(dāng)然小白之前有過(guò)這些概念,所以用了五天多點(diǎn)的時(shí)間。JS才剛剛開(kāi)始學(xué),所以不知道時(shí)間怎么算才好。因?yàn)榍岸巳蠡篐TML+CSS+JS,HTML+CSS學(xué)習(xí)所使用的時(shí)間占比才百分之五,剩下的百分之九十五都是JS的學(xué)習(xí)時(shí)間。
找課程時(shí)記住,找一兩個(gè)課程,一個(gè)全心去學(xué),一個(gè)查漏補(bǔ)缺就好,別一會(huì)兒這個(gè)課程看一下,那個(gè)課程看一下的。這樣子反而會(huì)使自己心浮氣躁沒(méi)法靜下心來(lái)去學(xué)。打基礎(chǔ)的視頻教程,其實(shí)都一樣的,沒(méi)啥有特別好的特別壞的。
tml是一種標(biāo)記語(yǔ)言,準(zhǔn)確地來(lái)說(shuō)應(yīng)該是超文本標(biāo)記語(yǔ)言。什么叫標(biāo)記語(yǔ)言呢?
很多諜戰(zhàn)電視劇里面經(jīng)常有這樣的橋段:要刺殺一個(gè)很重要的人物需要一個(gè)組織內(nèi)部的很多人來(lái)配合完成,A負(fù)責(zé)監(jiān)視并傳達(dá)信息給B,B在收到信息后判斷是否對(duì)目標(biāo)進(jìn)行刺殺。比如A傳遞信息的手段是做標(biāo)記,在某面墻上畫(huà)個(gè)圓圈代表可以動(dòng)手。畫(huà)個(gè)叉代表時(shí)機(jī)不成熟,不能動(dòng)手。畫(huà)個(gè)方塊,代表情況不明需要進(jìn)一步監(jiān)視探明情況。B在看到標(biāo)記后就知道是什么意思。這就是標(biāo)記,標(biāo)記代表一定的意思,也可以稱(chēng)呼為標(biāo)記語(yǔ)言。
那什么又是超文本呢?看其字知其意,就是超越文本。我們一般傳遞意思大部分都是文字,說(shuō)話(huà)說(shuō)的都是文字,寫(xiě)信一般也全是用文字來(lái)表述意思。超文本不光有文字,它還包括圖片、鏈接甚至是音樂(lè)和程序等非文字的元素。
發(fā)微信消息就可以體會(huì)出來(lái),除了發(fā)文字我們也會(huì)發(fā)圖片,甚至斗圖。如果有好聽(tīng)的音樂(lè)也可以分享給好友聽(tīng)。如果你還懂程序的話(huà),你也可以發(fā)給好友。
Html既然是一種超文本標(biāo)記語(yǔ)言,可想而知它里面包含的標(biāo)記應(yīng)該有很多。每個(gè)標(biāo)記代表一個(gè)意思,用不同比較組合起來(lái)就可以表達(dá)一整串完整的意思。
比如說(shuō)這個(gè),四個(gè)標(biāo)記可以完整表達(dá)一個(gè)成語(yǔ)的意思。猜猜是什么成語(yǔ)吧。
在動(dòng)手開(kāi)始寫(xiě)hmtl標(biāo)記之前,我們需要一點(diǎn)準(zhǔn)備。
1. 在你的電腦桌面新建一個(gè)記事本。
注意記事本的后綴名(也就是圖中最后面的.txt)必須要有,如果沒(méi)有這個(gè)要調(diào)出來(lái)。
我的電腦是win10系統(tǒng)的,以下以win10系統(tǒng)為例。其他系統(tǒng)的可以百度自行搜索。
調(diào)的步驟為:1)打開(kāi)我的電腦
2)選擇查看
3)勾選文件擴(kuò)展名
調(diào)整完成后,以后再新建記事本就會(huì)看到擴(kuò)展名了。
2. 打開(kāi)記事本,在里面寫(xiě)一個(gè)標(biāo)記<a href="http://www.baidu.com">百度</a>
注意:<a></a> 這個(gè)就是html眾多標(biāo)記中的一個(gè)標(biāo)記,我們叫做a標(biāo)記,這個(gè)<a>叫a標(biāo)記的開(kāi)始,這個(gè)</a>叫做a標(biāo)記的結(jié)束。他們兩個(gè)是天生一對(duì)。href=”http://www.baidu.com”,這個(gè)就是百度的網(wǎng)址,只有寫(xiě)了這個(gè),才知道是要去百度,你要不寫(xiě),那誰(shuí)知道你要去哪里呢。當(dāng)然這個(gè)網(wǎng)址你也可以改成騰訊或者是新浪的網(wǎng)址。
3. 將記事本的txt后綴名改為html。(我這里不光改了后綴名,也將新建文本文檔改為了index)。
注意,你改完以后的圖標(biāo)可能和我的不一樣,這是因?yàn)槲野惭b的是360瀏覽器,你安裝是其他瀏覽器,所以不一樣。不一樣是正常的。
4. 雙擊打開(kāi)這個(gè)文件。
雙擊打開(kāi)以后,我會(huì)看到兩個(gè)帶下劃線(xiàn)的字——百度。
5. 點(diǎn)擊百度兩個(gè)字,我們就可以跳轉(zhuǎn)到百度官網(wǎng)了。
總結(jié):
1.本文粗略介紹了超文本標(biāo)記語(yǔ)言的意思
2.動(dòng)手實(shí)踐寫(xiě)了一個(gè)a標(biāo)記
3.實(shí)踐之前的一些準(zhǔn)備(新建記事本,改后綴名)
4.具體介紹了a標(biāo)記的寫(xiě)法,里面包含一個(gè)href(用來(lái)寫(xiě)網(wǎng)址的地方)
編程最重要的是動(dòng)手,看是看不會(huì)的,很多人都是看得特別明白,以為自己已經(jīng)會(huì)了,但是一動(dòng)手大腦就一片空白。什么也寫(xiě)不出來(lái)。所以編程最重要的就是要?jiǎng)邮郑瑒?dòng)手一遍強(qiáng)過(guò)看明白十遍。一定要?jiǎng)邮肿鲆槐椤?/span>
Ps:a標(biāo)記一般也叫做a標(biāo)簽,一般我們習(xí)慣叫做a標(biāo)簽。
有什么不懂的地方,可以留言咨詢(xún)。
*請(qǐng)認(rèn)真填寫(xiě)需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。