2017年5月26日课堂笔记
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看完是最低目标！
十一、老师辛苦了！
