day04-JavaScript01

JavaScript01

  • 官方文檔 http://www.w3school.com.cn/js/index.asp
  • 基本說明:
    JavaScript能改變html內容 , 能改變html屬性,能改變html樣式(css),能完成頁面的數據驗證 。
例子
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>js開關燈</title></head><body><h2>JavaScript 能做什么?</h2><p>JavaScript 能夠改變 HTML 屬性值 。</p><p>在本例中,JavaScript 改變了圖像的 src 屬性值 。</p><button onclick="document.getElementById('myImage').src="https://www.huyubaike.com/imgs/eg_bulbon.gif"">開 燈</button><img id="myImage" border="0" src="https://www.huyubaike.com/imgs/eg_bulboff.gif" style="text-align:center;"><button onclick="document.getElementById('myImage').src="https://www.huyubaike.com/imgs/eg_bulboff.gif"">關 燈</button></body></html>
day04-JavaScript01

文章插圖

day04-JavaScript01

文章插圖
1.JavaScript特點
  1. JavaScript是一種解釋性的腳本語言,c、c++等語言先編譯后執行,而JavaScript是在程序的運行過程中逐行進行解釋
  2. JavaScript是一種基于對象的腳本語言,可以創建對象 , 也能使用現有的對象
  3. JavaScript是弱類型的,對變量的數據類型不做嚴格的要求,變量的數據類型在運行過程中可以變化
例子
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>JavaScript是弱類型的</title><!--1.js代碼可以寫在script標簽中2.type="text/javascript" 表示這個腳本(script)類型是JavaScript3.type="text/javascript" 可以不寫,但是建議寫上4.js語句可以不寫分號; 建議寫上5.var--><script type="text/javascript">var age = 10;//輸出alert() 使用彈框方式//輸出 console.log() 在調試窗口輸出console.log("age=" + age);// 輸出變量的類型可以使用typeofconsole.log(typeof age);age = "北京";console.log("age=" + age);console.log(typeof age);</script></head><body></body></html>
day04-JavaScript01

文章插圖
2.JavaScript快速入門
  • 使用方式1:script標簽寫js代碼
  • 使用方式2:使用script標簽引入js文件
注:兩種使用方式不能混用,如果混用了就只有引用的js文件生效
使用方式1:script標簽寫js代碼
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>script標簽中寫JS代碼</title><!--1.可以在head和body嵌入 script2.執行順序是從上到下3.建議放在head中--><script type="text/javascript">//在head內使用script寫jsconsole.log("ok");</script></head><body><script type="text/javascript">//在body內使用script寫jsconsole.log("hi");</script></body></html>
day04-JavaScript01

文章插圖
使用方式2:使用script標簽引入js文件
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>使用script標簽引入js文件</title><script type="text/javascript" src="https://www.huyubaike.com/biancheng/myjs.js"></script></head><body></body></html>alert("今日天氣降溫了");
day04-JavaScript01

文章插圖
例子:兩種使用方式不能混用
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>兩種使用方式不能混用</title><!-- 如果兩種方式都用了:1.不會報錯2.只有一個生效,引入的js文件生效--><script type="text/javascript" src="https://www.huyubaike.com/biancheng/myjs.js">alert("你好 , 今天天氣怎么樣?")</script></head><body></body></html>alert("今日天氣降溫了");
day04-JavaScript01

文章插圖
3.查看js錯誤信息