之前学了html、css两种静态资源
JavaScript是另一种静态资源，今日内容【重点】：JavaScript（是一门编程语言，2days）基础
一、JavaScript简介
1.概念
JavaScript是一门客户端脚本语言
- 运行在客户端浏览器中
- 每一个浏览器都有JavaScript的解析引擎（不需要编译）
- 脚本语言：不需要编译，直接就可以被浏览器解析执行
功能：
- 可以增强用户和html页面的交互过程，可以来控制html元素，让页面有一些动态的效果，增强用户的体验
2.发展史
之前速度慢
- 1992年，Nombase公司开发出第一门客户端脚本语言，专门用于表单的校验，命名为：C--，后来更名为ScriptEase
- 1995年，Netscape（网景）公司【做浏览器】，开发了一门客户端脚本语言：LiveScript。后来请来SUN公司的专家，修改 LiveScript，命名为JavaScript
- 1996年，微软抄袭了JavaScript开发出了JScript
- 1997年，ECMA（欧洲计算机制造商协会）制定了标准：ECMAScript就是 所有客户端脚本语言的标准
JavaScript=ECMAScript+JavaScript特有的东西（BOM和DOM两类对象）
每种客户端对BOM和DOM对象的实现有所差异
二、JavaScript语法（ECMAScript）
1.基本语法【与Java很接近】
1.1与html的结合方式（两种）
- 内部js：定义<script>，标签体内容就是js代码
- 外部js：定义<script>，通过src属性引入外部的js文件
- 注意：
- <script>可以定义在html页面的任何地方，但是定义的位置会影响执行顺序
- <script>可以定义多个
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>结合方式</title>
<!--
内部JS
可以定义在任意位置
外部JS
-->
</head>
<body>
<input type="text">
<script>
alert("helloWorld");
/*弹窗显示字符串，阻塞式代码*/
</script>
<script src="js/a.js"></script>
</body>
</html>
1.2注释
- 单行注释：//注释内容
- 多行注释：/*注释内容 */
1.3数据类型
Java两种：基本数据类型和引用数据类型
JavaScript：原始数据类型和引用数据类型
- 原始数据类型
- number：整数、小数/NaN(Not a number一个不是数字的数字类型)
- string：字符串，如'abc',"a"
- boolean：true和false
- null：一个对象为空的占位符
- undefined：未定义。如果一个变量没有初始化值，则会被默认赋值为undefined
- 引用数据类型（对象）
1.4变量：一小块存储数据的内存空间
- Java是强类型语言，JavaScript是弱类型语言
- 强类型：在开辟变量存储空间时，定义了空间将来存储的数据类型，只能存储固定类型的数据
- 弱类型：在开辟变量存储空间时，不定义空间将来的存储数据类型，可以存放任意类型的数据
- 语法：
- var 变量名 = 初始化值；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>变量</title>
<script>
//定义变量
/*var a=3;
alert(a);
a="abc";
alert(a);*/
//定义number类型
var num=1;
var num2 = 1.2;
var num3 = NaN;
//把内容输出到页面上
document.write(num+"---"+typeof (num)+"<br>");
document.write(num2+"---"+typeof (num2)+"<br>");
document.write(num3+"---"+typeof (num3)+"<br>");
//定义String类型
var str = "abc";
var str2 = 'edf';
document.write(str+"---"+typeof (str)+"<br>");
document.write(str2+"---"+typeof (str2)+"<br>");
//定义boolean类型
var flag = true;
document.write(flag+"---"+typeof (flag)+"<br>");
//定义 null
var obj = null;
var obj2= undefined;
var obj3;
//默认就是undefined
document.write(obj+"---"+typeof (obj)+"<br>");
document.write(obj2+"---"+typeof (obj2)+"<br>");
document.write(obj3+"---"+typeof (obj3)+"<br>");
</script>
</head>
<body>
</body>
</html>
1.5 运算符
- 一元运算符 ：只有一个运算数的运算符，
- 如++ --（自增自减）,+（正号）
- ++(--)在前：先自增/自减，再运算
- ++（--）在后：先运算，再自增/自减
- 注意：如果运算数不是运算符所要求的类型，js引擎会自动将与运算数进行类型转换
- 其它类型转number：
- string转number：按照字面值转换，如果字面值不是数字，则转为NaN（不是数字的数字 ）
- boolean转number：true转为，false转为0
- 算数运算符 ：+ - * 、 %
- 赋值运算符：= += -= *=
- 比较运算符【重点】：> >= == ===【全等于】
- 1.类型相同：直接比较
- 字符串：按照字典顺序比较，按位比较，逐一比较，直到得出大小为止
- 2.类型不同：先进行类型转换，再比较
- ===：全等于。在比较之前，先判断类型，如果类型不一样，则直接返回false
- ===的短路效果，第一步先确定，确定了就不用再继续参与运算了
- 逻辑运算符：&& || ！
- &&：与（短路效果）
- ||：或（短路效果）
- !：非
- 其他类型转boolean
- number：0或NaN为假，其他为真
- string：除了空字符串（""），其他都为true
- null&undefined：都是false
- 对象：所有对象都为true
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>逻辑运算符</title>
<script>
/*
逻辑运算符
&&：与（短路效果）
||：或（短路效果）
!!
* */
var flag = true;
document.write(flag+"<br>");
document.write(!flag+"<br>");
document.write("<hr>");
//number
var flag = 3;
document.write(!!flag+"<br>");
document.write("<hr>");
var num = 3;
var num2 = 0;
var num3 = NaN;
document.write(!!num+"<br>");
document.write(!!num2+"<br>");
document.write(!!num3+"<br>");
while(1){
document.write("死循环");
num+=1;
if(num%100==0){
break;
}
}
document.write("<hr>");
//string
var str = "abc";
var str2 = "";
document.write(!!str+"<br>");
document.write(!!str2+"<br>");
//null&undefined
var obj = null;
var obj2 = "";
document.write(!!obj+"<br>");
document.write(!!obj2+"<br>");
//object
var date = new Date();
document.write(!!date+"<br>");
var obj = new Date();
if(obj!=null){//防止空指针异常
alert(123);
}
//或
if(obj){//防止空指针异常
alert(111);
}
//如果是字符串
var obj="111";
if(obj!=null && obj.length > 0){
alert(222);
}
//空字符串也会转成false，不是空字符串就转为true
//js可以这么定义，简化书写
if(obj){//防止空指针异常
alert(113331);
}
//空字符串则不满足
</script>
</head>
<body>
</body>
</html>
- 三元运算符：
- ？：表达式
- 语法：表达式？值1？值2；
- 判断表达式的值，如果是true则取值1，否则取2
<script>
var a = 3;
var b = 4;
var c = a > b ? 1 : 0;
alert(c)
</script>
1.6流程控制语句
- if...else...
- switch...
- 在java中，switch语句可以接受的数据类型：byte/int short/char/枚举（1.5）/String（1.7）
- switch（变量）：
case 值：｛｝
- 在JavaScript中，什么类型都可以接收，且case后面不用加大括号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>switch语句</title>
<script>
var a = 1;
switch (a){
case 1:
alert("number");
break;
case "abc":
alert("string");
break;
case null:
alert("number");
break;
case undefined:
alert("number");
break;
case true:
alert("true")
break;
}
</script>
</head>
<body>
</body>
</html>
- while
- do..while
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>while语句</title>
<script>
//1~100求和， 5050
var sum=0;
var num=1;
while ( num <= 100){
sum+=num;
num++
}
alert(num);
var sum = 0;
for( var i= 1; i<100; i++){
sum+=i
}
alert(sum)
</script>
</head>
<body>
</body>
</html>
- for
1.7 特殊语法
- 1.语句以分号结尾，如果一行只有一条语句，则可以省略（不建议）
- 2.变量的定义使用var关键字，也可以不使用【作用范围不同】
- 用：定义的变量是局部变量
- 不用：定义的变量是全局变量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>特殊语法</title>
<script>
//1.语句以分号结尾，如果一行只有一条语句，则可以省略（不建议）
var a=3
alert(a+"<br>")
/*
2.变量的定义使用var关键字，也可以不使用【作用范围不同】
用：定义的变量是局部变量
不用：定义的变量是全局变量
* */
var b=4;
alert(b);
function fun(){
var b=4;
alert(b);
}
alert(b);//访问不了
function fun1(){
c=4;
}
alert(c+"<b>")//可以访问
//推荐
var d
function fun2(){
d=10
}
alert(d)
</script>
</head>
<body>
</body>
</html>
2..练习：九九乘法表
<!DOCTYPE html>
<html lang="en">
<head>
<style>
td{
border:1px solid;
}
</style>
<meta charset="UTF-8">
<title>99乘法表</title>
<script>
document.write("<table border='0' align='center'>");
//1.完成基本的for循环嵌套，展示乘法表
for(var i = 1; i<=9;i++){
document.write("<tr>");
for (var j =1;j<=i;j++){
document.write("<td>");
//输出1*1=1
document.write(i+"*"+j+"="+(i*j)+" ")
document.write("</td>");
}
/*//输出换行
document.write("<br>");*/
document.write("</tr>");
}
//2.表格结束
document.write("</table>");
</script>
</head>
<body>
</body>
</html>
三、JavaScript对象
1、基本对象
Function对象：函数对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Function对象</title>
<script>
/*
Function：函数（方法）对象【在java中，对象属于函数或方法的一部分，在js中，方法就是对象】
1、创建
1. var fun = new Function(形参列表,方法体)；//知道就行
2.function 方法名称（形式参数列表）｛
方法体；
｝
3. var 方法名 = function(形参列表)｛
方法体；
｝
2、方法
3、属性
length：代表形参的个数
4、特点
1.方法定义时写，形参的类型var不用写，返回值类型也不用写
2.方法是一个对象，如果定义名称相同的方法，会覆盖
3.在js中，方法的调用只与方法名称有关，和参数列表无关
4.在方法声明中，有一个隐藏的内置对象（数组），该对象叫arguments，封装了所有对象的参数
5、调用
方法名称（实参列表）
* */
//1.创建方式1
var fun1 = new Function("a","b","c","alert(a)");
//调用方法
//fun1(3,4);
//alert(fun1.length);
//2.创建方式2
function fun2(a ,b){
alert(a + b);
}
//alert(fun2.length);
//调用方法
//fun2(3,4);
//3.创建方式3
var fun3 = function (a ,b) {
alert(a + b);
}
//覆盖fun2的声明
/*fun2 = function (a , b) {
alert(a - b);
}*/
function fun2(a ,b){
alert(a);
alert(b);
}
//方法调用
//fun2(1 ,2);
//只写第一个参数
//fun2(1);
//一个参数也不写
//fun2();//undefined
//传3个参数
//fun2(1 ,2 ,3);
//alert(fun3.length);
//fun3(3,4);
/*
求两个数的和
* */
function add(a , b) {
return a + b;
}
//var sum = add(1 , 2);
//alert(sum);
/*
求任意个数的和
* */
function add() {
var sum = 0;
for (var i = 0; i< arguments.length ; i++){
sum+=arguments[i];
}
alert(sum);
}
add(1,3 ,2,4);
</script>
</head>
<body>
</body>
</html>
Array：数组对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Array对象</title>
<script>
/*
Array对象
1、创建
1.var arr = new Array(元素列表)；
2.var arr = new Array(默认长度)；
3.var arr=[元素列表]；
2、方法
join(参数) 把数组中的所有元素按照指定拼接符放入一个字符串。
push() 向数组的末尾添加一个或更多元素，并返回新的长度。
3、属性
length：数组长度
4、特点
1.JS中，数组元素的类型是可变的
2.JS中，数组的长度是可变的
* */
//1.创建方式1
/*var arr1 = new Array(1, 2 ,3);
var arr2 = new Array(5);//只有一个数字，代表长度
var arr3 = [1,2,3,4];
var arr4 = new Array();
document.write(arr1+"<br>");
document.write(arr2+"<br>");
document.write(arr3+"<br>");
document.write(arr4+"<br>");*/
var arr=[1,"abc",true];
document.write(arr+"<br>");
document.write(arr[0]+"<br>");
document.write(arr[1]+"<br>");
document.write(arr[2]+"<br>");
//document.write(arr[3]+"<br>");//undefined
//document.write(arr[10]+"<br>");
arr[10] = "呵呵";
arr.push(11);
document.write(arr[10]+"<br>");
document.write(arr+"<br>");//9876543是undefined，直接遍历啥也没有
document.write(arr.length+"<br>");
document.write(arr.join("-")+"<br>");
</script>
</head>
<body>
</body>
</html>
Boolean
Date
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Date日期对象</title>
<script>
/*
Date日期对象
1、创建
var date = new Date();
2、方法
toLocaleString()：根据本地时间格式，把 Date 对象转换为字符串。
返回当前date对象对应的时间本地字符串格式
getTime() 返回 1970 年 1 月 1 日至今的毫秒数，返回当前日期对象描述的时间和1970年1月1日零点的毫秒值差
* */
var date = new Date();
document.write(date+"<br>");
document.write(date.toLocaleString()+"<br>");
document.write(date.getTime()+"<br>");
</script>
</head>
<body>
</body>
</html>
Math
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Math数学对象</title>
<script>
/*
Math数学对象
1、创建
特点：该对象不用创建，直接使用，如Math.方法名()
2、方法
random() 返回 0 ~ 1 之间的随机数。【含0不含1】
ceil(x) 对数进行上舍入。
floor(x) 对数进行下舍入。
round(x) 把数四舍五入为最接近的整数。
3、属性：
PI 返回圆周率（约等于3.14159）
* */
document.write(Math.PI+"<br>");
document.write(Math.random()+"<br>");
document.write(Math.round(3.15)+"<br>");
document.write(Math.ceil(3.15)+"<br>");
document.write(Math.floor(3.15)+"<br>");
/*
练习：取1-100之间的随机整数
1、Math.random()产生随机数，范围[0,1)
2、将此随机数乘以100.范围为[0,100)
3、舍弃小数部分（向下取整）floor，变为了[0,99]的整数
4、整体+1，变成了[1,100]
* */
var random = Math.floor(Math.random()*100)+ 1;
document.write(random+"<br>");
</script>
</head>
<body>
</body>
</html>
Number：包装对象
String：包装对象
RegExp：正则表达式对象
- 正则表达式：定义字符串的组成规则
- 单个字符：[]
- 如：[a]表示任意单个字符 [ab] a或者b [a-z] [A-Z] [a-zA-Z0-9]
- 通过特殊符号代表特殊含义的单个字符：
- \d表示单个数字字符，即[0-9]
- \w表示单个单词字符，即 [a-zA-Z0-9]
- 量词符号
- ?：表示出现0次或1次
- *：表示出现0次或多次
- +：出现1次或多次
- {m,n}表示数量介于m和n之间
- 如\w*表示任意个字符，\w{6,12}表示字符介于6-12位之间
- m如果缺省：{,n}表示最多n次
- n如果缺省：{m,}表示最少m次
- 开始结束符号：
- 开始：^
- 结束：$
- 正则对象
- 创建
- var reg = new RegExp("正则表达式");
- var reg = /正则表达式/;
- 方法
- test(参数)：验证指定的字符串是否符合正则定义的规范
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>RegExp正则对象</title>
<script>
/*
RegExp正则对象
1、创建
1.var reg = new RegExp("正则表达式");
2.var reg = /正则表达式/;
2、方法
1.test(参数)：验证指定的字符串是否符合正则定义的规范
* */
//1.
var reg = new RegExp("\\w{6,12}");//转义字符
//2.
var reg1 = /^\w{6,12}$/;//表示以单词字符开头，以单词字符结尾
//alert(reg);
//alert(reg1);
//验证
var username = "zhangsanzhangsan";
var flag = reg1.test(username);
alert(flag)
</script>
</head>
<body>
</body>
</html>
Global（位于Function下）
- 特点：是一个全局对象，这个Global中封装的方法，不需要对象就可以直接调用。 方法名();
- 方法
- URL编码：浏览器数据传输协议http中，中文数据想要传送，则需要进行编码
- 传智播客：word=%E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2
- 12个字节：UTF8编码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Global对象</title>
<script>
/*
Global对象
1.特点：是一个全局对象，这个Global中封装的方法，不需要对象就可以直接调用。 方法名();
2.方法
encodeURI() 把字符串编码为 URI。URI编码
decodeURI() 解码某个编码的 URI。URI解码
encodeURIComponent() 把字符串编码为 URI 组件。URI编码
decodeURIComponent() 解码一个编码的 URI 组件。URI解码【编码解码的字符更多】
parseInt() 解析一个字符串并返回一个整数。【将字符串转为数字，功能更强大】
逐一判断每一个字符是否是数字，直到不是数字位置，将前边数字部分转为number
isNaN() 检查某个值是否是数字
NaN六亲不认：连自己都不认。NaN参与的==比较，全部为false
eval（) 计算 JavaScript 字符串，并把它作为脚本代码来执行【将字符串转换为脚本执行】
3.URL编码
传智播客：word=%E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2
* */
var str = "http://www.baidu.com?word=传智播客";
var encode = encodeURI(str);
document.write(encode+"<br>");
var s = decodeURI(encode);
document.write(s+"<br>");
var str1 = "http://www.baidu.com?word=传智播客";
var encode1 = encodeURIComponent(str1);
document.write(encode1+"<br>");
var s1 = decodeURIComponent(encode1);
document.write(s1+"<br>");
var str = "a123abc";//转为NaN
var number = parseInt(str);
//document.write(number+1+"<br>");
var a = "abc";
document.write(a == NaN+"<br>");
document.write(NaN == NaN+"<br>");
document.write(isNaN(a)+"<br>");
var jscode = "alert(123)";
alert(jscode);
eval（jscode);
</script>
</head>
<body>
</body>
</html>
作者：哥们要飞
