JavaScript零基礎入門
爲何學習JavaScript
1. 全部主流瀏覽器都支持JavaScript。javascript
2. 目前，全世界大部分網頁都使用JavaScript。css
3. 它可讓網頁呈現各類動態效果。html
易學性java
1.學習環境無外不在，只要有文本編輯器，就能編寫JavaScript程序。編程
2.咱們能夠用簡單命令，完成一些基本操做。瀏覽器
目錄：框架
1.JS（JavaScript）的基本知識。編輯器
2.JS經常使用的互動方法。函數
3.JS的DOM操做。工具
一.JS的的基本知識
那麼應該如何插入JS代碼呢？
只需一步操做，使用<script>標籤在HTML網頁中插入JavaScript代碼。如圖所示。
<script></script>標籤要成雙成對。
可是JS不只僅只有寫在HTML文件中，能夠另起爐竈。
能夠把HTML文件和JS代碼分開,並單獨建立一個JavaScript文件(簡稱JS文件),其文件後綴一般爲.js，而後將JS代碼直接寫在JS文件中。
在script.js文件中，則不須要使用<script>標籤了，直接編寫JS代碼便可。
可是分開文件後總得嵌套回去吧。
則須要在HTML文件中加入這行代碼便可。
<script src="script.js"></script>
/* scr = "" 引號中的即爲.js文件的文件名 */
那麼JavaScript代碼應該放在HTML文件的哪裏呢？
：能夠將JavaScript代碼放在html文件中任何位置，可是咱們通常放在網頁的head或者body部分。
放在<head>部分
最經常使用的方式是在頁面中head部分放置<script>元素，瀏覽器解析head部分就會執行這個代碼，而後才解析頁面的其他部分。
放在<body>部分
JavaScript代碼在網頁讀取到該語句的時候就會執行。
注意:
javascript做爲一種腳本語言能夠放在html頁面中任何位置，可是瀏覽器解釋html時是按前後順序的，因此前面的script就先被執行。
好比進行頁面顯示初始化的js必須放在head裏面，由於初始化都要求提早進行（如給頁面body設置css等）；
而若是是經過事件調用執行的function那麼對位置沒什麼要求的。
JavaScript的語句和符號：
每一句JavaScript的代碼格式都是： 語句;
跟Java語言同樣，每一句代碼結束都要用分號結束;
<script type="text/JavaScript">
alter("Hello World!");
</script>
alert("Hello World!");就是一段JavaScript語句段。
這段代碼運行後就行在網頁中浮現一個小窗口上面寫着「Hello World!」的字樣。
注意:
1. 「;」分號要在英文狀態下輸入，一樣，JS中的代碼和符號都要在英文狀態下輸入。
2. 雖然分號「;」也能夠不寫，但咱們要養成編程的好習慣，記得在語句末尾寫上分號。
JavaScript的註釋
//這是單行註釋
/*
這就是多
行註釋了。
*/
跟Java語言一毛同樣。
JavaScript的變量
什麼是變量?
從字面上看，變量是可變的量；
從編程角度講，變量是用於存儲某種/某些數值的存儲器。
咱們能夠把變量看作一個盒子，爲了區分盒子，能夠用BOX1,BOX2等名稱表明不一樣盒子，BOX1就是盒子的名字（也就是變量的名字）。
定義變量使用關鍵字var,語法以下：
var 變量名;
變量也有屬於本身的命名規則（跟Java也是同樣的）
變量名能夠任意取名，但要遵循命名規則:
1.變量必須使用字母、下劃線(_)或者美圓符($)開始。
2.而後可使用任意多個英文字母、數字、下劃線(_)或者美圓符($)組成。
3.不能使用JavaScript關鍵詞與JavaScript保留字。
變量要先聲明再賦值，以下：
var mychar; mychar="javascript"; var mynum = 6;
變量能夠重複賦值，以下：
var mychar; mychar="javascript"; mychar="hello";
JavaScript的變量用關鍵字var,不用像Java中有int，double,boolean...那麼多變量，確實是很易學。
注意:
1. 在JS中區分大小寫，如變量mychar與myChar是不同的，表示是兩個變量。
2. 變量雖然也能夠不聲明，直接使用，但不規範，須要先聲明，後使用。
JavaScript的函數
函數是完成某個特定功能的一組語句。如沒有函數，完成任務可能須要五行、十行、甚至更多的代碼。這時咱們就能夠把完成特定功能的代碼塊放到一個函數裏，直接調用這個函數，就省重複輸入大量代碼的麻煩。
基本語法以下:
function 函數名()
{
函數代碼;
}
說明:
1. function定義函數的關鍵字。
2. "函數名"你爲函數取的名字。
3. "函數代碼"替換爲完成特定功能的代碼。
咱們來編寫一個實現兩數相加的簡單函數,並給函數起個有意義的名字：「add2」，代碼以下：
function add2(){
var sum = 3 + 2;
alert(sum);
}
函數調用:
函數定義好後，是不能自動執行的，因此需調用它,只需直接在須要的位置寫函數就ok了,代碼以下:
二.JS經常使用的互動方法。
1.JavaScript-輸出內容(document.write);
2.JavaScript-警告(alert消息對話框);
3.JavaScipt-確認(confirm消息對話框);
4.JavaScript-提問(prompt消息對話框);
5.JavaScript-打開窗口(window.open);
6.JavaScript-關閉窗口(window.close);
1.JavaScript-輸出內容(document.write);
document.write() 可用於直接向 HTML 輸出流寫內容。簡單的說就是直接在網頁中輸出內容。
第一種:輸出內容用""括起，直接輸出""號內的內容。
<script type="text/javascript">
document.write("I love JavaScript！"); // 內容用" "括起來， ""裏的內容直接輸出。
</script>
第二種:經過變量，輸出內容
<script>
var myChar ="Hello World";
document.write(myChar); //直接寫變量名，輸出變量存儲的內容。
</script>
第三種:輸出多項內容，內容之間用+號鏈接。
<script type="text/javascript"> var mystr="hello"; document.write(mystr+"I love JavaScript"); //多項內容之間用+號鏈接 </script>
第四種:輸出HTML標籤，並起做用，標籤使用""括起來。
<script type="text/javascript">
var mystr="hello";
document.write(mystr+"<br>");//輸出hello後，輸出一個換行符
document.write("JavaScript");
</script>
2.JavaScript-警告(alert消息對話框);
咱們在訪問網站的時候，有時會忽然彈出一個小窗口，上面寫着一段提示信息文字。若是你不點擊「肯定」，就不能對網頁作任何操做，這個小窗口就是使用alert實現的。
語法:
alert(字符串或變量);
看下面代碼：
<script type="text/javascript">
var myNum = 30;
alert("hello!");
alert(myNum);
</script>
效果圖以下：
注:alert彈出消息對話框(包含一個肯定按鈕)。
若是不點擊肯定，則沒法進行任何操做，因此才叫警告框。
注意:
1. 在點擊對話框"肯定"按鈕前，不能進行任何其它操做。
2. 消息對話框一般能夠用於調試程序。
3. alert輸出內容，能夠是字符串或變量，與document.write 類似。
3.JavaScipt-確認(confirm消息對話框)。
confirm 消息對話框一般用於容許用戶作選擇的動做，如：「你對嗎？」等。彈出對話框(包括一個肯定按鈕和一個取消按鈕)。
語法：
confirm(str);
參數說明:
str：在消息對話框中要顯示的文本 返回值: Boolean值
返回值:
當用戶點擊"肯定"按鈕時，返回true 當用戶點擊"取消"按鈕時，返回false
看下面這段代碼：
<script type="text/javascript">
var mymessage=confirm("你喜歡JavaScript嗎?");
if(mymessage==true)
{ document.write("很好,加油!"); }
else
{ document.write("JS功能強大，要學習噢!"); }
</script>
它的結果以下圖：
注: 消息對話框是排它的，即用戶在點擊對話框按鈕前，不能進行任何其它操做。
4.JavaScript-提問（prompt 消息對話框）
prompt //prompt的中文意思爲：提示
prompt彈出消息對話框,一般用於詢問一些須要與用戶交互的信息。彈出消息對話框（包含一個肯定按鈕、取消按鈕與一個文本輸入框）。
語法：
prompt(str1,str2);
參數說明：
str1:要顯示在消息對話框的文本，不可修改。
str2：文本框的內容，能夠修改。
返回值：
1.點擊肯定按鈕，消息對話框中的文本將做爲函數的返回值。
2.點擊取消按鈕，將返回null。
代碼以下：
var myname=prompt("請輸入你的姓名:"); if(myname!=null) { alert("你好"+myname); } else { alert("你好 my friend."); }
效果如圖所示：
5.JavaScript-打開新窗口（window.open）
open() 方法能夠查找一個已經存在或者新建的瀏覽器窗口。
語法：
window.open([URL], [窗口名稱], [參數字符串])
參數說明:
URL：可選參數，在窗口中要顯示網頁的網址或路徑。若是省略這個參數，或者它的值是空字符串，那麼窗口就不顯示任何文檔。
窗口名稱：可選參數，被打開窗口的名稱。
1.該名稱由字母、數字和下劃線字符組成。
2."_top"、"_blank"、"_self"具備特殊意義的名稱。
_blank：在新窗口顯示目標網頁
_self：在當前窗口顯示目標網頁
_top：框架網頁中在上部窗口中顯示目標網頁
3.相同 name 的窗口只能建立一個，要想建立多個窗口則 name 不能相同。
4.name 不能包含有空格。
參數字符串：可選參數，設置窗口參數，各參數用逗號隔開。
參數表：
例如:打開http://www.imooc.com網站，大小爲300px * 200px，無菜單，無工具欄，無狀態欄，有滾動條窗口：
<script type="text/javascript">
window.open('http://www.imooc.com','_blank','width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes'); </script>
注意：運行結果考慮瀏覽器兼容問題。
6.JavaScript-關閉窗口（window.close）
close()關閉窗口。
用法：
window.close(); //關閉本窗口
例如:關閉新建的窗口。
<script type="text/javascript"> var mywin=window.open('http://www.imooc.com'); //將新打的窗口對象，存儲在變量mywin中 mywin.close(); </script>
注意:上面代碼在打開新窗口的同時，關閉該窗口，看不到被打開的窗口。（會看到一陣閃爍~）
三.JS的DOM操做。
1.認識DOM。
2.經過ID獲取屬性。
3.innerHTML屬性。
4.改變HTML樣式。
5.顯示和隱藏（display屬性）。
6.控制類名(className屬性)。
1.認識DOM
文檔對象模型DOM（Document Object Model）定義訪問和處理HTML文檔的標準方法。
DOM 將HTML文檔呈現爲帶有元素、屬性和文本的樹結構（節點樹）。
先來看看下面代碼:
將HTML代碼分解爲DOM節點層次圖:
HTML文檔能夠說由節點構成的集合，三種常見的DOM節點:
1. 元素節點：上圖中<html>、<body>、<p>等都是元素節點，即標籤。
2. 文本節點: 向用戶展現的內容，如<li>...</li>中的JavaScript、DOM、CSS等文本。
3. 屬性節點: 元素屬性，如<a>標籤的連接屬性href="http://www.imooc.com"。
看下面代碼:
<a href="http://www.imooc.com">JavaScript DOM</a>
2.經過ID獲取
學過HTML/CSS樣式，都知道，網頁由標籤將信息組織起來，而標籤的id屬性值是惟一的，就像是每人有一個身份證號同樣，只要經過身份證號就能夠找到相對應的人。那麼在網頁中，咱們經過id先找到標籤，而後進行操做。
語法:
document.getElementById(「id」);
看看下面代碼:
結果:null或[object HTMLParagraphElement]
注:獲取的元素是一個對象，如想對元素進行操做，咱們要經過它的屬性或方法。
結果第一個爲何是NULL：瀏覽器先解析的script ，並且mye 這個變量沒有賦值，你在script中輸出了變量document.write，因此是null。
//而[object HTMLParagraphElement]這個返回值表明的是返回的p標籤元素，而不是p標籤所包含的內容。
3.innerHTML 屬性
innerHTML 屬性用於獲取或替換 HTML 元素的內容。
語法:
Object.innerHTML
注意:
1.Object是獲取的元素對象，如經過document.getElementById("ID")獲取的元素。
2.注意書寫，innerHTML區分大小寫。
咱們經過id="con"獲取<p> 元素，並將元素的內容輸出和改變元素內容，代碼以下:
結果:
4.改變HTML樣式
HTML DOM 容許 JavaScript 改變 HTML 元素的樣式。如何改變 HTML 元素的樣式呢？
語法:
Object.style.property=new style;
注意:Object是獲取的元素對象，如經過document.getElementById("id")獲取的元素。
基本屬性表（property）:
注意:該表只是一小部分CSS樣式屬性，其它樣式也能夠經過該方法設置和修改。
看看下面的代碼:
改變 <p> 元素的樣式，將顏色改成紅色，字號改成20,背景顏色改成藍：
<p id="pcon">Hello World!</p> <script> var mychar = document.getElementById("pcon"); mychar.style.color="red"; mychar.style.fontSize="20"; mychar.style.backgroundColor ="blue"; </script>
結果以下：
5.顯示和隱藏(display屬性)
網頁中常常會看到顯示和隱藏的效果，可經過display屬性來設置。
語法：
Object.style.display = value;
注意:Object是獲取的元素對象，如經過document.getElementById("id")獲取的元素。
value取值:
看看下面代碼:
6.控制類名(className屬性)
className 屬性設置或返回元素的class 屬性。
語法：
object.className = classname
做用:
1.獲取元素的class 屬性
2. 爲網頁內的某個元素指定一個css樣式來更改該元素的外觀
看看下面代碼，得到 <p> 元素的 class 屬性和改變className：
結果:
//入門篇到此結束。是在「慕課網」上COPY過來的，若是看了有些不動懂上慕課網學習，裏面還有例子讓大家練習。
//http://www.imooc.com/learn/36//固然還有加一些本身的話。//有什麼錯誤的話歡迎指點~//點個贊吧，也是用了不少時間喲。
- 1. javascript 零基礎小白入門（一）
- 2. JavaScript零基礎入門——（十）JavaScript的DOM基礎
- 3. JavaScript入門基礎
- 4. JavaScript基礎入門
- 5. javascript 入門基礎
- 6. JavaScript 基礎入門
- 7. Javascript入門基礎
- 8. Javascript基礎入門
- 9. Apache Flink 零基礎入門
- 10. ionic3 零基礎入門（一）
- 更多相關文章...
- • Memcached入門教程 - NoSQL教程
- • Kotlin 基礎語法 - Kotlin 教程
- • YAML 入門教程
- • Java Agent入門實戰（一）-Instrumentation介紹與使用
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 字節跳動21屆秋招運營兩輪面試經驗分享
- 2. Java 3 年，25K 多嗎？
- 3. mysql安裝部署
- 4. web前端開發中父鏈和子鏈方式實現通信
- 5. 3.1.6 spark體系之分佈式計算-scala編程-scala中trait特性
- 6. dataframe2
- 7. ThinkFree在線
- 8. 在線畫圖
- 9. devtools熱部署
- 10. 編譯和鏈接