一文帶你解讀?JavaScript的基本用法

言

相信做網站對JavaScript再熟悉不過了，它是一門腳本語言，不同于Python的是，它是一門瀏覽器腳本語言，而Python則是服務器腳本語言，我們不光要會Python，還要會JavaScript，因為它對做網頁方面是有很大作用的。

JavaScript的基本用法

1.如何使用Js腳本

1).引入Js文件

在頭部標簽中導入腳本標簽并指明腳本文件路徑

<head><script src="XXX.js"></script></head>

2).標簽中使用

<body><script >javascript 語句</script></body>
<head><script >javascript 語句</script></head>

2.數據類型

JavaScript的數據類型分為：

string
number
boolean
array
object
null
undefined

3.注釋

1).單行注釋

以“//”開頭，后面接注釋語句，只能注釋一行

2).多行注釋

/* 注釋語句，可注釋多行 */

4.特殊符號

\n 換行
\t 制表符 
\b 空格 
\r 回車 
\f 換頁符
\\ 反斜杠 
\' 單引號
\" 雙引號
\0 x 八進制代碼x表示的字符(n是0到7中的一個八進制數字)
\x x 十六進制代碼x表示的字符（n是0到F 中的一個十六進制數字）
\u x 十六進制代碼x表示的Unicode字符(n是0到F 中的一個十六進制數字)

5.變量聲明

1).Var聲明

var ss='fsdf'  外部聲明的變量可在全局使用
var ss        也可以不聲明值，也不會產生錯誤，唯一的遺憾是會產生變量提升

2).Const 聲明

const ss=123   不存在變量提升，可生成塊級作用域 ，常用于聲明常量，聲明后必須賦值

3).Let 聲明

let ss=123   不存在變量提升，可生成塊級作用域，常用于聲明變量，

6.控制結構語句

1).If ......Else

var aa=12
if(aa>3){console.log(1)}
else{alert(1)}

可以看出與我們的Python語句略有不同。

2).Do.....While

var i=1
do
 {
 i++;
 console.log(i);
 }
while(i<5)

3).While

var i=1
while(i<5){
    i++;
    console.log(i)
}

4).For

for(let i=1;i<6;i++){
    console.log(i)
}

5).For....In...

#打印了document對象的所有方法
    for(y in document)
        {
            console.log(y)
        }

6.Break、Continue

break    立即終止循環
continue 退出當前循環進入下一個循環

7).標簽語句

指的是標簽后面的語句可由判斷結果自行決定什么時候結束

var i=0
label:while(i<10){
    i++;
    if(i==5){
        break label;
}
    else{
        console.log(i)
}
}

8).With語句

相當于Python中的上下文管理器

var aa='fasdffsa'
        with(aa){
            console.log(aa)
        }

9).Switch語句

var aa=[1,2,3]
    switch(aa){
        case 1:console.log(1);
        break;
        case 2:console.log(2);
        break;
        case 3:console.log(3);
        break;
        default:console.log('fas');
}

10).For....of

for(let val of iterable){
console.log(val)
}

11).For each ..... in

var sum = 0;
var obj = {prop1: 5, prop2: 13, prop3: 8};
for each (var item in obj) {
  sum += item;
}
print(sum); // 輸出"26",也就是5+13+8的值




obj.forEach(function(val,item,array){
      array[item]=val
})

總結

這篇文章主要結束了JavaScript的導入、數據類型、注釋、變量和控制語句。下一篇文章，我們繼續介紹JavaScript，敬請期待！

端學習第三天 2016.12.02

每天我們瀏覽網頁的時候，看到一個標題，點進去就能看到內容，你好奇它是怎么來到我們的面前嗎？它就是html超文本鏈接。

HTML 超鏈接（鏈接）

HTML使用標簽 <a>來設置超文本鏈接。

超鏈接可以是一個字，一個詞，或者一組詞，也可以是一幅圖像，您可以點擊這些內容來跳轉到新的文檔或者當前文檔中的某個部分。

當您把鼠標指針移動到網頁中的某個鏈接上時，箭頭會變為一只小手。

在標簽<a> 中使用了href屬性來描述鏈接的地址。

默認情況下，鏈接將以以下形式出現在瀏覽器中：

· 一個未訪問過的鏈接顯示為藍色字體并帶有下劃線

· 訪問過的鏈接顯示為紫色并帶上下劃線

· 點擊鏈接時，鏈接顯示為紅色并帶上下劃線

提示: "鏈接文本" 不必一定是文本。圖片或其他 HTML 元素都可以成為鏈接。

HTML 鏈接 - target 屬性

使用 Target 屬性，你可以定義被鏈接的文檔在何處顯示。

HTML 連接- id 屬性

id屬性可用于創建在一個HTML文檔書簽標記。

提示: 書簽是不以任何特殊的方式顯示，在HTML文檔中是不顯示的，所以對于讀者來說是隱藏的。

基本的注意事項 - 有用的提示

Note: 請始終將正斜杠添加到子文件夾。假如這樣書寫鏈接：，就會向服務器產生兩次 HTTP 請求。這是因為服務器會添加正斜杠到這個地址，然后創建一個新的請求，就像這樣：。

Html頭部

HTML <head> 元素

<head> 元素包含了所有的頭部標簽元素。在 <head>元素中你可以插入腳本（scripts）, 樣式文件（CSS），及各種meta信息。

可以添加在頭部區域的元素標簽為: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.

HTML <title> 元素

<title> 標簽定義了不同文檔的標題。

<title> 在 HTML/XHTML 文檔中是必須的。

<title> 元素:

· 定義了瀏覽器工具欄的標題

· 當網頁添加到收藏夾時，顯示在收藏夾中的標題

· 顯示在搜索引擎結果頁面的標題

HTML <base> 元素

<base> 標簽描述了基本的鏈接地址/鏈接目標，該標簽作為HTML文檔中所有的鏈接標簽的默認鏈接:

HTML <link> 元素

HTML <style> 元素

HTML <meta> 元素

meta標簽描述了一些基本的元數據。

META元素通常用于指定網頁的描述，關鍵詞，文件的最后修改時間，作者，和其他元數據。

元數據可以使用于瀏覽器（如何顯示內容或重新加載頁面），搜索引擎（關鍵詞），或其他Web服務。

HTML <script> 元素

簡單記于下表

只看這些，可能會有一些迷茫，這都是什么意思啊，該怎么用啊，下面我舉一些例子，有助于大家能很好的理解。

<!DOCTYPE html>

<html>

<head>

<title>Title of the document</title>

</head>

<body>

The content of the document......

</body>

</html>

以上是關于<head>的一個小例子。

<head>

</head>

<base>的一個例子。

<head>

</head>

<link>的用法

<head>

body {background-color:yellow}

p {color:blue}

</style>

</head>

<style>的用法

看完這些是不是感覺好多了，只聽這些空洞的東西確實是很難懂，我也是，不過看過例子后，自己再練習之后，那感覺慢慢的就上來了。

HTML 樣式- CSS

CSS（Cascading Style Sheet）可譯為“層疊樣式表”或“級聯樣式表”，它定義如何顯示 HTML 元素，用于控制Web頁面的外觀。通過使用CSS實現頁面的內容與表現形式分離，極大提高了工作效率。樣式存儲在樣式表中，通常放在<head>部分或存儲在外部CSS文件中。作為網頁標準化設計的趨勢，CSS取得了瀏覽器廠商的廣泛支持，正越來越多的被應用到網頁設計中去。

網頁現在的新標準是W3C。目前的模式是html+css+javascript，如何理解呢，就是html是網頁的結構，CSS是網頁的樣式，javascript是行為。結構就是蓋房子先要把結構建出來，然后用CSS來裝飾。其實你在用dreamweaver做網頁時就已經用到了CSS，比如你用DW的屬性面板來設置一個字的字體、顏色和大小，當你選好后，就會自動生成一個.style1的紅色代碼，在<style></style>之間不知道你注意過沒有，這就是CSS。

CSS (Cascading Style Sheets) 用于渲染HTML元素標簽的樣式.

如何使用CSS

CSS 是在 HTML 4 開始使用的,是為了更好的渲染HTML元素而引入的.

CSS 可以通過以下方式添加到HTML中:

· 內聯樣式- 在HTML元素中使用"style"屬性

· 內部樣式表 -在HTML文檔頭部 <head> 區域使用<style>元素來包含CSS

· 外部引用 - 使用外部 CSS文件

最好的方式是通過外部引用CSS文件.

內聯樣式

當特殊的樣式需要應用到個別元素時，就可以使用內聯樣式。使用內聯樣式的方法是在相關的標簽中使用樣式屬性。樣式屬性可以包含任何 CSS 屬性。以下實例顯示出如何改變段落的顏色和左外邊距。

HTML樣式實例 - 背景顏色

背景色屬性（background-color）定義一個元素的背景顏色：

例如：

<!DOCTYPE html>

<html>

<h2 style="background-color:red;">This is a heading</h2>

<p style="background-color:green;">This is a paragraph.</p>

</body>

</html>

HTML 樣式實例 - 字體, 字體顏色，字體大小

我們可以使用font-family（字體），color（顏色），和font-size（字體大小）屬性來定義字體的樣式:

現在通常使用font-family（字體），color（顏色），和font-size（字體大小）屬性來定義文本樣式，而不是使用<font>標簽。

內部樣式表

當單個文件需要特別樣式時，就可以使用內部樣式表。你可以在<head> 部分通過 <style>標簽定義內部樣式表:

<head>

body {background-color:yellow;}

p {color:blue;}

</style>

</head>

外部樣式表

當樣式需要被應用到很多頁面的時候，外部樣式表將是理想的選擇。使用外部樣式表，你就可以通過更改一個文件來改變整個站點的外觀。

<head>

</head>

HTML 圖像- 圖像標簽（<img>）和源屬性（Src）

在 HTML 中，圖像由<img> 標簽定義。

<img> 是空標簽，意思是說，它只包含屬性，并且沒有閉合標簽。

要在頁面上顯示圖像，你需要使用源屬性（src）。src 指 "source"。源屬性的值是圖像的 URL 地址。

定義圖像的語法是：

URL 指存儲圖像的位置。如果名為 "boat.gif" 的圖像位于 www.w3cschool.cn 的 images 目錄中，那么其 URL 為 http://www.w3cschool.cn/images/boat.gif。

T瀏覽器將圖像顯示在文檔中圖像標簽出現的地方。如果你將圖像標簽置于兩個段落之間，那么瀏覽器會首先顯示第一個段落，然后顯示圖片，最后顯示第二段。

HTML 圖像- Alt屬性

alt 屬性用來為圖像定義一串預備的可替換的文本。

替換文本屬性的值是用戶定義的。

在瀏覽器無法載入圖像時，替換文本屬性告訴讀者她們失去的信息。此時，瀏覽器將顯示這個替代性的文本而不是圖像。為頁面上的圖像都加上替換文本屬性是個好習慣，這樣有助于更好的顯示信息，并且對于那些使用純文本瀏覽器的人來說是非常有用的。

HTML 圖像- 設置圖像的高度與寬度

height（高度）與 width（寬度）屬性用于設置圖像的高度與寬度。

屬性值默認單位為像素:

提示: 指定圖像的高度和寬度的一個很好的習慣。如果圖像指定了高度寬度，頁面加載時就會保留指定的尺寸。如果沒有指定圖片的大小，加載頁面時有可能會破壞HTML頁面的整體布局。

基本的注意事項 - 有用的提示：

注意: 假如某個 HTML 文件包含十個圖像，那么為了正確顯示這個頁面，需要加載 11 個文件。加載圖片是需要時間的，所以我們的建議是：慎用圖片。

注意: 加載頁面時，要注意插入頁面圖像的路徑，如果不能正確設置圖像的位置，瀏覽器無法加載圖片，圖像標簽就會顯示一個破碎的圖片。

HTML 表格

表格由<table>標簽來定義。每個表格均有若干行（由<tr> 標簽定義），每行被分割為若干單元格（由<td>標簽定義）。字母 td 指表格數據（table data），即數據單元格的內容。數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。

表格實例

<tr>

</tr>

<tr>

</tr>

</table>

在瀏覽器顯示如下：:

row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

HTML 表格和邊框屬性

如果不定義邊框屬性，表格將不顯示邊框。有時這很有用，但是大多數時候，我們希望顯示邊框。

使用邊框屬性來顯示一個帶有邊框的表格：

<tr>

</tr>

</table>

HTML 表格表頭

表格的表頭使用標簽進行定義。

大多數瀏覽器會把表頭顯示為粗體居中的文本：

<tr>

<th>Header 1</th>

<th>Header 2</th>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

在瀏覽器顯示如下：

Header 1	Header 2
row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

哇哦，今天干貨有點多，我得好好消化一下，各位學友，歡迎留言討論，還有路過的大神，看到不正確的地方一定要留言指出，指引我們如何能更好的學習前端，對于這個與時俱進的技術，每天的不學習就是一種退步。

lt;div>層元素
簡介: 在頁面層元素<div>用來將頁面內容分割成各個獨立的部分是塊級元素。
用途：在每個<div>元素中，不僅可以包含文本內容，也可以包含圖片、表單等其它內容，屬性：在默認的情況下，<div>元素所包含的內容，將在新的一行顯示
總結：塊級元素，獨占一行

id 標記屬性
簡介：給元素定義唯一標識
好處：方便在元素中使用行為
擴展：類似class屬性的作用，用來調用級聯樣式表

class 調用樣式屬性
簡介：class屬性用來調用層疊樣式表，也可以調用使用<link>元素鏈接外部樣式表。
好處：方便使用和更改

實例：


  <!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8" />
		<title>demo</title>
		<style>
			.idepy{
				color: sandybrown;
				font-size: 35px;
			}
		</style>
	</head>
	<body>
<p class="idepy">伊迪派</p>
	</body>
</html>

style 樣式屬性
簡介：頁面主體元素的樣式屬性，用來給頁面內容定義級聯樣式表.
用途：包含style屬性、class屬性
理解：style是樣式，想創建那個元素的樣式，就寫上那個元素的類型進行設置

實例：

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8" />
		<title>demo</title>
		<style>
			body{
				color: red;
				font-size: 55px;
			}
		</style>
	</head>
	<body>
伊迪派
	</body>
</html>

align 對齊屬性
簡介：對齊屬性用來定義內容的水平對齊方式
用途:使用對齊屬性，不僅可以控制文本內容的對齊，也可以控制文本中圖片等內容的對齊

實例：

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8" />
		<title>demo</title>
		<style>
			body{
				text-align: center;
			}
		</style>
	</head>
	<body>
我會居中顯示
	</body>
</html>

<p> 段落元素
簡介：用來定義一個段落
用途：可以包含文本、圖片，以及用來修飾文本的元素，被<p>元素包含的內容，默認的顯示方式是換行顯示
理解：塊級元素，獨占一行

實例:

<p>段落元素</p>
<p>段落元素</p>
<p>段落元素</p>
<p>段落元素</p>

<br> 換行元素
簡介：換行元素<br>用來使被分割的文本換行顯示

實例：

 換行元素<br>我在下一行

<pre> 保留格式元素
簡介：保留格式元素<pre>用來使包含的內容，按照文檔源代碼的格式顯示
用法：因為瀏覽器的默認顯示方式中，將壓縮多個空格為一個，同時忽略換行等空白符號

實例：

<pre>
	我是測試文本                                     前面空格被保留
	我不需要換行符
</pre>

<hr> 水平分割線元素
簡介：水平分割線元素<hr>用一條一定高度的分割線，分割頁面內容
高度屬性：水平分割線的厚度屬性size，用來定義水平分割線的粗細
寬度屬性：水平分割線的寬度屬性width，用來定義水平分割線的寬度
注意：style內定義高度寬度屬性徐加px

實例：

<hr size="5" width="500">

<b> 加粗元素
簡介：用來使包含的文本加粗顯示
理解：是一個物理標簽，它所包圍的字符將被設為bold（粗體）

實例：

<b>加粗元素</b>

<i> 斜體顯示元素
簡介：用來使包含的文本內容以斜體的方式顯示
理解：是一個物理標簽，它所包圍的字符將被設為Italic(斜體)

實例

<i>斜體顯示元素</i>

<em> 斜體強調元素

<em>斜體強調元素</em>

<strong> 加粗強調元素
簡介：是一個邏輯標簽，它的作用是加強字符的語氣一般來說，加強字符的語氣是通過將字符變為bold（粗體）來實現的。

實例：

<strong>加粗強調元素</strong>

<big> 放大元素
簡介：放大元素<big> 用來使包含的文本增大一號顯示
注意：當文本內容已經是最大字號時，將不能繼續增大。

實例:

我是沒有放大<big>我是被放大一號的<big>

<small> 縮小元素
簡介：縮小元素<small> 用來使包含的文本縮小一號顯示
注意：當文本內容已經是最小字號時，將不能繼續變小。

實例：

我是沒有縮小<small>我是被縮小一號的</small>

<sup> 上標元素
簡介：用來使包含的文本內容以上標的方式顯示
用途：元素中的文本的底部，將在普通文本的一半高度上顯示

實例：

上標元素<sup>我是上標部分</sup>

<sub> 下標元素
簡介：用來使包含的文本內容以下標的方式顯示
用途：元素中的文本的頂部，將在普通文本的一半高度上顯示

實例：

下標元素<sub>我是下標部分</sub>

在線咨詢

上一篇：好的紀錄片為孩子打開一扇看世界的窗 #推薦鏈接#
下一篇：前端編程基礎：CSS的盒子模型（Margin、Border、Padding）？

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

一文帶你解讀?JavaScript的基本用法

言

JavaScript的基本用法

1.如何使用Js腳本

1).引入Js文件

2).標簽中使用

2.數據類型

3.注釋

1).單行注釋

2).多行注釋

4.特殊符號

5.變量聲明

1).Var聲明

2).Const 聲明

3).Let 聲明

6.控制結構語句

1).If ......Else

2).Do.....While

3).While

4).For

5).For....In...

6.Break、Continue

7).標簽語句

8).With語句

9).Switch語句

10).For....of

11).For each ..... in

總結

您的項目需求