整合營(yíng)銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          web前端開(kāi)發(fā)教程,最全JavaScript入門講解

          是否已經(jīng)初步掌握了html和css,但完全不知道從何入手JavaScript?

          如果是,那么這篇文章一定會(huì)對(duì)你有所幫助,這里總結(jié)了5條建議,幫助JavaScript初學(xué)者總結(jié)學(xué)習(xí)方法,提高學(xué)習(xí)效率。

          1. 多看視頻少看書

          對(duì)初學(xué)者而言,看書的效率是很低的,書上的內(nèi)容大多會(huì)展示核心代碼,而視頻為了演示效果,會(huì)展示全部代碼。初學(xué)者自學(xué)需要的是全部代碼,只看核心代碼必定會(huì)留下踩不完的坑。所以,初學(xué)者一定要多看視頻少看書。

          2. 寫代碼的時(shí)間要多于看書和看視頻的時(shí)間

          學(xué)習(xí)JavaScript,一定要以寫為主,而不是以看為主。學(xué)習(xí)時(shí)間的一半以上要留給寫代碼,剩下的時(shí)間用來(lái)看書和看視頻。幾乎所有初學(xué)者都有這個(gè)問(wèn)題,就是拿一本書(或視頻)看3個(gè)小時(shí)但是一行代碼都沒(méi)寫。這樣的結(jié)果就是,3個(gè)小時(shí)最多只利用了1個(gè)小時(shí)。太浪費(fèi)時(shí)間了。正確的學(xué)習(xí)方法是:看到一行代碼就寫一行代碼,就算理解,抄也得抄下來(lái),然后再去慢慢理解。

          3. 不可盲目追新技術(shù)

          • react,vue,angular,和你沒(méi)關(guān)系
          • node,express,koa,和你沒(méi)關(guān)系
          • grunt,gulp,webpack,和你沒(méi)關(guān)系

          JavaScript這幾年變化很快,但是對(duì)于初學(xué)者來(lái)說(shuō)要摒棄浮躁的氣氛,靜下心來(lái)打好基礎(chǔ)。記住:自己是初學(xué)者,玩的東西就是:JavaScript和jQuery,工具就用一個(gè)編輯器和一個(gè)瀏覽器,這些就夠了,別的不要碰.

          4. jQuery還沒(méi)過(guò)時(shí)

          有些朋友會(huì)說(shuō)jQuery已經(jīng)淘汰了,jQuery確實(shí)注定要被淘汰,但是現(xiàn)在還差得遠(yuǎn)呢。

          首先,jquery對(duì)于初學(xué)者非常友好,甚至不會(huì)js都可以學(xué)jQuery。并且目前市面上的網(wǎng)站和應(yīng)用,仍然是jQuery居多,所以如果你是自學(xué),jQuery是必學(xué)的。

          5. 學(xué)習(xí)的順序

          熟悉基本概念:變量,數(shù)據(jù)類型,函數(shù),運(yùn)算符,表達(dá)式,對(duì)象(自定義對(duì)象,內(nèi)置對(duì)象)。

          這些基本概念一定要熟悉,熟悉到什么程度,看見(jiàn)一個(gè)概念,立刻就能寫出示例代碼,就夠了。

          2.熟悉DOM:樹(shù)狀結(jié)構(gòu),節(jié)點(diǎn)分類,添加節(jié)點(diǎn),刪除節(jié)點(diǎn),修改屬性,綁定事件。

          3.熟悉jQuery:選擇器、操作屬性和樣式、綁定事件、節(jié)點(diǎn)操作、動(dòng)畫方法。

          4.用jQuery實(shí)現(xiàn)網(wǎng)頁(yè)上看到的頁(yè)面效果,比如輪播圖,菜單的各種效果,返回頂部等。

          5.試著用原生的js實(shí)現(xiàn)jQuery的常用方法。比如addClass,removeClass,index這些。

          上面5條如果沒(méi)能做到,就不要想著閉包,原型繼承,ES6新特性這些東西了

          JavaScript 簡(jiǎn)介

          JavaScript 是世界上最流行的編程語(yǔ)言。

          這門語(yǔ)言可用于 HTML 和 web,更可廣泛用于服務(wù)器、PC、筆記本電腦、平板電腦和智能手機(jī)等設(shè)備。

          • JavaScript 是腳本語(yǔ)言
          • JavaScript 是一種輕量級(jí)的編程語(yǔ)言。
          • JavaScript 是可插入 HTML 頁(yè)面的編程代碼。
          • JavaScript 插入 HTML 頁(yè)面后,可由所有的現(xiàn)代瀏覽器執(zhí)行。
          • JavaScript 很容易學(xué)習(xí)。
          • JavaScript:寫入 HTML 輸出

          實(shí)例

          document.write("<h1>This is a heading</h1>");
          document.write("<p>This is a paragraph</p>");

          JavaScript:對(duì)事件作出反應(yīng)

          實(shí)例

          <button type="button" onclick="alert('Welcome!')">點(diǎn)擊這里</button>

          alert() 函數(shù)在 JavaScript 中雖然并不常用,但它對(duì)于代碼測(cè)試非常方便。

          onclick 事件只是您即將在本教程中學(xué)到的眾多事件之一。

          JavaScript:改變 HTML 內(nèi)容

          使用 JavaScript 來(lái)處理 HTML 內(nèi)容是非常強(qiáng)大的功能。

          實(shí)例

          x=document.getElementById("demo")  //查找元素
          x.innerHTML="Hello JavaScript";    //改變內(nèi)容

          你會(huì)經(jīng)常看到 document.getElementByID("some id")。這個(gè)方法是 HTML DOM 中定義的。

          DOM(文檔對(duì)象模型)是用于訪問(wèn) HTML 元素的正式 W3C 標(biāo)準(zhǔn)。

          JavaScript:改變 HTML 圖像

          本例會(huì)動(dòng)態(tài)地改變 HTML <image>的來(lái)源 (src):

          The Light bulb

          點(diǎn)擊燈泡就可以打開(kāi)或關(guān)閉這盞燈

          JavaScript 能夠改變?nèi)我?HTML 元素的大多數(shù)屬性,而不僅僅是圖片。

          JavaScript:改變 HTML 樣式

          改變 HTML 元素的樣式,屬于改變 HTML 屬性的變種。

          實(shí)例

          x=document.getElementById("demo")  //找到元素
          x.style.color="#ff0000";           //改變樣式

          JavaScript:驗(yàn)證輸入

          JavaScript 常用于驗(yàn)證用戶的輸入。

          實(shí)例

          if isNaN(x) {alert("Not Numeric")};

          JavaScript學(xué)習(xí)教程

          JavaScript學(xué)習(xí)教程推薦小伙伴們看動(dòng)力節(jié)點(diǎn)老杜講解的web前端全套教程,這個(gè)教程是將多年的編程經(jīng)驗(yàn)灌輸其中,典型的實(shí)踐派,既適合初學(xué)者入門,也適合進(jìn)階(學(xué)習(xí)底層)。

          主要講解了前端開(kāi)發(fā)中的核心技術(shù)JavaScript,俗稱JS,視頻中講解了JavaScript核心語(yǔ)法、JavaScript內(nèi)置支持類、JavaScript調(diào)試、JavaScript DOM編程、JavaScript BOM編程、大量前端小案例、JavaScript事件處理、JavaScript對(duì)象、繼承、JSON等知識(shí)點(diǎn),該視頻可以開(kāi)啟你的WEB前端之路。

          http://www.bjpowernode.com/?toutiaoweb.chai

          學(xué)習(xí)目錄

          • JavaScript教程
          • JavaScript語(yǔ)言特點(diǎn)
          • JavaScript組成
          • JavaScript中BOM和DOM之間的關(guān)系及主流瀏覽器
          • JavaScript開(kāi)發(fā)工具
          • JavaScript基礎(chǔ)語(yǔ)法
          • HTML嵌入JavaScript
          • JavaScript注釋
          • JavaScript標(biāo)識(shí)符
          • JavaScript保留關(guān)鍵字
          • JavaScript內(nèi)置類型
          • JavaScript變量
          • JavaScript函數(shù)
          • JavaScript數(shù)據(jù)類型
          • JavaScript的typeof運(yùn)算符
          • JavaScript創(chuàng)建對(duì)象
          • JavaScript Void
          • JavaScript中 null、NaN和undefined的區(qū)別
          • JavaScript流程控制語(yǔ)句
          • JavaScript事件和事件句柄
          • JavaScript常用事件及事件句柄
          • JavaScript注冊(cè)事件的方式
          • JavaScript HTML DOM對(duì)象
          • JavaScript HTML DOM 對(duì)象
          • JavaScript BOM編程
          • JavaScript window對(duì)象
          • JavaScript history對(duì)象與location對(duì)象
          • JavaScript JSON

          文本標(biāo)記語(yǔ)言 (英語(yǔ):Hypertext Markup Language,簡(jiǎn)稱:HTML ) 是一種用來(lái)結(jié)構(gòu)化 Web 網(wǎng)頁(yè)及其內(nèi)容的標(biāo)記語(yǔ)言。網(wǎng)頁(yè)內(nèi)容可以是:一組段落、一個(gè)重點(diǎn)信息列表、也可以含有圖片和數(shù)據(jù)表。正如標(biāo)題所示,本文將對(duì) HTML 及其功能做一個(gè)基本介紹。

          HTML 到底是什么?

          HTML 不是一門編程語(yǔ)言,而是一種用于定義內(nèi)容結(jié)構(gòu)的標(biāo)記語(yǔ)言。HTML 由一系列的元素(elements組成,這些元素可以用來(lái)包圍不同部分的內(nèi)容,使其以某種方式呈現(xiàn)或者工作。 一對(duì)標(biāo)簽( tags)可以為一段文字或者一張圖片添加超鏈接,將文字設(shè)置為斜體,改變字號(hào),等等。 例如,鍵入下面一行內(nèi)容:

          學(xué)前端,關(guān)注艾編程

          可以將這行文字封裝成一個(gè)段落(paragraph)元素來(lái)使其在單獨(dú)一行呈現(xiàn):

          <p>學(xué)前端,關(guān)注艾編程</p>

          HTML 元素詳解

          讓我們深入探索一下這個(gè)段落元素。

          這個(gè)元素的主要部分有:

          屬性應(yīng)該包含:

          1. 在屬性與元素名稱(或上一個(gè)屬性,如果有超過(guò)一個(gè)屬性的話)之間的空格符。
          2. 屬性的名稱,并接上一個(gè)等號(hào)。
          3. 由引號(hào)所包圍的屬性值。

          注:不包含 ASCII 空格(以及 " ' ``=<>` )的簡(jiǎn)單屬性值可以不使用引號(hào),但是建議將所有屬性值用引號(hào)括起來(lái),這樣的代碼一致性更佳,更易于閱讀。

          嵌套元素

          也可以將一個(gè)元素置于其他元素之中 —— 稱作嵌套。要表明貓咪非常暴躁,可以將 “艾編程” 用 <strong> 元素包圍,爆字將突出顯示:

          <p>學(xué)編程,關(guān)注<strong>艾編程</strong>:)</p>

          必須保證元素嵌套次序正確:本例首先使用 <p>標(biāo)簽,然后是<strong>標(biāo)簽,因此要先結(jié)束<strong>標(biāo)簽,最后再結(jié)束</p>標(biāo)簽。以下這個(gè)示例就是一個(gè)錯(cuò)誤的示范,這樣是不對(duì)的:

          <p>學(xué)編程,關(guān)注<strong>艾編程</p></strong>

          元素必須正確地開(kāi)始和結(jié)束,才能清楚地顯示出正確的嵌套層次。否則瀏覽器就得自己猜測(cè),雖然它會(huì)竭盡全力,但很大程度不會(huì)給你期望的結(jié)果。所以一定要避免!

          空元素

          不包含任何內(nèi)容的元素稱為空元素。比如 `` 元素:

          <img src="images/icodingedulgo.png" alt="艾編程logo">

          本元素包含兩個(gè)屬性,但是并沒(méi)有 </img> 結(jié)束標(biāo)簽,元素里也沒(méi)有內(nèi)容。這是因?yàn)閳D像元素不需要通過(guò)內(nèi)容來(lái)產(chǎn)生效果,它的作用是向其所在的位置嵌入一個(gè)圖像。

          HTML 文檔詳解

          以上介紹了一些基本的 HTML 元素,但孤木不成林。現(xiàn)在來(lái)看看單個(gè)元素如何彼此協(xié)同構(gòu)成一個(gè)完整的 HTML 頁(yè)面。回顧 文件處理 小節(jié)中創(chuàng)建的 index.html 示例:

          <!DOCTYPE html>
          <html>
            <head>
              <meta charset="utf-8">
              <title>入門學(xué)前端的博客,艾編程博客</title>
            </head>
            <body>
              <img src="images/icodingedulgo.png" alt="艾編程logo">
            </body>
          </html>

          這里有:

          • <!DOCTYPE html> — 文檔類型。混沌初分,HTML 尚在襁褓(大約是 1991/92 年)之時(shí),DOCTYPE 用來(lái)鏈接一些 HTML 編寫守則,比如自動(dòng)查錯(cuò)之類。DOCTYPE 在當(dāng)今作用有限,僅用于保證文檔正常讀取。現(xiàn)在知道這些就足夠了。
          • <html></html> — `` 元素。該元素包含整個(gè)頁(yè)面的內(nèi)容,也稱作根元素。
          • <head></head> — `` 元素。該元素的內(nèi)容對(duì)用戶不可見(jiàn),其中包含例如面向搜索引擎的搜索關(guān)鍵字keywords、頁(yè)面描述、CSS 樣式表和字符編碼聲明等。
          • <meta charset="utf-8"> — 該元素指定文檔使用 UTF-8 字符編碼 ,UTF-8 包括絕大多數(shù)人類已知語(yǔ)言的字符。基本上 UTF-8 可以處理任何文本內(nèi)容,還可以避免以后出現(xiàn)某些問(wèn)題,沒(méi)有理由再選用其他編碼。
          • <title></title> — `` 元素。該元素設(shè)置頁(yè)面的標(biāo)題,顯示在瀏覽器標(biāo)簽頁(yè)上,也作為收藏網(wǎng)頁(yè)的描述文字。
          • <body></body> — `` 元素。該元素包含期望讓用戶在訪問(wèn)頁(yè)面時(shí)看到的內(nèi)容,包括文本、圖像、視頻、游戲、可播放的音軌或其他內(nèi)容。

          圖像

          重溫一下 `` 元素:

          <img src="images/icodingedulogo.png" alt="艾編程logo">

          像之前所講,該元素通過(guò)包含圖像文件路徑的地址屬性 src,可在所在位置嵌入圖像。

          該元素還包括一個(gè)替換文字屬性 alt,是圖像的描述內(nèi)容,用于當(dāng)圖像不能被用戶看見(jiàn)時(shí)顯示,不可見(jiàn)的原因可能是:

          1、用戶有視覺(jué)障礙。視障用戶可以使用屏幕閱讀器來(lái)朗讀 alt 屬性的內(nèi)容。

          2、有些錯(cuò)誤使圖像無(wú)法顯示。可以試著故意將 src 屬性里的路徑改錯(cuò)。保存并刷新頁(yè)面就可以在圖像位置看到:



          alt 屬性的關(guān)鍵字即“描述文本”。alt 文本應(yīng)向用戶完整地傳遞圖像要表達(dá)的意思。用 "測(cè)試圖片" 來(lái)描述 Firefox 標(biāo)志并不合適,修改成 "Firefox 標(biāo)志:一只盤旋在地球上的火狐" 就好多了。

          可以試著為圖像編寫一些更好的 alt 文本。

          標(biāo)記文本

          本段包含了一些最常用的文本標(biāo)記 HTML 元素。

          標(biāo)題(Heading)

          標(biāo)題元素可用于指定內(nèi)容的標(biāo)題和子標(biāo)題。就像一本書的書名、每章的大標(biāo)題、小標(biāo)題,等。HTML 文檔也是一樣。HTML 包括六個(gè)級(jí)別的標(biāo)題, <H1> (en-US)–<h6> (en-US) ,一般最多用到 3-4 級(jí)標(biāo)題。

          <h1>主標(biāo)題</h1>
          <h2>頂層標(biāo)題</h2>
          <h3>子標(biāo)題</h3>
          <h4>次子標(biāo)題</h4>

          可以嘗試在 `` 元素上面添加一個(gè)合適的標(biāo)題。

          注:可以發(fā)現(xiàn) MDN 網(wǎng)站上 第一級(jí)標(biāo)題的主題是隱藏的。不要使用標(biāo)題元素來(lái)加大、加粗字體,因?yàn)闃?biāo)題對(duì)于 無(wú)障礙訪問(wèn) 和 搜索引擎優(yōu)化 等問(wèn)題非常有意義。要保持頁(yè)面結(jié)構(gòu)清晰,標(biāo)題整潔,不要發(fā)生標(biāo)題級(jí)別跳躍。

          段落(Paragraph)

          如上文所講,<P> 元素是用來(lái)指定段落的。通常用于指定常規(guī)的文本內(nèi)容:

          <p>這是一個(gè)段落</p>

          試著添加一些文本(在 設(shè)計(jì)網(wǎng)站的外觀 小節(jié))到一個(gè)或幾個(gè)段落中,并把它們放在你的 `` 元素下方。

          列表(List)

          Web 上的許多內(nèi)容都是列表,HTML 有一些特別的列表元素。標(biāo)記列表通常包括至少兩個(gè)元素。最常用的列表類型為:

          1、無(wú)序列表(Unordered List中項(xiàng)目的順序并不重要,就像購(gòu)物列表。用一個(gè) <ul> 元素包圍。

          2、有序列表(Ordered List)中項(xiàng)目的順序很重要,就像烹調(diào)指南。用一個(gè) <ol> 元素包圍。

          列表的每個(gè)項(xiàng)目用一個(gè)列表項(xiàng)目(List Item)元素 <li> 包圍。

          比如,要將下面的段落片段改成一個(gè)列表:

          <p>艾編程是一個(gè)綜合性的web前端編程學(xué)習(xí)網(wǎng)站,
                 包含了html、css、JavaScript等系列知識(shí)……</p>

          可以這樣更改標(biāo)記:

          <p>Mozilla 艾編程是一個(gè)綜合性的web前端編程學(xué)習(xí)網(wǎng)站。包含了</p>
          
          <ul>
            <li>html</li>
            <li>css</li>
            <li>JavaScript</li>
          </ul>
          
          <p>等系列知識(shí)……</p>

          試著在示例頁(yè)面中添加一個(gè)有序列表和無(wú)序列表。

          鏈接

          鏈接非常重要 — 它們賦予 Web 網(wǎng)絡(luò)屬性。要植入一個(gè)鏈接,我們需要使用一個(gè)簡(jiǎn)單的元素 — <a> — a 是 "anchor" (錨)的縮寫。要將一些文本添加到鏈接中,只需如下幾步:

          1. 選擇一些文本。比如 “艾編程前端”。
          2. 將文本包含在<a>元素內(nèi),就像這樣:
          3. <a>艾編程前端</a>
          4. 為此<a>元素添加一個(gè)href屬性,就像這樣:
          5. <a href="">艾編程前端</a>
          6. 把屬性的值設(shè)置為所需網(wǎng)址:
          7. <a href="https://www.icodingedu.com/">艾編程前端</a>

          如果網(wǎng)址開(kāi)始部分省略了 https:// 或者 http://,可能會(huì)得到錯(cuò)誤的結(jié)果。在完成一個(gè)鏈接后,可以試著點(diǎn)擊它來(lái)確保指向正確。

          href 這個(gè)名字可能開(kāi)始看起來(lái)有點(diǎn)令人費(fèi)解,代表超文本引用( hypertext reference)。

          現(xiàn)在就為頁(yè)面添加一個(gè)鏈接吧。

          小結(jié)

          如果你一直跟著這篇文章里的指導(dǎo)做的話,你應(yīng)該完成了一個(gè)像下面這樣的頁(yè)面:

          代碼部分:

          <!DOCTYPE html>
          <html>
            <head>
              <meta charset="utf-8">
              <title>艾編程前端</title>
            </head>
            <body>
              <h1>艾編程前端示例頁(yè)面</h1>
              <img src="https://www.icodingedu.com/files/system/2019/09-25/22132557f330499313.png" alt="艾編程logo整體以盾型為外輪廓設(shè)計(jì),以代碼符號(hào)””為基礎(chǔ)圖形進(jìn)行抽象畫變形,中間的“/”符號(hào)用首字母“i”替代,同時(shí)也是諧音“愛(ài)”,象征著美好">
          
              <p>艾編程是一個(gè)綜合性的web前端編程學(xué)習(xí)網(wǎng)站。包含了</p>
          
              <ul>
                <li>html</li>
                <li>css</li>
                <li>JavaScript </li>
              </ul>
          
              <p>等系列知識(shí)……</p>
          
              <p>為了讓您更好的學(xué)好前端編程,請(qǐng)參閱 <a href="https://www.icodingedu.com/">艾編程</a></p>
            </body>
          </html>

          你學(xué)到了嗎?如果有幫助記得關(guān)注收藏點(diǎn)贊哦!

          TML,即超文本標(biāo)記語(yǔ)言Hyper Text Markup Language


          在HTML中最重要的概念就是標(biāo)簽,或者說(shuō)每一個(gè)你寫的語(yǔ)句都是一個(gè)標(biāo)簽。


          通過(guò)這些標(biāo)簽可以將網(wǎng)絡(luò)上的文檔格式統(tǒng)一,使分散的Internet資源連接為一個(gè)邏輯整體。HTML文本是由HTML命令組成的描述性文本,HTML命令可以說(shuō)明文字,圖形、動(dòng)畫、聲音、表格、鏈接等。


          以下是HTML基本(常用)標(biāo)簽:


          <html></html> 定義 HTML

          <head></head> 頭

          <meta> 元信息

          <title></title> 標(biāo)題

          <link> 鏈接外部資源

          <style></style> 樣式(CSS部分內(nèi)容)

          <body></body> 頁(yè)面主體

          <h></h> 標(biāo)題(h1~h6)

          <b></b> 加粗

          <strong></strong> 加粗(兩者效果相同)

          <i></i> 斜體

          <em></em> 斜體(效果相同)

          <u></u> 下劃線

          <del></del> 刪除線

          <ul></ul> 無(wú)序列表

          <ol></ol> 有序列表

          <li></li> 列表每一行

          <a></a> 超鏈接(href內(nèi)容為跳轉(zhuǎn)地址)

          <font> 字體

          <sub> 下標(biāo)

          <sup> 上標(biāo)

          <br> 換行

          <p> 段落

          <img> 圖像(src內(nèi)容為資源地址,本地或網(wǎng)絡(luò)都可以)

          <hr> 分割線

          <table></table> 定義表格

          <th></th> 表頭

          <tr></tr> 一行數(shù)據(jù)

          <td></td> 一格數(shù)據(jù)

          <form></form> form表單

          <frame> 框架

          (后兩個(gè)初學(xué)用不到,以后會(huì)常用)


          主站蜘蛛池模板: 在线精品亚洲一区二区三区| 国产一区二区三区免费观看在线| 精品一区二区三区免费观看| 91国偷自产一区二区三区| 无码人妻AⅤ一区二区三区水密桃 无码欧精品亚洲日韩一区夜夜嗨 无码毛片一区二区三区中文字幕 无码毛片一区二区三区视频免费播放 | 精品在线视频一区| 亚洲av无码片区一区二区三区| 伊人激情AV一区二区三区| 痴汉中文字幕视频一区| 久久久久久人妻一区二区三区| 青青青国产精品一区二区| 亚洲AV福利天堂一区二区三| 在线精品亚洲一区二区小说| 亚洲日本一区二区一本一道 | 国产亚洲一区区二区在线 | 亚洲AV无码一区二区三区国产 | 精品人妻AV一区二区三区 | 精品国产一区二区三区久| 亚洲日韩国产欧美一区二区三区| 亚洲视频在线一区| 人妻少妇久久中文字幕一区二区| 久久久91精品国产一区二区三区| 国产日韩精品一区二区三区在线| 国产亚洲3p无码一区二区| 国产日韩一区二区三免费高清| 精品一区二区三区四区| 国产在线精品一区二区中文 | 亚洲一区二区三区91| 国产成人精品第一区二区| 国产一区二区成人| 后入内射国产一区二区| 一区二区高清在线| 亚洲色欲一区二区三区在线观看| 亚洲人成人一区二区三区| 精品无码国产一区二区三区AV| 中文字幕一区在线观看视频| 日韩免费无码一区二区视频| 国产精品免费大片一区二区| 亚洲熟妇av一区二区三区漫画 | a级午夜毛片免费一区二区| 国产另类TS人妖一区二区|