1、你知道,爲何JavaScript很是值得咱們學習嗎?javascript
全部主流瀏覽器都支持JavaScript。css
目前,全世界大部分網頁都使用JavaScript。html
它可讓網頁呈現各類動態效果。java
作爲一個Web開發師,若是你想提供漂亮的網頁、令用戶滿意的上網體驗,JavaScript是必不可少的工具。編程
2、易學性瀏覽器
1.學習環境無外不在,只要有文本編輯器,就能編寫JavaScript程序。編輯器
2.咱們能夠用簡單命令,完成一些基本操做。函數
3、從哪開始學習呢?工具
學習JavaScript的起點就是處理網頁,因此咱們先學習基礎語法和如何使用DOM進行簡單操做。學習
咱們來看看如何寫入JS代碼?你只需一步操做,使用<script>
標籤在HTML網頁中插入JavaScript代碼。注意, <script>
標籤要成對出現,並把JavaScript代碼寫在<script></script>
之間。
<script type="text/javascript">
表示在<script></script>
之間的是文本類型(text),javascript是爲了告訴瀏覽器裏面的文本是屬於JavaScript語言。
經過前面知識學習,咱們知道使用<script>
標籤在HTML文件中添加JavaScript代碼,如圖:
JavaScript代碼只能寫在HTML文件中嗎?固然不是,咱們能夠把HTML文件和JS代碼分開,並單首創建一個JavaScript文件(簡稱JS文件),其文件後綴一般爲.js,而後將JS代碼直接寫在JS文件中。
注意:在JS文件中,不須要<script>
標籤,直接編寫JavaScript代碼就能夠了。
JS文件不能直接運行,需嵌入到HTML文件中執行,咱們需在HTML中添加以下代碼,就可將JS文件嵌入HTML文件中。
<script src="script.js"></script>
咱們能夠將JavaScript代碼放在html文件中任何位置,可是咱們通常放在網頁的head或者body部分。
放在<head>
部分
最經常使用的方式是在頁面中head部分放置<script>
元素,瀏覽器解析head部分就會執行這個代碼,而後才解析頁面的其他部分。
放在<body>
部分
JavaScript代碼在網頁讀取到該語句的時候就會執行。
注意: javascript做爲一種腳本語言能夠放在html頁面中任何位置,可是瀏覽器解釋html時是按前後順序的,因此前面的script就先被執行。好比進行頁面顯示初始化的js必須放在head裏面,由於初始化都要求提早進行(如給頁面body設置css等);而若是是經過事件調用執行的function那麼對位置沒什麼要求的。
JavaScript語句是發給瀏覽器的命令。這些命令的做用是告訴瀏覽器要作的事情。
每一句JavaScript代碼格式: 語句;
先來看看下面代碼
<script type="text/javascript"> alert("hello!"); </script>
例子中的alert("hello!");
就是一個JavaScript語句。
一行的結束就被認定爲語句的結束,一般在結尾加上一個分號";"
來表示語句的結束。
看看下面這段代碼,有三條語句,每句結束後都有";"
,按順序執行語句。
<script type="text/javascript"> document.write("I"); document.write("love"); document.write("JavaScript"); </script>
注意:
「;」
分號要在英文狀態下輸入,一樣,JS中的代碼和符號都要在英文狀態下輸入。
雖然分號「;」
也能夠不寫,但咱們要養成編程的好習慣,記得在語句末尾寫上分號。
註釋的做用是提升代碼的可讀性,幫助本身和別人閱讀和理解你所編寫的JavaScript代碼,註釋的內容不會在網頁中顯示。註釋可分爲單行註釋與多行註釋兩種。
咱們爲了方便閱讀,註釋內容通常放到須要解釋語句的結尾處或周圍。
單行註釋,在註釋內容前加符號 「//」
。
<script type="text/javascript"> document.write("單行註釋使用'//'"); // 我是註釋,該語句功能在網頁中輸出內容 </script>
多行註釋以"/*"
開始,以"*/"
結束。
<script type="text/javascript"> document.write("多行註釋使用/*註釋內容*/"); /* 多行註釋 養成書寫註釋的良好習慣 */ </script>
什麼是變量? 從字面上看,變量是可變的量;從編程角度講,變量是用於存儲某種/某些數值的存儲器。咱們能夠把變量看作一個盒子,爲了區分盒子,能夠用BOX1,BOX2等名稱表明不一樣盒子,BOX1就是盒子的名字(也就是變量的名字)。
定義變量使用關鍵字var
,語法以下:
var 變量名
變量名能夠任意取名,但要遵循命名規則:
1.變量必須使用字母、下劃線(_)
或者美圓符($)
開始。
2.而後可使用任意多個英文字母、數字、下劃線(_)
或者美圓符($)
組成。
3.不能使用JavaScript關鍵詞與JavaScript保留字。
變量要先聲明再賦值,以下:
var mychar; mychar="javascript"; var mynum = 6;
變量能夠重複賦值,以下:
var mychar; mychar="javascript"; mychar="hello";
注意:
在JS中區分大小寫,如變量mychar與myChar是不同的,表示是兩個變量。
變量雖然也能夠不聲明,直接使用,但不規範,須要先聲明,後使用。
if...else語句是在指定的條件成立時執行代碼,在條件不成立時執行else後的代碼。
語法:
if(條件) { 條件成立時執行的代碼 } else { 條件不成立時執行的代碼 }
假設咱們經過年齡來判斷是否爲成年人,如年齡大於等於18歲,是成年人,不然不是成年人。代碼表示以下:
<script type="text/javascript"> var myage = 18; if(myage>=18) //myage>=18是判斷條件 { document.write("你是成年人。");} else //不然年齡小於18 { document.write("未滿18歲,你不是成年人。");} </script>
函數是完成某個特定功能的一組語句。如沒有函數,完成任務可能須要五行、十行、甚至更多的代碼。這時咱們就能夠把完成特定功能的代碼塊放到一個函數裏,直接調用這個函數,就省重複輸入大量代碼的麻煩。
如何定義一個函數呢?基本語法以下:
function 函數名() { 函數代碼; }
說明:
function定義函數的關鍵字。
"函數名"你爲函數取的名字。
"函數代碼"替換爲完成特定功能的代碼。
咱們來編寫一個實現兩數相加的簡單函數,並給函數起個有意義的名字:「add2」,代碼以下:
function add2(){ var sum = 3 + 2; alert(sum); }
函數調用:
函數定義好後,是不能自動執行的,因此需調用它,只需直接在須要的位置寫函數就ok了,代碼以下: