javascript 基礎
主要是不想跟幾個學術長撞題啦
目錄
所以javascript是什麼？
javascript
- 動態程式語言
- 運用於HTML文件上時可以為網頁提供動態的互動功能
- ex: 跑馬燈、回應按鈕點擊⋯⋯
javascript 用法
- 開一個js檔（副檔名：.js）
- 在</body>之前輸入：
<script src="./你的js檔案名稱.js"></script>- 在html檔裡面輸入 <script></script>
一些學過程式就會的東西
基礎
超基礎語法
// 宣告：let / var
let name = 'Jack'; //字串
let age = 10; //整數
let isMarried = true; //布林值
let information = [1,'Bob','Steve',10]; //陣列
//javascript的陣列可以儲存不同資料型態的元素哦
let isClicked = document.querySelector('button');//物件
//註解
/* 這也是註解 */
//特別的運算子
if(age === 10){
isMarried = false;
}
if(name !== 'Bob'){
information[1] = 'Jack'
}
//啊不小心順便講條件判斷了補充：let vs var
| let | var |
|---|---|
| 作用於「區塊作用域 (Block Scope)」 |
使用於一些區塊語法時會感染 全域變數 |
| 禁止於同個區塊作用域重複宣告 | 可以重複宣告變數 |
for(var i=0;1<=3;i++){
console.log(i); // 0, 1, 2, 3
}
console.log(i); // 4for(let i=0; 1<=3; i++){
console.log(i); //0,1,2,3
}
console.log(i); // i is not defined
var a = 1;
var a = 2;
console. log (a); // 2
let a = 1;
let a = 2;
console.log(a); //印出'a'has already been declared一些新東西
等等用到的版面
button
id = "text"
選擇物件
- 通常用document.getElementByID()函式來選擇要產生互動的物件
-
假設我要改變大框框中的字
document.getElementById("text").innerHTML = "欸嘿字換了耶";
事件(event)
- 可以監聽瀏覽器發生了什麼事情的結構
-
DOM Event（事件處理）定義很多種事件型態，可以用 JavaScript 來監聽 (listen) 和處理 (event handling) 這些事件。
| blur | 物件失去焦點時 |
| change | 物件內容改變時 |
| click | 滑鼠點擊物件時 |
| dblclick | 滑鼠連點二下物件時 |
| error | 當圖片或文件下載產生錯誤時 |
| focus | 當物件被點擊或取得焦點時 |
| keydown | 按下鍵盤按鍵時 |
| keypress | 按下並放開鍵盤按鍵後 |
| keyup | 按下並放開鍵盤按鍵時 |
事件處理
- querySelector： 選擇器
- onclick：滑鼠按下去時
- function：匿名函式
document.querySelector("button").onclick = function() {
alert("誰叫你按我的(#`Д´)ﾉ");
};
// alert為內建函式
把前面兩個加在一起
按下按鈕 -> 跳出文字 -> 大框框中的文字改變
document.querySelector("button").onclick = function() {
alert("誰叫你按我的(#`Д´)ﾉ");
document.getElementById("text").innerHTML = "（誰說不能按的👀";
};給大家看一下範例吧
謝謝大家
JS試教
By Beth chen
