整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          HTML學習心得

          avaScript和Java有什么聯系

          根據目前我自己的理解,不要被名字有相似字節所欺騙,這兩個語言其實沒有什么聯系,如果說有的話,應該就是關鍵字和對象的一些范疇有點相似或者說是有種模仿的感覺。但是實際上一個作為腳本的輕量語言[^7],一個作為有完整體制的大型語言[^8],兩者是沒有任何可比性的。

          JS的內鏈外鏈

          內鏈

          ? JS的內鏈,也就是在html文件內的調用使用與css類似,也有兩種方式,即在html文件的<head></head>中書寫使用或是在<body></body>中使用。

          <head></head>內書寫

          ? 在<head></head>中對JS的代碼進行書寫時,我們使用<script></script>對我們的JS代碼進行包裹,與html及CSS的法則一樣,其作用也是用來標明其JS的代碼塊屬性。

          <!DOCTYPE html>

          <html>

          <head>

          <meta charset="utf-8">

          <title>test</title>

          <script>

          function displayDate(){

          document.getElementById("demo").innerHTML=Date();

          }

          </script>

          </head>

          <body>

          <h1>我的第一個 JavaScript 程序</h1>

          <p id="demo">這是一個段落</p>

          <button type="button" onclick="displayDate()">顯示日期</button>

          </body>

          </html>

          ###### <body></body>內書寫

          ? 與在<head></head>中類似的,我們在<body></body>中對JS的書寫和使用同樣是在<script></script>中實現,其作用也與上述的一致。

          <!DOCTYPE html>

          <html>

          <body>

          <script>

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

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

          </script>

          </body>

          </html>

          外鏈

          與css有些不同的,JS的外鏈同樣使用的是<script></script>標簽來實現。JS即可以出現本地的JS文件的鏈接,也可以調用網上的JS文件進行鏈接,但調用網絡上的文件有可能會受到目標文件服務器和網絡的影響,使用的頻率沒有本地的調用高。

          ? 調用本地JS文件:

          <!DOCTYPE html>

          <html>

          <head>

          <script type="text/javascript" src="../js/js_for_Seat_selection_nterface.js" ></script>

          </head>

          <body>

          </body>

          </html>

          調用網絡的JS文件:

          <!DOCTYPE html>

          <html>

          <head>

          <script src="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"> </script>

          </head>

          <body>

          </body>

          </html>

          ? JS的外鏈與css類似的,也可以在同個文件里調用多個JS文件使用。其中還有很多較css的相似部分就不在這里重復說了,可以參考之前的css部分內容。

          JS的語法關鍵字

          JS的語法關鍵字有很多很多,因為JS是一門以對象為基礎的語言,我們在使用會發現很多例如document.getElementById("demo").innerHTML=x;的語句,這里的getElementById(),innerHTML其實都是JS為我們已經封裝(可以理解為打包)好了的方法和方法中的參數。所以我們在這里主要介紹一些基本的關鍵字。

          function

          function的作用其實很簡單,就是聲明一個函數,表明我這里的是一個函數,我們用一個看例子來看:

          function myFunction(){

          var x="";

          var time=new Date().getHours();

          if (time<20){

          x="Good day";

          }

          document.getElementById("demo").innerHTML=x;

          }

          上述的例子就是為我們聲明了一個叫做myFunction的的函數,其后的花括號中包含的就是函數中的內容。

          var

          在JS中,var的作用就是聲明一個變量,在JS中,對于變量的類型沒有嚴格的規定,所以JS也是一門弱語言,被定義的變量只有在第一次被賦值時才會被系統分配相應數據類型的空間。

          var a;

          a=10;

          但實際上我們會發現,在實際使用時不僅僅是var可以聲明一個變量,$也可以成功聲明一個變量,甚至不需要任何的申明關鍵字也可以直接創建一個變量。但實際上是有非常大的差別的,$是JQ中的一個已經過定義的自定義函數名,而在單純的JS中是沒有任何意義的,一般是在你的文件已經引入了一個JQ數據庫后才出現$也可以創建變量的情況,而相較于不使用任何關鍵字而直接創建一個變量,其實質是在整個JS文件的最上層windows中創建了一個對象屬性,詳細的解釋我會在文末提供一個網絡來源的博客地址,其中對創建對象屬性有一個較為詳細的解釋。

          所以我們在聲明創建變量時一定要使用var關鍵字,不使用任何關鍵字創建變量,雖然可行,但卻存在著語法錯誤。

          new

          與其它的面向對象方法一樣的,JS中創建對象所使用的個關鍵字也是new,我們通過它來創建一個對象。

          person=new Object();

          在上述的例子中,我們創建了一個名為person的對象,object我們在這里可以簡單的理解為一個類型為對象的數據結構。這句代碼的意思就是創建一個對象,對象名為person

          JS的結構語句

          其實說是JS的結構語句,我們不難發現的,這些結構語句其實很多都是我們在其他語言中也能見到的語言語法,我們在這里也是將它們簡單的歸類再來說明一下。

          ###### if else

          if else語句主要的作用其實也很簡單,就是做一個判斷,就像它的翻譯 一樣——如果….就….. 否則…..。

          if(...){

          ...

          }

          else{

          ....

          }

          ? 上述的就是它的基本格式,我們可以看到在if后面的小括號中會有一個判斷語句,其中的語句用來判斷真假來控制語句的執行部分。花括號中的就是滿足條件時執行的語句。

          這一條語句是可以嵌套的,我們通過對它的嵌套來進行多層的判斷。

          if(...){

          if(...){

          ...

          }

          else{

          ....

          }

          }

          else{

          ....

          }

          while

          我們先來看它的格式:

          while(...){

          ...

          }

          while是一個循環語句,在關鍵字后面的小括號中,也同樣是一條判斷語句,用來控制循環的執行。在花括號中是我們的循環內容。

          do while

          可能我們會發現,這條語句和上一條語句非常的相似,我們還是先來看它的格式:

          do{

          ...

          }while(...)

          它一樣是一條控制循環的語句,不過和上一個語句有所區別的,它是先循環后判斷,而while是先判斷后循環,有的時候我們在不以言大哥情況下使用會達到不一樣的效果。

          for

          js for( var i=0;1<=10;i++){ ... }

          for語句也同樣是一個循環語句,我們在上面舉出了一個實例,從例子中我們看到,for和它的循環語句是有區別的,我們需要在判斷的語句中定義變量,規定執行循環的條件,及控制循環的條件變化。

          但實際上,有些時候我們只需要寫明控制循環的條件語句就可以了,其他的兩條語句可以不在括號中寫出。但要注意的,我們需要保留它的分號,不然會出現語法錯誤。

          switch

          js switch(...){ case '...': ...;break; case '...': ...;break; .... default:...; }

          這是一個條件選擇語句,我們通過判斷語句來選擇到一個具體的分支,執行相應的語句。

          有關于break,default 的作用,我們就不細說了,大家可以去網上查看它的詳細信息。

          JS的效果實現(HTML的事件響應)

          我們已經很簡單的介紹了一下JS的語法和關鍵字,那么我們下面來說在網頁中如何觸發JS的代碼,又或者說是如觸發相應的事件。

          ##### 點擊事件

          點擊事件就是通過頁面點擊觸發的事件,我們要注意的,在網頁中其實不是只有按鈕才可以作為點擊事件的載體,基本上所有的網頁元素都可以作為點擊事件的載體。也就是說其實我們可以在任意一個元素中添加一個點擊事件。

          ? 下面我們來看常用的格式:

          <html>

          <body>

          <input type="checkbox" name="ticket_seat"id="tucket_18" class="ticket_input"value="18"onclick="ticket_onclick()">

          <script>

          function ticket_onclick(){

          ...

          }

          </script>

          </body>

          </html>

          ? 在上述的例子中我們可以看到,在標簽中加入一個onclick屬性,在后面寫上要觸發的函數名。這樣我們在點擊網頁上的元素之后,我們就可以觸發相應的JS函數。

          對于我們的onclick字段,我們可以像常規的函數調用來看待它,也就是說,我們也是可以通過它向函數傳入參數。

          后記:對于大部分轉行的人來說,找機會把自己的基礎知識補齊,邊工作邊補基礎知識,真心很重要。

          "我們相信人人都可以成為一個IT大神,現在開始,選擇一條陽光大道,助你入門,學習的路上不再迷茫。這里是北京尚學堂,初學者轉行到IT行業的聚集地。"

          為工作中接觸到一些代碼的使用,本小白開始學習編程知識,每天記錄一些自學編程過程中的一些知識點,一是為了方便跟大家分享,另外就是為了以后復習使用。


          一、前端環境搭建


          Visual Studio Code

          • 安裝Visual Studio Code,Chrome(谷歌瀏覽器)
          • 安裝VS和Chrome插件

          Visual Studio Code常用插件:

          1.語言、格式化:

          • Chinese Language Pack for Visual Studio Code 中文簡體語音包
          • Prettier-Code Formatter 幾乎支持所有前端代碼的格式化
          • Simple icons小巧實用的文件圖標集合
          • One Dark Pro個人非常喜歡的一款主題

          2.HTML/CSS插件:

          • Auto Close Tag 標簽自動關閉
          • Auto Rename Tag 標簽自動更名
          • Auto Complete Tag 標簽自動完成
          • HTML CSS Support 自動補全樣式表
          • HTML Snippetshtml 代碼片段
          • highlight matching tag 自動高亮顯示結束括號/標簽

          3.JS/Vue插件:

          • JavaScript(ES6) Code snippets JS/ES6代碼片段
          • Vue Vue語法提示
          • Vue2 Snippets Vue代碼片段
          • Vue-beautify Vue代碼格式化

          4.PHP/MySQL相關插件:

          • PHP Intelephense 代碼提示與函數跳轉
          • PHP IntelliSense 代碼智能感知(可選)
          • PHP DocBlocker代碼塊注釋(可選)
          • Format HTML in PHP格式化 PHP 中的 html 代碼
          • MySQL MySQL 語法高亮

          5.MarkDown語法插件:

          • Markdownlint Markdown 語法檢查器
          • Markdown Rreview Enhancedmardown 文件預覽

          6.提高工作效率的插件:

          • Path Intellisense 智能路徑提示
          • Bracket Pair Colorizer 不同顏色表示不同層級括號
          • Code Runner 支持常見的編程語言運行調試
          • Live Server 內置 web 服務器

          7.如何在VSCode中配置PHP代碼檢查器:在VSCode配置文件(setting.json)

          // 版本與路徑替換成系統中的php可執行文件路徑與版本號
          "php.validate.executablePath": "E:/phpstudy_pro/Extensions/php/php7.3.4nts/php.exe",
          "intelephense.environment.phpVersion": "7.3.4",

          二、初識HTML

          1.標題和段落

          • 頁面的內容均由元素組成;
          • 元素是由標簽來描述的,標簽根據元素的類型分為單標簽、雙標簽,每個元素的特征由屬性來描述,需要將屬性寫到起始標簽中。
          <h1>開會通知:本周五進行大掃除</h1>
          <p>開會通知:本周五進行大掃除</p>
          • 元素是由標簽和屬性共同描述的;
          <male sex="famale" sw="80, 90, 100" height="170" weight="200">男朋友</male>
          • html中的所有內容,如果想要添加到html文檔中,就必須要使用一個標簽。
          // JS代碼必須寫到一個script標簽中
          <script>
              const SITE = "Hello World!";
          </script>
          <?php
          // php代碼必須放在一對php標簽中
          echo "Hello World!";
          ?>
          <!-- 標題標簽:除了設置文檔標題之外,還可以用來劃分頁面結構的 -->
          <h1>Hello World</h1>
          <h2>Hello World</h2>
          <h3>Hello World</h3>
          
          <!-- 內容標簽 <p></p> -->
          <p>程序猿界有一句話:每一個程序猿都應該擁有一臺MacBook Pro</p>

          2.鏈接與錨點

          • 鏈接標簽 a標簽-當今互聯網的靈魂,實現了全球資源之間的共享

          1.target屬性:

          • 規定在何處打開鏈接文檔。
          1. _blank跳轉到新的頁面,在新窗口打開
          2. _self(默認值) 在相同的框架中打開鏈接文檔;
          3. _parent在父框架集中打開被鏈接文檔;
          4. _top在整個窗口中打開被鏈接文檔;
          5. iframename在指定窗口打開。

          鏈接地址

          代碼案例:

          <!-- _self 當前窗口打開 -->
          <a href="跳轉目標" target="_self">Hello World</a>
          
          <!-- _blank 跳轉到新的頁面,在新窗口打開 -->
          <a href="跳轉目標" target="_blank">Hello World</a>
          
          <!-- 在指定窗口打開 target="iframe內聯框架的name值" 此時a標簽的target值需要跟iframe里的name值保持一致 -->
          <a href="https://www.baidu.com/" target="baidu">打開百度</a>
          <iframe srcdoc="點擊上面的按鈕打開百度" name="baidu" frameborder="0" width="600" height="500"></iframe>
          • 注意:
            使用target="iframename"時,需要注意a標簽的target值需要跟iframe的name值相等。

          2.錨點

          • 使用錨點可以實現在當前頁面中的任意位置進行跳轉。
          <a href="#footer">跳轉到底部</a>
          
          <!-- 創建錨點 -->
          <div id="footer" style="margin-top: 1000px;">This is footer</div>
          • div:通用元素標簽,內部可以放任意元素類型。
          • 如何返回當前頁面頂部?
            直接將a標簽的href值設置為#即可,如:<a href="#">回到頂部</a>。
          • 備注:
            vue.js、react等單頁面應用,路由就是使用錨點實現的。

          三、圖片元素

          如果我們想要在頁面添加一張圖片,可以使用img標簽

          • 必須屬性:
          1. src 圖片的URL地址;
          2. alt 圖片的描述信息。
          • 案例:
          <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="百度一下" width="200">
          • 備注:
            設置圖片大小時,可以只設置寬度或者高度,另一個屬性就會進行等比縮放,不需要同時設置。在實際開發中,一般在CSS中設置圖片的樣式,圖片很少單獨使用,基本都是用在鏈接中。

          個人總結:有些代碼看起來簡單,但是自己上手起來真的是難,屬于那種一看就會,一寫就錯,看來只能通過多寫,多練才可以熟能生巧,這是個細活,急不得,要戒驕戒躁,平穩心態來面對這么多難題,加油!

          于JavaScript到底該如何學習,很多小白往往都是云里霧里,一位工作了5年的資深工程師分享了JavaScript的學習心得,下面和千鋒廣州小編一起來看看吧!

          1,不要著急看一些復雜網頁效果的代碼,這樣除了打擊你自信心,什么也學不到。沒達到一定的武功水平,割了小JJ也學不會葵花寶典的。

          2,別急著加技術交流QQ群,加牛人QQ。如果你找張三豐交流武功,你上去第一句問“豐哥,where is 丹田?”,你會被他一掌劈死的。

          3,看網上什么多少天精通JS,啥啥啥從入門到精通,這種教程直接跳過吧,太多的事實證明,以一種浮躁的心態去做任何事都會以失敗而告終。

          ?

          推薦幾本好書

          “你丫吹了半天牛B,還是沒說怎么學啊”

          呵呵,我也沒啥特別的辦法,只是推薦幾本好書。推薦的書,得按先后順序看。別第一本沒看完,就急著上第二本,并不是每次“穿越”都能成功的

          第一階段:《JavaScript DOM編程藝術》

          看這本書之前,請先確認您對Javascript有個基本的了解,應該知道if else之類的語法,如果不懂,先去看看我第二階段推薦的《Javascript高級程序設計》的前三章,記住看三章就別往下看了,回到《JavaScript DOM編程藝術》這本書上來。

          學習Javascript用《JavaScript DOM編程藝術》來入門最好不過了,老老實實看兩遍,看完了你就會對JS有一個大概的了解,整本書都圍繞著一個網頁效果例子展開,你跟著老老實實敲一篇,敲完之后,你會發現這個效果不是常在網頁中看到么,發現自己也能做出來網上的效果了,嘿嘿,小有成就感吧。

          第二階段:《JavaScript高級程序設計》

          有的書是用來成為經典的,比如犀牛書;還有些書是用來超越經典的,顯然這本書就是這種。書中章章經典,由淺入深,其中第6章,關于JS面向對象的解說,沒有教程出其右。

          如果有一場滿分100分的JS考試,看了《JavaScript DOM編程藝術》能讓你拿到20分,那么看完這本書,你就能拿到60分以上了。學完后,你會成就感倍增的,相信我(至少看兩遍,推薦三篇,跟著書上的代碼一行行的敲)。

          這本書強烈推薦購買,寫的太TMD牛逼了,給你帶來的價值超過百倍千倍。

          這本書最新的是第三版,貌似就是前些日子出來的,我看的是第二版,第三版相對第二版變動不大,添加了幾章內容,價格目前相差10元左右。

          接下來,恭喜你可以下山了,這個時候可以自己做一些事情了

          需要多敲代碼多發現,但必須要去看書。千萬不能學習網上那種浮躁的方法,直接實踐,不懂然后直接找解決方案,這可以幫助你解決一時之需,但遇到類似的問題的時候,你并不能馬上觸類旁通,長遠來說這無論對于程序員還是其它職業來說無疑是降低了學習的效率。只有書籍里面的內容才是經得起考驗,真正放心地放到我們的知識存儲里面。

          你可以去Ferris這個教程看看他寫的這些效果,看看源代碼,怎么樣,是不是覺得有一部分很簡單了,嘗試著跟著他寫一寫這些效果吧。

          學技術閉門造車是行不通的,適當的加一兩個QQ群交流(注重質量),常去論壇逛逛,你會經常有些小收獲的。

          再有就是看看前輩這些牛人前輩們分享的文章,它會讓你的學習事半功倍的,這里是熱心人收集的國內一些牛人的博客、個人網站,點這里。

          第三階段:《JavaScript語言精粹》和《高性能JavaScript》

          接下來兩本書《JavaScript語言精粹》和《高性能JavaScript》算是JS高級教程的補充,里面有一些內容和JS高級教程重復了,兩本書可以同時看,都不厚,可以對前面所學的有一個很好的加強和鞏固。

          第四階段:《JavaScript DOM高級程序設計》和《JavaScript設計模式》

          在吃透了前面所說的書之后,接下來兩本書的順序已經無關緊要了,《JavaScript DOM高級程序設計》(注意和《JavaScript 高級程序設計》相區別)和《JavaScript設計模式》,這兩本都是重量級的書,能讓你的JS技術上一個新的臺階;這兩本書前者主修煉外功,后者主修煉內功,有點想乾坤大挪移和九陽神功的關系。

          《JavaScript DOM高級程序設計》 首先教你搭建一個類似JQuery的額工具函數庫,然后通過講解幾個實際中經常遇到的幾個應用例子,會讓初學者受益匪淺。

          《JavaScript設計模式》主要講Javascript的設計模式,說實話,翻譯的質量很一般,有些生硬,但已經基本不影響你的學習,看代碼完全可以理解出自己的意思。

          經過前輩們的總結或本人的實踐經歷,自學的同學建議是這樣,找本js入門的書和妙味視頻結合看。一個主攻面試,一個主攻實踐。

          看書的目的主要是掌握理論知識,梳理js的知識結構,最主要的一點是為了應付面試。面試的主要環節是為了表達自己的想法,只憑簡單的理解,是不能完全的表達出一個問題的廣度或深度,只有結合了行業中的術語約定或一些習慣叫法,表達出來的意思才更專業。如果不是這樣,表達出來的意思別說面試官聽不懂,連自己都感覺要么表達不出來,要么表達的不是想要的。但書著重于對理論知識的闡述,缺少實際例子的支持,很難快速的消化。這時候視頻可以彌補這個缺陷,而且妙味視頻用簡單的代碼實現一些常見的效果,學習興趣很快就能被吸引。但是對js的高級特性,個人感覺視頻沒有達到那個深度。而且js的一些基礎的問題,或一個知識的擴充,限于各種條件的限制,可能無法完全表達出來。所以要結合書來補充。

          千鋒廣州小編要提醒大家一般學習的心態是:不急不躁,不快不慢。持之以恒,相信自己。只有這樣,才能在前端開發的學習過程中慢慢進步,不斷成長。


          主站蜘蛛池模板: 国产一区玩具在线观看| 亚洲视频在线一区二区三区| 国产一区二区三区在线免费| 日韩在线视频一区二区三区| 动漫精品专区一区二区三区不卡| 亚洲一区二区三区不卡在线播放| 婷婷亚洲综合一区二区| 成人区人妻精品一区二区不卡| 中文字幕在线观看一区| 精品国产免费观看一区| 精品国产福利一区二区| 久久免费精品一区二区| 中文字幕一区二区免费| 精品免费久久久久国产一区| 久久精品国内一区二区三区| 国产aⅴ精品一区二区三区久久| 男人的天堂精品国产一区| 日韩国产一区二区| 国产精品 视频一区 二区三区| 国产伦精品一区二区三区在线观看| 一区二区在线免费视频| 日本一区二区三区免费高清在线 | 一本AV高清一区二区三区| 国产一区中文字幕| 高清一区二区三区日本久| 国产一区视频在线| 久久精品无码一区二区三区免费| 国产成人一区二区三区电影网站| 免费看无码自慰一区二区| 国产午夜精品一区理论片飘花| 国产一区三区三区| 91精品一区二区三区在线观看| 激情啪啪精品一区二区| 精品国产亚洲一区二区在线观看 | 91精品一区二区三区久久久久| 国产一区二区内射最近更新| 亚洲一区精品视频在线| 极品人妻少妇一区二区三区| 国产成人无码一区二区三区在线| 日本一区二区三区在线视频观看免费 | 中文字幕在线视频一区|