簡介
JS的特點
JavaScript 是 web 開發人員必須學習的 3 門語言中的一門：
JavaScript中的物件分類
內建物件
宿主物件
自定義物件
JavaScript 可以通過不同的方式來輸出資料：
JavaScript常見的事件
代碼展示（鍵盤控制div的移動）
簡介
JavaScript 是 Web 的編程語言，所有現代的 HTML 頁面都使用 JavaScript，（很強大！！！）現在流行的JQuery，Vue都是JavaScript中的類別庫，
JS的特點
--解釋型語言：寫完了直接運行，不用編譯
--JavaScript 是一種輕量級的編程語言， 類似與C和Java的語法結構
--基于原型的面向物件，JavaScript 是可插入 HTML 頁面的編程代碼
--JavaScript是一種弱語言型別的編程語言
JavaScript 是 web 開發人員必須學習的 3 門語言中的一門：
- HTML 定義了網頁的內容
- CSS 描述了網頁的布局
- JavaScript 網頁的行為
-
JavaScript 是行為，CSS 是表現
JavaScript中的物件分類
內建物件
由ES標準定義的物件，在任何的ES的實作中都可以使用
例如：Math String Number Boolean Function Object
宿主物件
由js的運行環境提供的物件，主要有BOM、DOM
自定義物件
開發人員自己創建的物件
JavaScript 可以通過不同的方式來輸出資料：
- 使用 window.alert() 彈出警告框，
- 使用 document.write() 方法將內容寫到 HTML 檔案中，
- 使用 innerHTML 寫入到 HTML 元素，
- 使用 console.log() 寫入到瀏覽器的控制臺，
JavaScript常見的事件
在 HTML 中，JavaScript 代碼必須位于 <script> 與 </script> 標簽之間，
HTML 事件是發生在 HTML 元素上的事情，當在 HTML 頁面中使用 JavaScript 時， JavaScript 可以觸發這些事件，
主要處理事件就是“找物件”——找到HTML頁面中相應的元素；“搞物件”——為找到的元素系結事件；
| 事件 | 描述 |
|---|---|
| onchange | HTML 元素改變 |
| onclick | 用戶點擊 HTML 元素 |
| onmouseover | 用戶在一個HTML元素上移動滑鼠 |
| onmouseout | 用戶從一個HTML元素上移開滑鼠 |
| onkeydown | 用戶按下鍵盤按鍵 |
| onload | 瀏覽器已完成頁面的加載 |
代碼展示（鍵盤控制div的移動）
<html>
<head>
<meta charset="utf-8" />
<title>鍵盤移動div</title>
<style type="text/css">
/*
*定義box1的顯示效果
*/
#box1{
width: 100px;
height: 100px;
background-color: darkred;
position: absolute;
}
</style>
<script type="text/javascript">
/*
*使div根據不同方向移動
*/
window.onload = function(){
document.onkeydown = function(event){ //系結函式，event是事件物件
event=event || window.event;
console.log(event.keyCode);
switch(event.keyCode){
case 37 :
//alert("向左");
box1.style.left=box1.offsetLeft -10 +"px";
break;
case 39 :
//alert("向右");
box1.style.left=box1.offsetLeft +10 +"px";
break;
case 38 :
//alert("向上");
box1.style.top=box1.offsetTop -10 +"px";
break;
case 40 :
//alert("向下");
box1.style.top=box1.offsetTop +10 +"px";
break;
}
};
};
</script>
</head>
<body>
<div id="box1">
</div>
</body>
</html>如果本篇博客對您有一定的幫助，大家記得留言+點贊哦，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/229220.html
標籤：其他
上一篇：CSS3+JS完美實作放大鏡模式
下一篇：JS特效之超級好看的滑鼠小尾巴