javascript每日必學(xué)之基礎(chǔ)入門
從今天開始，我將帶領(lǐng)新朋友們，從了解javascript開始，一步一步地進(jìn)階到大神境界，別的不廢話，現(xiàn)在開始，我們就一點(diǎn)一點(diǎn)地從入門階段開始。
我們還是介紹一下javascript的身世，不然，大家會(huì)對(duì)javascript存在非常大的誤解，它的產(chǎn)生歷史，我們就過于多說，我也記不住，上學(xué)開始?xì)v史也沒及過格
js與我們經(jīng)常用來開發(fā)后臺(tái)程序的java語言不是什么親戚，他們的使用范圍也是相差非常遠(yuǎn)，js只是用在html，用來對(duì)document節(jié)點(diǎn)進(jìn)行增刪改查，構(gòu)建與服務(wù)器通訊的一種解釋性語言而已，這只是最簡單的理解，后面我們來對(duì)javascript進(jìn)行詳細(xì)深入的學(xué)習(xí)，好了，我們就從語法開始，雖然，我說了不再廢話，但是，我感覺我仍然還是這么啰嗦，好了，大家也不要介意，想修煉成大神的朋友們，也請(qǐng)忍耐一下我這習(xí)慣。
還得聲明一點(diǎn)，看此文章的人，默認(rèn)是有HTML基礎(chǔ)的朋友如果連下面的代碼還不理解的人，就請(qǐng)先理解之后，再來修煉，獨(dú)門秘笈也不是一般人能夠修煉的，萬一走火入魔了呢，怎么辦？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
</head>
<body>
<h1>javascript大神修煉記</h1>
<div>………………</div>
<script type="text/javascript">
function MyFun(){
……
}
</script>
</body>
</html>
這樣的代碼，大家就應(yīng)該很熟悉了吧，我還得說一點(diǎn)的就是，script標(biāo)簽跟大家在課本上面看到的寫法不一樣，我是寫在body標(biāo)簽里面，而且還是寫在body標(biāo)簽最后面，這是因?yàn)榫W(wǎng)頁的加載順序，是從上往下，按節(jié)點(diǎn)渲染，資源也是從上往下，逐個(gè)加載，至于資源響應(yīng)速度，就與服務(wù)器和當(dāng)前的訪問情況而論了，這是題外話了。頁面從上向往下逐個(gè)渲染到script標(biāo)簽時(shí)候，就開始解析javascript代碼，如果javascript代碼存在對(duì)document節(jié)點(diǎn)有操作的情況，那么，它才能正確地得到節(jié)點(diǎn)對(duì)象，不然，就會(huì)存在代碼執(zhí)行出錯(cuò)的風(fēng)險(xiǎn)。所以我們的script標(biāo)簽就沒有寫在head標(biāo)簽里面。
我們?cè)賮砜匆幌抡Z法，我們先用程序入門的方式進(jìn)行講解，不然，直接操作document節(jié)點(diǎn)，某些朋友可能會(huì)接受不了，說到程序，大家后面還得接觸OOP，所以我們現(xiàn)在講 類，函數(shù)，變量，如果你覺得陌生，不要怕，我曾經(jīng)也是這樣，但是，逐漸地我就能理解了，相信你也一樣，在javascript里面，類和函數(shù)有互相轉(zhuǎn)化的概念，所以還存在很多理解上問題，所以我決定，就從函數(shù)開始講，先不讓大家接觸類的概念
function WriteMyName(){
console.log("My name is MrDream");
}
WriteMyName();
我這是用chrome瀏覽器，按一下F12，進(jìn)入console面板，對(duì)代碼進(jìn)行調(diào)試，大家也要習(xí)慣用這個(gè)瀏覽器，后面大家看我調(diào)試的多了，大家也會(huì)喜歡上這款瀏覽器，自然也會(huì)習(xí)慣用它來進(jìn)行代碼調(diào)試。
前面我用function關(guān)鍵字聲明了一個(gè)函數(shù)WriteMyName，在方法體里面我只寫了一句簡單的console.log("My name is MrDream")，然后，直接用函數(shù)名加一個(gè)括號(hào)
WriteMyName()，這樣就可以執(zhí)行前面的函數(shù)體里面的內(nèi)容了，里面的內(nèi)容就是，打印一句話，打印的內(nèi)容是My name is MrDream，現(xiàn)在大家只要明白 console.log就是打印的意思就行了。
簡單小結(jié)一下函數(shù)體聲明語法 function 函數(shù)名(){函數(shù)體}
下面我們?cè)賮砜匆幌?，帶參?shù)的函數(shù)
function WriteMyName(_your_name){
console.log(_your_name);
}
WriteMyName("My name is MrDream");
現(xiàn)在聲明的函數(shù)跟前面的函數(shù)區(qū)別就是，打印的內(nèi)容是用參數(shù)形式進(jìn)行傳遞，那么帶的好處就是，我們之前調(diào)用WriteMyName()的時(shí)候，只是打印里面固定的內(nèi)容，然而現(xiàn)在，我們就可以這樣寫WriteMyName("馬大哈")，一對(duì)雙引號(hào)里面寫入任意一個(gè)名字，我們就可以打印出來了，是不是更方便了啊，我們?cè)賮砜匆幌?/p>
靈活性就比之前的高多了，我們可以給函數(shù)體傳遞任意的字符串名字了，大家記住了，字符串，一定要帶上外面的一對(duì)引號(hào)，不然，會(huì)出錯(cuò)，目前的你還不能理解，這是為什么，接下來，我們會(huì)繼續(xù)講變量的聲明，首先，我們得理解，變量是什么，變量的作用
var five = 5;
var six = 6;
function add(){
console.log(five+six);
}
我們同樣是使用函數(shù)名+括號(hào)進(jìn)行函數(shù)調(diào)用 add()，我們來看一下效果
函數(shù)體里面仍然是一句打印語句，打印的結(jié)果是11，5+6=11，沒有錯(cuò)吧，如果我們要做其他值的加法，怎么辦呢？是不是要修改變量呢，對(duì)了，前面的var就是用來聲明變量的關(guān)鍵字，我們聲明了一個(gè)five和一個(gè)six,并且給他們賦值，然后，打印這兩個(gè)變量相加。
是不是覺得我們每次想打印的時(shí)候，都要修改函數(shù)體里面的變量，這樣就很麻煩了，那們我們來試一個(gè)傳遞參數(shù)的函數(shù)
var five = 5;
var six = 6;
function add(num1,num2){
console.log(num1+num2);
}
add(five,six);
我們?cè)诤瘮?shù)num1,num2處的位置分別傳入了變量five,six同樣打印出來正確的結(jié)果，這樣，我們就可以方便地傳入其他的值了
現(xiàn)在看一下，我們可以傳入變量，也可以傳入數(shù)字，正負(fù)均可，如果需要使用不固定的值在函數(shù)體進(jìn)行計(jì)算的時(shí)候，我們就需要把這個(gè)函數(shù)寫在帶參數(shù)的函數(shù)。
總結(jié)一下，我們今天學(xué)會(huì)了什么？
第一，javascript是用來干什么的
第二，javsscript代碼放在頁面的什么位置最合適
第三，變量的聲明，用什么關(guān)鍵字
第四，我們學(xué)會(huì)了函數(shù)的聲明（帶參數(shù)，不帶參數(shù)，帶參數(shù)的原因），用什么關(guān)鍵字
哈哈 離大神又更近了一步，希望大家再接再厲，堅(jiān)持下去，一定會(huì)有所收獲。
相關(guān)文章
本文主要介紹使用javacript獲取當(dāng)前屏幕大小的方法，需要的朋友可以參考下。2016-06-06
Webpack 是一個(gè)前端資源加載/打包工具。它將根據(jù)模塊的依賴關(guān)系進(jìn)行靜態(tài)分析，然后將這些模塊按照指定的規(guī)則生成對(duì)應(yīng)的靜態(tài)資源，這篇文章主要介紹了JavaScript中Webpack的使用,需要的朋友可以參考下2021-10-10
用js實(shí)現(xiàn)層隨著內(nèi)容大小動(dòng)態(tài)漸變改變 推薦
以前做谷歌的小工具時(shí)，api里提供了一個(gè)很有用的函數(shù)，那就是在程序運(yùn)行時(shí)可以使層動(dòng)態(tài)隨內(nèi)容大小而變化，而且是平滑變換，在一些jquery的lightbox里也普遍有這種效果，看起來很酷的樣子。2009-12-12
js對(duì)文字進(jìn)行編碼涉及3個(gè)函數(shù)：escape,encodeURI,encodeURIComponent，相應(yīng)3個(gè)解碼函數(shù)：unescape,decodeURI,decodeURIComponent2010-02-02
JavaScript?中如何攔截全局?Fetch?API?的請(qǐng)求和響應(yīng)問題
在本文中，我們介紹了什么是 JavaScript 攔截器，學(xué)習(xí)了如何通過給 Fetch API 使用猴子補(bǔ)丁和使用 fetch-intercept 庫來創(chuàng)建攔截器，對(duì)js攔截全局Fetch?API的請(qǐng)求和響應(yīng)知識(shí)感興趣的朋友跟隨小編一起看看吧2023-01-01
JS實(shí)現(xiàn)六邊形3D拖拽翻轉(zhuǎn)效果的方法
這篇文章給大家分享一個(gè)利用javascript實(shí)現(xiàn)3D六邊形拖拽翻轉(zhuǎn)的效果實(shí)例，實(shí)現(xiàn)后的效果很贊，對(duì)大家的學(xué)習(xí)Javascript具有一定的參考借鑒價(jià)值，有需要的朋友們一起去來看看吧。2016-09-09
javascript中使用replaceAll()函數(shù)實(shí)現(xiàn)字符替換的方法
第一次發(fā)現(xiàn)JavaScript中replace()?方法如果直接用str.replace("-","!")?只會(huì)替換第一個(gè)匹配的字符.2010-12-12
這篇文章主要向大家介紹了javascript事件冒泡，以及javascript阻止事件冒泡的實(shí)現(xiàn)代碼，感興趣的朋友可以參考一下2016-01-01
類似php的js數(shù)組的in_array函數(shù)自定義方法
PHP的數(shù)組函數(shù)in_array()非常方便，下面就為大家介紹下自定義類似php的js數(shù)組的in_array函數(shù)，具體實(shí)現(xiàn)方法如下，感興趣的朋友可以參考下2013-12-12
這篇文章主要為大家詳細(xì)介紹了原生JS生成九宮格，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-06-06