javaScript入门基础说明
JavaScript 教程
JavaScript 是 Web 的編程語言。
所有現(xiàn)代的 HTML 頁面都使用 JavaScript。
JavaScript 非常容易學(xué)，本教程將教你打開 JavaScript 的大門
瀏覽器中的 JavaScript 能做什么？
現(xiàn)代的 JavaScript 是一種“安全”語言。
它不提供對內(nèi)存或 CPU 的底層訪問，因為它最初是為瀏覽器創(chuàng)建的，不需要這些功能。
JavaScript 的能力很大程度上依賴于它執(zhí)行的環(huán)境。
例如：Node.js 允許 JavaScript 讀寫任意文件、執(zhí)行網(wǎng)絡(luò)請求等。
瀏覽器中的 JavaScript 可以做與網(wǎng)頁操作、用戶交互和 Web 服務(wù)器相關(guān)的所有事情。
例如，瀏覽器中的 JavaScript 可以完成下面這些事：
- 在網(wǎng)頁中插入新的 HTML，修改現(xiàn)有的網(wǎng)頁內(nèi)容和網(wǎng)頁的樣式。
- 響應(yīng)用戶的行為，響應(yīng)鼠標(biāo)的點擊或移動、鍵盤的敲擊。
- 向遠程服務(wù)器發(fā)送網(wǎng)絡(luò)請求，下載或上傳文件（所謂 AJAX 和 COMET 技術(shù)）。
- 獲取或修改 cookie，向訪問者提出問題、發(fā)送消息。
- 記住客戶端的數(shù)據(jù)（本地存儲）。
瀏覽器中的 JavaScript 不能做什么？
為了用戶的（信息）安全，在瀏覽器中的 JavaScript 的能力是有限的。
這樣主要是為了阻止邪惡的網(wǎng)站獲得或修改用戶的私人數(shù)據(jù)。
這些限制的例子有：
- 網(wǎng)頁中的 JavaScript 不能讀、寫、復(fù)制及執(zhí)行用戶磁盤上的文件或程序。它沒有直接訪問操作系統(tǒng)的功能。
- 現(xiàn)代瀏覽器允許 JavaScript 做一些文件相關(guān)的操作，但是這個操作是受到限制的。僅當(dāng)用戶使用某個特定的動作，JavaScript 才能操作這個文件。例如，把文件“拖”到瀏覽器中，或者通過 <input> 標(biāo)簽選擇文件。
- JavaScript 有很多方式和照相機 / 麥克風(fēng)或者其他設(shè)備進行交互，但是這些都需要提前獲得用戶的授權(quán)許可。所以，啟用了 JavaScript 的網(wǎng)頁應(yīng)該不會偷偷地啟動網(wǎng)絡(luò)攝像頭觀察你，并把你的信息發(fā)送到美國國家安全局。
- 不同的瀏覽器標(biāo)簽頁之間基本彼此不相關(guān)。有時候，也會有一些關(guān)系。例如，一個標(biāo)簽頁通過 JavaScript 打開另外一個新的標(biāo)簽頁。但即使在這種情況下，如果兩個標(biāo)簽頁打開的不是同一個網(wǎng)站（域名、協(xié)議或者端口任一不相同的網(wǎng)站），他們都不能夠相互通信。
- 這就是“同源策略”。為了解決“同源策略”問題，兩個標(biāo)簽頁必須都包含一些處理這個問題的特殊的 JavaScript 代碼，并均允許數(shù)據(jù)交換，這樣才能夠?qū)崿F(xiàn)兩個同源標(biāo)簽頁的數(shù)據(jù)交換。本教程會講到這部分相關(guān)的知識。
- 這個限制也是為了用戶的信息安全。例如，用戶打開的 http://anysite.com 網(wǎng)頁的 JavaScript 肯定不能訪問 http://gmail.com（另外一個標(biāo)簽頁打開的網(wǎng)頁）也不能從那里竊取信息。
- JavaScript 通過互聯(lián)網(wǎng)可以輕松地和當(dāng)前網(wǎng)頁域名的服務(wù)器進行通訊。但是從其他網(wǎng)站 / 域名的服務(wù)器中獲取數(shù)據(jù)的能力是受限的。盡管這可以實現(xiàn)，但是需要來自遠程服務(wù)器的明確協(xié)議（在 HTTP 頭中）。這也是為了用戶的數(shù)據(jù)安全。
- 瀏覽器環(huán)境外的 JavaScript 一般沒有這些限制。例如服務(wù)端的 JavaScript 就沒有這些限制。現(xiàn)代瀏覽器還允許安裝可能會要求擴展權(quán)限的插件或擴展。
第一個 JavaScript 例子
本教程包含了大量的 JavaScript 實例， 您可以自己手動跟著敲來執(zhí)行。
請一定要自己動手敲！！！
下面是一個例子
<!DOCTYPE html> <html lang="En"> <head><meta charset="UTF-8"><title>孫叫獸的博客</title></head> <body> <span>這個是我第一個javascript案例</span> <p id="demo">點擊顯示日期會發(fā)生改變</p> <button type="button" onclick="displayDate();">顯示日期</button> <script>function displayDate(){document.getElementById('demo').innerHTMl=Date();}</script></body> </html>顯示效果：
為什么學(xué)習(xí) JavaScript?
JavaScript web 開發(fā)人員必須學(xué)習(xí)的 3 門語言中的一門：
本教程是關(guān)于 JavaScript 及介紹 JavaScript 如何與 HTML 和 CSS 一起工作。
誰適合閱讀本教程？
- 如果您想學(xué)習(xí) JavaScript，您可以學(xué)習(xí)本教程：
- 了解 JavaScript 是如何與 HTML 和 CSS 一起工作的。
- 如果在此之前您已經(jīng)使用過 JavaScript，您也可以閱讀本教程：
- JavaScript 一直在升級，所以我們需要時刻了解 JavaScript 的新技術(shù)。
比 JavaScript “更好”的語言
不同的人喜歡不同的功能，JavaScript 的語法也不能夠滿足所有人的需求。
這是正常的，因為每個人的項目和需求都不一樣。
所以，最近出現(xiàn)了很多不同的語言，這些語言在瀏覽器中執(zhí)行之前，都會被編譯（轉(zhuǎn)化）成 JavaScript。
現(xiàn)代化的工具使得編譯速度非常快速且透明，實際上允許開發(fā)人員使用另一種語言編寫代碼并將其自動轉(zhuǎn)換為 JavaScript。
這些編程語言的例子有：
- CoffeeScript 是 JavaScript 的語法糖，它語法簡短，明確簡潔。通常使用 Ruby 的人喜歡用。
- TypeScript 將注意力集中在增加嚴格的數(shù)據(jù)類型。這樣就能簡化開發(fā)，也能用于開發(fā)復(fù)雜的系統(tǒng)。TypeScript 是微軟開發(fā)的。
- Flow 也添加了數(shù)據(jù)類型，但是以一種不同的方式。由 Facebook 開發(fā)。
- Dart 是一門獨立的語言。它擁有自己的引擎用于在非瀏覽器環(huán)境中運行（如：手機應(yīng)用），它也能被編譯成 JavaScript 。由 Google 開發(fā)。
還有很多其他的語言。當(dāng)然，即使我們在使用這些語言，我們也需要知道 JavaScript。因為學(xué)習(xí) JavaScript 可以讓我們真正明白我們自己在做什么。
?
JavaScript 簡介
JavaScript 是互聯(lián)網(wǎng)上最流行的腳本語言，這門語言可用于 HTML 和 web，更可廣泛用于服務(wù)器、PC、筆記本電腦、平板電腦和智能手機等設(shè)備。
?
JavaScript 是腳本語言
JavaScript 是一種輕量級的編程語言。
JavaScript 是可插入 HTML 頁面的編程代碼。
JavaScript 插入 HTML 頁面后，可由所有的現(xiàn)代瀏覽器執(zhí)行。
JavaScript 很容易學(xué)習(xí)。
?
您將學(xué)到什么
下面是您將在本教程中學(xué)到的主要內(nèi)容。
<!DOCTYPE html> <html lang="En"> <head><meta charset="UTF-8"><title>孫叫獸的博客</title></head> <body><p>JavaScript 能夠直接寫入 HTML 輸出流中： </p> <script>document.write("<h1>這是一個標(biāo)題</h1>");document.write("<p>這是一個段落。</p>"); </script> <p>您只能在 HTML 輸出流中使用 <strong>document.write</strong>。如果您在文檔已加載后使用它（比如在函數(shù)中），會覆蓋整個文檔。 </p> </body> </html>演示效果：
JavaScript：對事件的反應(yīng)
<!DOCTYPE html> <html lang="En"> <head><meta charset="UTF-8"><title>孫叫獸的博客</title></head> <body><button type="button" onclick="alert('歡迎點我');">點我點我</button> </body> </html>alert() 函數(shù)在 JavaScript 中并不常用，但它對于代碼測試非常方便。
onclick 事件只是您即將在本教程中學(xué)到的眾多事件之一。
?
JavaScript：改變 HTML 內(nèi)容
使用 JavaScript 來處理 HTML 內(nèi)容是非常強大的功能。
<!DOCTYPE html> <html lang="En"> <head><meta charset="UTF-8"><title>孫叫獸的博客</title></head> <body><p id="demo">孫叫獸歡迎你</p> <script>var x;x=document.getElementById('Demo');//查找元素x.innerHTML="你好，javascript";//改變內(nèi)容</script> </body> </html>您會經(jīng)常看到 document.getElementById(”some id”)。這個方法是 HTML DOM 中定義的。
DOM (Document Object Model)（文檔對象模型）是用于訪問 HTML 元素的正式 W3C 標(biāo)準(zhǔn)。
您將在本教程的多個章節(jié)中學(xué)到有關(guān) HTML DOM 的知識。
?
JavaScript：改變 HTML 圖像
本例會動態(tài)地改變 HTML 的來源（src）：
<!DOCTYPE html> <html lang="En"> <head><meta charset="UTF-8"><title>孫叫獸的博客</title></head> <body> <img id="myimage" onclick="changeimage();" src="center.png" width="100px;" height="100px;"> <script>function changeimage(){element=document.getElementById("myimage");if(element.src.match("center")){element.src="center.png";}else {element.src="center.png";}} </script></body> </html>以上實例中代碼 element.src.match(“center”) 的作用意思是：檢索 <img id="myimage" onclick="changeImage()" src="center.png" width="100" height="180"> 里面 src 屬性的值有沒有包含 center這個字符串，如果存在字符串center，圖片 src 更新為center.ong，若匹配不到center 字符串，src 則更新為 center.png
JavaScript 能夠改變?nèi)我?HTML 元素的大多數(shù)屬性，而不僅僅是圖片。
?
JavaScript：改變 HTML 樣式
改變 HTML 元素的樣式，屬于改變 HTML 屬性的變種。
x=document.getElementById("demo") //找到元素x.style.color="#ff0000"; //改變樣式JavaScript：驗證輸入
JavaScript 常用于驗證用戶的輸入。
if isNaN(x) {alert("不是數(shù)字");}以上實例只是普通的驗證，如果要在生產(chǎn)環(huán)境中使用，需要嚴格判斷，如果輸入的空格，或者連續(xù)空格 isNaN 是判別不出來的。可以添加正則來判斷
if(isNaN(x)||x.replace(/(^\s*)|(\s*$)/g,"")==""){alert("不是數(shù)字");}ECMAScript 版本
JavaScript 已經(jīng)由 ECMA（歐洲電腦制造商協(xié)會）通過 ECMAScript 實現(xiàn)語言的標(biāo)準(zhǔn)化。
JavaScript 用法
HTML 中的腳本必須位于 與 標(biāo)簽之間。
腳本可被放置在 HTML 頁面的 和 部分中。
?
?
?
?
?
創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎總結(jié)
以上是生活随笔為你收集整理的javaScript入门基础说明的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 小程序开发从0到1
- 下一篇： 让一个文字在背景图片水平居中的方法