首頁 > 開發者 > JavaScript
標籤：code cti 意思 自己 innerhtml 指令碼 log 單擊 編寫
JavaScript JavaScript簡稱JS。JS是指令碼語言，它是一種輕量級的程式設計語言，是可以插入HTML頁面的編程代碼，幾乎所有現代瀏覽器都是支援的。理論老師不行，我就抄襲手冊上的一些關鍵字段給大家，然後我們寫代碼來學習。JS也和CSS一樣，是可以外部參考的，但是CSS用的是link標籤，而JS用的則是script標籤，和CSS一樣，要寫在head標籤裡哦，引用檔案都要寫在這裡的。我們來寫一個看看：<head lang="en"> <script src="../js/myjs.js"></script></head>這樣就是引用外部名為"myjs.js"的檔案，就和css一樣，在這個檔案裡編寫JS代碼就可以了。它除了可以引用外部js，還可以寫在body標籤裡，當然，直接在head裡寫也是可以的，不用引用外部，這樣吧，老師這樣說，有同學會不理解，我們就先寫在body標籤裡，來，上代碼：
<body><script> alert(1);</script></body>script標籤寫在body裡，就不需要用src來指定檔案路徑，而是直接寫，同學這樣理解吧，script當做div，div裡可以包含很多內容，而script裡包含的內容，則是JS代碼。上面這個代碼，alert的意思是警示框，頁面會彈出一個提示框，內容則是老師輸入的"1"，它沒太多的意思，同學們想在裡面輸入什麼都可以，只是做成提示而已。這裡說一下啊，JS跟HTML就不一樣了，它的約束就會更強，假如你寫一個亂的代碼，錯的代碼，它會提示報錯，代碼將不會成功運行，可能還會影響到之後的程式運行。 錯誤提示在哪呢？我們寫一個錯的代碼看一下：
<script> if;</script>if是判斷語句，我們使用判斷、迴圈、函數等方法，如果不遵循一些基礎規則，就會出錯。我們將這段代碼運行，在頁面上重新整理，按下F12，大家會看見，右側會有一個錯誤提示，一個紅色的圓包含一個差，錯誤為1個。查看代碼裡，有很多操作，我們選"Concole"可以查看到錯誤，它的錯誤在第幾行，是什麼錯誤都能看到，不過基本上都是英文提示，看不懂就去翻譯，關鍵看它出錯是第幾行，然後你再去看自己寫的代碼，這樣也能很簡單的發現錯誤。 JS能做什麼呢？最簡單的理解嘛，它可以頁面動態，什麼是動態？之前我們學的HTML+CSS都是靜態模式對吧，我們用JS寫一個東西，大家就能發現了，先將JS裡的代碼刪除啊，錯誤的咱不要。我們先加一個div：
<div id="div1">我是div1</div>頁面上會出現以上div內容，那麼我們用JS來做一下修改：
<script> //JS的注釋，在前面打兩個斜杠 // var 建立變數 div1 // document意思是文檔對象 //getElementById 簡單理解為指定到這個id var div1 = document.getElementById("div1"); //我們修改div1的內容 //innerHTML 是頁面常值內容，這裡就是給它修改了 div1.innerHTML = "我才不是div1嘞";</script> 這樣，我們再重新整理頁面，div的內容會改變成JS裡面的“我才不是div1嘞”。這裡老師的script標籤是寫在body裡的，如果寫在head呢？div輸出的結果則是“我是div1”，則不是JS裡的“我才不是div1嘞”，為什麼呢？是script在head裡，無法這樣用嗎？不是的，是因為代碼是從上往下啟動並執行，下面的div則覆蓋了上面JS裡的div1內容。很簡單的一個測試，大家在head裡的script標籤裡再加一個alert做一個測試嘛，一樣會彈出提示的。 初學的同學，可能不懂，那麼老師就加快一下步伐，做一個簡單的顯示隱藏功能吧！看到效果，這樣同學們就能懂一些了。但是這樣的話，要額外學習一些重要的東西：“事件”！事件是很重要的，多的理論老師不說了，不懂去看看手冊，老師先上代碼，邊做邊解釋：
<button onclick="yincang()">點擊我，隱藏div1</button><button onclick="xianshi()">點擊我，顯示div1</button>在body裡，div下面加上這一段代碼，button只是一個元素，同學們不用在意它，其他的元素也是可以做“事件”的。這裡的事件，則是裡的 onclick，它的意思是“點擊事件”，就是我們用按一下滑鼠它，觸發事件，運行屬於它的代碼，就是我們後面在JS裡寫的代碼。onclick後面的值，則是一個函數，函數有一個特點，後面必須帶一個"()"括弧。我們轉手去JS，看看該怎麼寫：
//建立函數，需要用到關鍵字：functionfunction yincang(){ //var建立變數，找到id為div1，然後傳輸給我的變數。 //變數也不能隨便取，它有規範的，數字和底線不能開頭基本就可以了 var div1 = document.getElementById("div1"); //給div1添加CSS樣式，display=none 設定為隱藏。 div1.style.display="none";} 建立函數，yincang()，那麼我們在button元素裡啟用事件指向的則是yincang()，所以JS就會運行函數裡的代碼，效果則會是id為div1的元素，被隱藏了。那麼顯示的操作就很簡單，複製隱藏的JS代碼，將函數yincang改成xianshi，因為上面的botton裡的事件就是xianshi。然后里面的代碼就兩行吧，不算注釋，啟動並執行代碼就兩行，就將最後的"none"值改成"block"就可以了。那麼我們能看見，JS除了能修改HTML，還能修改CSS樣式。 老師的教學，是針對功能性的，理論廢話太多，說多了也沒用，老師把能說的說了，關鍵就是同學們的理解能力，重點還是，只要能做出來就是第一，會說不會做，廢柴一個。 但是老師會保留一點，就比如上面的，如果我們是外部參考檔案，引用的是myjs.js檔案，那麼在這個檔案裡，JS又怎麼寫呢？是一樣，還是又是一套規範？老師不說，我希望同學們能主動去學它，被動的去學，是學不進去的，進度會特別慢，這樣的話，實力不穩，找工作就會碰壁的。
第十二篇 JavaScript(簡稱JS) 實現顯示與隱藏
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
