整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
本教程的這一部分內容是關于 JavaScript 語言本身的。
但是，我們需要一個工作環境來運行我們的腳本，由于本教程是在線的，所以瀏覽器是一個不錯的選擇。我們會盡可能少地使用瀏覽器特定的命令（比如 alert），所以如果你打算專注于另一個環境（比如 Node.js），你就不必多花時間來關心這些特定指令了。我們將在本教程的下一部分中專注于瀏覽器中的 JavaScript。
首先，讓我們看看如何將腳本添加到網頁上。對于服務器端環境（如 Node.js），你只需要使用諸如 "node my.js" 的命令行來執行它。
“script” 標簽
JavaScript 程序可以在 <script> 標簽的幫助下插入到 HTML 文檔的任何地方。
比如：
<!DOCTYPE HTML>
<html>
<body>
<p>script 標簽之前...</p>
<script>
alert('Hello, world!');
</script>
<p>...script 標簽之后</p>
</body>
</html>
<script> 標簽中包裹了 JavaScript 代碼，當瀏覽器遇到 <script> 標簽，代碼會自動運行。
現代的標記
<script> 標簽有一些現在很少用到的屬性，但是我們可以在老代碼中找到它們：
type 屬性：<script type=...>
language 屬性：<script language=...>
腳本前后的注釋：
<script type="text/javascript"><!-- ... //--></script>
外部腳本
如果你有大量的 JavaScript 代碼，我們可以將它放入一個單獨的文件。
腳本文件可以通過 src 屬性添加到 HTML 文件中。
<script src="/path/to/script.js"></script>
這里，/path/to/script.js 是腳本文件從站點根目錄開始的絕對路徑。當然也可以提供當前頁面的相對路徑。例如，src =“script.js” 表示當前文件夾中的 “script.js” 文件。
我們也可以提供一個完整的 URL 地址，例如：
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>
要附加多個腳本，請使用多個標簽：
<script src="/js/script1.js"></script> <script src="/js/script2.js"></script> …
請注意：
一般來說，只有最簡單的腳本才嵌入到 HTML 中。更復雜的腳本存放在單獨的文件中。
使用獨立文件的好處是瀏覽器會下載它，然后將它保存到瀏覽器的緩存[1]中。
之后，其他頁面想要相同的腳本就會從緩存中獲取，而不是下載它。所以文件實際上只會下載一次。
這可以節省流量，并使得頁面（加載）更快。
提醒：如果設置了 src 屬性，script 標簽內容將會被忽略。
一個單獨的 <script> 標簽不能同時有 src 屬性和內部包裹的代碼。
這將不會工作：
<script src="file.js"> alert(1); // 此內容會被忽略，因為設定了 src </script>
我們必須進行選擇，要么使用外部的 <script src="…">，要么使用正常包裹代碼的 <script>。
為了讓上面的例子工作，我們可以將它分成兩個 <script> 標簽。
<script src="file.js"></script> <script> alert(1); </script>
總結
有關瀏覽器腳本以及它們和網頁的關系，還有很多可學的。但是請記住，教程的這部分主要是針對 JavaScript 語言本身的，所以我們不該被瀏覽器特定的實現分散自己的注意力。我們將使用瀏覽器作為運行 JavaScript 的一種方式，這種方式非常便于我們在線閱讀，但這只是很多種方式中的一種。
作業題
1. 顯示一個提示語
重要程度：??????????
創建一個頁面，然后顯示一個消息 “I'm JavaScript!”。
在沙箱中或者在你的硬盤上做這件事都無所謂，只要確保它能運行起來。
你可以先看一下 新窗口的演示結果[2]。
在微信公眾號「技術漫談」后臺回復 1-2-1 獲取本題答案。
2. 使用外部的腳本顯示一個提示語
重要程度：??????????
打開題目 1 的答案。將答案中腳本的內容提取到一個外部的 alert.js 文件中，放置在相同的文件夾中。
打開頁面，確保它能夠工作。
你可以先看一下 新窗口的演示結果[3]。
在微信公眾號「技術漫談」后臺回復 1-2-1 獲取本題答案。
現代 JavaScript 教程：開源的現代 JavaScript 從入門到進階的優質教程。React 官方文檔推薦，與 MDN 并列的 JavaScript 學習教程[4]。
在線免費閱讀：https://zh.javascript.info/
參考資料
[1] 緩存: https://en.wikipedia.org/wiki/Web_cache
[2] 新窗口的演示結果: https://zh.js.cx/task/hello-alert/solution/
[3] 新窗口的演示結果: https://zh.js.cx/task/hello-alert/solution/
[4] React 官方文檔推薦，與 MDN 并列的 JavaScript 學習教程: https://zh-hans.reactjs.org/docs/getting-started.html#javascript-resources
關注微信公眾號「技術漫談」，訂閱更多精彩內容。
TML全局屬性是所有HTML元素共有的屬性。它們可以應用于所有元素，盡管它們可能對某些元素沒有影響。
HTML元素可以設置屬性
屬性可以在元素中添加附加信息
屬性一般描述于開始標簽
屬性總是以名稱/值對的形式出現，比如：name="value"。
屬性和屬性值對大小寫不敏感。不過，萬維網聯盟在其HTML4推薦標準中推薦小寫的屬性/屬性值。而新版本的(X)HTML要求使用小寫屬性。
class：為html元素定義一個或多個類名（classname）(類名從樣式文件引入)
id：定義元素的唯一id
style：規定元素的行內樣式（inlinestyle）
title：描述了元素的額外信息(作為工具條使用)
HTML使用標簽<a>來設置超文本鏈接。超鏈接可以是一個字，一個詞，或者一組詞，也可以是一幅圖像，您可以點擊這些內容來跳轉到新的文檔或者當前文檔中的某個部分。當您把鼠標指針移動到網頁中的某個鏈接上時，箭頭會變為一只小手。默認情況下，鏈接將以以下形式出現在瀏覽器中：
一個未訪問過的鏈接顯示為藍色字體并帶有下劃線。
訪問過的鏈接顯示為紫色并帶有下劃線。
點擊鏈接時，鏈接顯示為紅色并帶有下劃線。
如果為這些超鏈接設置了CSS樣式，展示樣式會根據CSS的設定而顯示。
在標簽<a>中使用了href屬性來描述鏈接的地址。
實例
<a href="https://www.kaikeba.com/">訪問開課吧</a>1復制代碼類型：[html]上面這行代碼顯示為：訪問開課吧
點擊這個超鏈接會把用戶帶到開課吧的首頁。
使用target屬性，你可以定義被鏈接的文檔在何處顯示。
實例
<ahref="https://www.kaikeba.com/"target="_blank">訪問開課吧</a>
target="_blank":在新窗口中打開被鏈接文檔。
target="_self": 默認，在相同的框架中打開被鏈接文檔。
target="_parent":在父框架集中打開被鏈接文檔。
target="_top": 在整個窗口中打開被鏈接文檔。
target=framename:在指定的框架中打開被鏈接文檔。 1234567891011復制代碼類型：[html]HTML圖像標簽及其屬性
在HTML中，圖像由<img>標簽定義。<img>是空標簽，意思是說，它只包含屬性，并且沒有閉合標簽。
要在頁面上顯示圖像，你需要使用源屬性（src）。src指"source"。源屬性的值是圖像的URL地址。
定義圖像的語法是：
<imgsrc="url"alt="some_text"> 1復制代碼類型：[html]URL指存儲圖像的位置。
alt屬性用來為圖像定義一串預備的可替換的文本。在瀏覽器無法載入圖像時，替換文本屬性告訴讀者她們失去的信息。此時，瀏覽器將顯示這個替代性的文本而不是圖像。為頁面上的圖像都加上替換文本屬性是個好習慣，這樣有助于更好的顯示信息，并且對于那些使用純文本瀏覽器的人來說是非常有用的。
height（高度）與width（寬度）屬性用于設置圖像的高度與寬度。屬性值默認單位為像素。
<imgsrc="logo.jpg"alt="kaikeba"width="300"height="120"> 1復制代碼類型：[html]提示:指定圖像的高度和寬度是一個很好的習慣。如果圖像指定了高度寬度，頁面加載時就會保留指定的尺寸。如果沒有指定圖片的大小，加載頁面時有可能會破壞HTML頁面的整體布局。
開課吧廣場-人才學習交流平臺
對象添加方法和屬性
<script type="text/javascript">
// 創建對象
// var 對象名稱 = {成員名稱:成員值,成員名稱:成員值,成員名稱:成員值.....}
var obj = {};
document.write(obj);
var cat = {name:'kitty',"leg":4,climb:function(){document.write("在爬樹")}};
document.write(cat.name);
document.write(cat.leg);
cat["climb"]();
cat.climb();
obj.color = "yellow";
obj.say = function(){
document.write("旺旺");
}
document.write(obj);
</script>實例2：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<script>
function createPerson(name, qq) //構造函數
{
var obj=new Object();
obj.name=name;
obj.qq=qq;
obj.showName=function (){
alert('我的名字叫：'+this.name);
};
obj.showQQ=function (){
alert('我的QQ號：'+this.qq);
};
return obj;
}
var obj=createPerson('blue', '258248832');
obj.showName();
obj.showQQ();
var obj2=createPerson('張三', '45648979879');
obj2.showName();
obj2.showQQ();
</script>
</head>
<body>
</body>
</html>實例3: this指向
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
