2017年5月26日課堂筆記
阿新 • • 發佈：2017-05-28
() 空氣 關鍵字 mas html bsp strong 出錯 bst
2017年5月26日 星期五 晴 空氣質量：中度汙染
內容：JavaScript：初識js，按鈕的點擊事件，變量的使用，數據類型，typeof的使用，
string的使用，數組的使用，運算符的運用，邏輯控制語句的使用
備註：5月28日補課堂筆記
一、初識js
老師代碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>初識js</title>
<!-- 網頁中引入css和js文件的順序
css在head中
js在body的最下方！因為有可能js需要獲取頁面中的元素，
如果把js放在了body之前，元素還沒有加載出來！
-->
</head>
<body onload="alert(‘這是body中的彈出框‘)">
<!--
javascipt
特點：
01.無需預編譯
02.運行在客戶端
組成部分：
01. ECMAScript，描述了該語言的語法和基本對象。
02. 文檔對象模型（DOM），描述處理網頁內容的方法和接口。
03.瀏覽器對象模型（BOM），描述與瀏覽器進行交互的方法和接口
-->
<script type="text/javascript">
<!--
alert("這是頁面中的彈出框！");
-->
</script>
<script type="text/javascript" src="js/first.js"></script>
</body>
</html>
二、按鈕的點擊事件
老師代碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>按鈕的點擊事件</title>
</head>
<body>
<input type="button" value="點擊一下" onclick="javascript:alert(‘別點擊‘)">
<a href="javascript:alert(‘不會跳轉頁面‘)">這是超鏈接</a>
</body>
</html>
三、變量的使用
老師代碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>變量的使用</title>
</head>
<body>
<script type="text/javascript">
/*聲明變量 使用 關鍵字 var 可以接收 任何類型的數據 !
聲明變量 不需要指定數據的類型！
*/
var number1=1;
var number2="a";
var number3=‘a‘;
var number4=true;
var number5=1.5;
var number6=new Date();
var number7=new Array();
var number8=[1,2,3];
var number9=null;
var number10;
var a,b,c=10; //同時聲明3個變量 但是ab都沒有賦值
/**
* 變量可以不經聲明而直接使用，但這種方法很容易出錯，也很難查找排錯，不推薦使用
* name=‘張三‘;不推薦使用 var name=‘李四‘;
*/
document.write(a+"<br/>");
document.write(b+"<br/>");
document.write(c+"<br/>");
//輸出變量 到瀏覽器中
document.write(number1+"<br/>");
document.write(number2+"<br/>");
document.write(number3+"<br/>");
document.write(number4+"<br/>");
document.write(number5+"<br/>");
document.write(number6+"<br/>");
document.write(number7+"<br/>");
document.write(number8+"<br/>");
document.write(number9+"<br/>");
document.write(number10+"<br/>");
</script>
</body>
</html>
四、數據類型
老師代碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>數據類型</title>
</head>
<body>
<!--
01.null 表示一個空值，和undefined的值相等
02.undefined 表示一個變量沒有賦予初始值
03.number 數值類型，包含了整數和浮點數
04.boolean true和false
05.string 一組被引號（單引號或雙引號）括起來的文本
06.object js中所有的對象，數組和null
-->
<script type="text/javascript">
var a=null;
var b;
document.write(a+"<br/>");
document.write(b+"<br/>");
document.write(a==b);
</script>
</body>
</html>
五、typeof的使用
老師代碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>typeof的使用</title>
</head>
<body>
<script type="text/javascript">
var num; //聲明未賦值 返回 undefined
document.write(typeof num+"<br/>");
document.write(typeof(num)+"<br/>");
var str1=‘hello‘,str2="hello!"; //同時聲明兩個變量 有單引號 和雙引號
document.write(typeof(str1)+"<br/>");
document.write(typeof(str2)+"<br/>");
var b1=true,b2=false; //聲明兩個boolean值
document.write(typeof(b1)+"<br/>");
document.write(typeof(b2)+"<br/>");
var num1=50,num2=50.5; //聲明兩個數值 整數 浮點數
document.write(typeof(num1)+"<br/>");
document.write(typeof(num2)+"<br/>");
var date=new Date();
var arr1=new Array();
var arr2=[1,2,3];
var n=null;
document.write(typeof(date)+"<br/>");
document.write(typeof(arr1)+"<br/>");
document.write(typeof(arr2)+"<br/>");
document.write(typeof(n)+"<br/>");
</script>
</body>
</html>
六、string的使用
老師代碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>string的使用</title>
</head>
<body>
<script type="text/javascript">
var str="hello";
document.write("字符串的長度是："+str.length+"<br/>");
document.write("下標是4位置的字符："+str.charAt(4)+"<br/>");
document.write("查詢l在字符串中出現的位置："+str.indexOf("l")+"<br/>");
document.write("截取1-4之間的字符串："+str.substring(1,4)+"<br/>");//包含第一個位置 不包含最後一個位置
document.write("將字符串分割成字符串數組："+str.split("e")+"<br/>");
</script>
</body>
</html>
七、數組的使用
老師代碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>數組的使用</title>
</head>
<body>
<script type="text/javascript">
/**
* 定義數組
*/
var arr1=new Array();
var arr2=new Array(5);
var arr3=new Array(1,2,3,4,5,6);
var arr4=["a","b","c"];
document.write("arr1數組的長度是："+arr1.length+"<br/>");
document.write("arr2數組的長度是："+arr2.length+"<br/>");
document.write("arr3數組的長度是："+arr3.length+"<br/>");
document.write("arr3數組中下標是5的元素："+arr3[5]+"<br/>");
document.write("arr4數組中下標是0的元素："+arr4[0]+"<br/>");
//定義一個字符串 把字符串轉換成 字符串數組
var str="a,b,c,d,e,f";
var arr5=str.split(",");
document.write("arr5數組的長度是："+arr5.length+"<br/>");
//向數組中的最後一個位置增加元素
arr5.push("g");
document.write("arr5數組下標是6的元素："+arr5[6]+"<br/>");
//把數組中的每一個元素通過一個分割符連接在一起稱為一個新的字符串！
str=arr5.join("$");
document.write(str);
</script>
</body>
</html>
八、運算符的使用
老師代碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>運算符的使用</title>
</head>
<body>
<!--
=：賦值運算
==：把比較的兩個變量轉換成相同的數據類型之後，再比較！
===:比較的兩個變量的數據類型和值 都要一致!才會返回true！
-->
<script type="text/javascript">
var num=50;
var str="50";
document.write(num==str);
document.write(1=="1");
document.write(1==="1");
/**
* 常用的運算符
*/
document.write("+運算："+(5+5)+"<br/>");
document.write("-運算："+(5-5)+"<br/>");
document.write("*運算："+(5*5)+"<br/>");
document.write("/運算："+(5/5)+"<br/>");
// % 取余
var num=3;
/*
++在變量前 先自身加1 之後參與運算
++在變量後 先參與運算 之後自身加1
*/
document.write("%運算："+(5%3)+"<br/>");
document.write("++運算："+(num++)+"<br/>");
document.write("--運算："+(num--)+"<br/>");
document.write("--運算之後："+(num)+"<br/>");
</script>
</body>
</html>
九、邏輯控制語句的使用
老師代碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>邏輯控制語句使用</title>
</head>
<body>
<script type="text/javascript">
//if
if(1==1){
document.write("1==1");
}else{
document.write("1!=1");
}
//switch 根據用戶不同的輸入 進入不同的代碼塊
var choose= window.prompt("請輸入序號：");
//因為用戶輸入的都是string 我們需要轉換成number
switch(parseInt(choose)){
case 1:
alert("您輸入了1");
break;
case 2:
alert("您輸入了2");
break;
case 3:
alert("您輸入了3");
break;
default:
alert("您輸入了什麽");
break;
}
//for
for(var i= 0;i<10;i++){
if(i==5){
continue;
}
document.write(i+"<br/>");
}
/** for in
* 語法
* for(聲明變量a in 對象)｛
* 對象[a]來獲取集合中的元素
* a：就是一個下標
* ｝
*/
var arr=["A","b","C"];
for(var i in arr){
document.write(arr[i]+"<br/>");
}
</script>
</body>
</html>
十、作業和考試
1、視頻多看，代碼多敲，至少看完js，看完就看jQuery
2、考試：
2017.05.26
15: 32 開始，16:28 結束；答題時間：54 分鐘；檢查時間: 2 分鐘；
成績： 84 分
正則表達式是弱項，需要加強學習！把JS看完是最低目標！
十一、老師辛苦了！
2017年5月26日課堂筆記