今天主要内容:
- JavaScript介绍
- ECMAScript基本调试
- 变量与数据类型
- 运算符
- 分支语句与循环语句
- 数组与函数
1、JavaScript介绍
1>什么是JavaScript
JS是一种运行于JS解释器/引擎中的解释型脚本语言
编译型语言：程序在运行前会进行编译
解释型语言：运行之前不会编译，直接执行，出错则停止
2>JavaScript发展史
1、1992年 Nombas 为自己的软件开发了一款脚本语言C Minus Minus(C--)后更名为 ScriptEase,可以嵌入在网页中。
2、1995年 Netscape为自己的Navigator2.0 开发了另一种客户端脚本语言-LiveScript,为了借助Java势头，所以更名为 Javascript
3、1996年Microsoft为了进军浏览器市场，在IE3.0 中 发布了Javascript的克隆版，称为JScript
4、1997年，Javascript1.1作为草案提交给了ECMA(欧洲计算机制造商联合会),Javascript的核心 被更名成 ECMAScript
3>JavaScript完整组成部分
- ECMASCript:
JavaScript主要定义JS语言中变量,运算符,数据类型,循环,数组,面向对象,API等一些编程语言规范 - DOM
Document Object Model
文档对象模型
让JS可以操作页面上的HTML元素，操作页面内容 - BOM
Browser Object Model
浏览器对象模型
让JS可以操作访问浏览器
4>JavaScript语言的特点和用途
特点:
- 解释性语言，不需要编译，可以使用任何文本工具编译
- 弱类型脚本语言，由数据来决定数据类型
- 面向对象的语言
用途: - 客户端数据计算
- 表单输入验证
- 浏览器事件的触发和处理
- 网页动态效果制作
- 服务器端的异步数据提交(AJAX)
2、ECMAScript基本调试
1>JavaScript基本用法
- 定义在head中
不建议使用，因为会先加载js代码，再加载页面，导致页面卡顿
<head>
<script></script>
</head> - 定义在body标签结束之前，其他html标签之后，先加载页面，再加载js
<body>
<script></script>
</body> - 定义在外部一个单独的js文件中，在body结束标签之前进行引入，里面不能再写其他JS代码
<script src="js地址"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js基本用法</title>
<script>
//输出一句话
console.log("hello~Js");
</script>
</head>
<body>
<!--避免页面卡顿,建议script放在
body结束标签之前
-->
<script>
console.log("哈哈哈");
</script>
<!--引入外部JS文件,不能再在里面写JS代码-->
<script src="js/my.js"></script>
<script>
console.log("嘿嘿");
</script>
</body>
</html>
2>JavaScript基本调试信息
注释:
// 单行注释
/**/ 多行文本注释
调试信息:
console.log() 控制台输出
document.write() 页面输出
弹窗
alert() 警告框
confirm() 确认框
prompt() 输入框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
//单行注释
/*多行文本注释*/
/*JS代码调试方式*/
//控制台输出
console.log("控制台输入页面","aaa","bbb","ccc");
//浏览器页面输出
document.write("<h1 style='color: red;'>页面<br/>输出</h1>");
//弹窗
alert("弹窗");
//确认框
confirm("确认关闭吗?");
//输入框
prompt("请输入你的姓名");
</script>
</body>
</html>
3、变量与数据类型
1、变量
JS是一门弱类型编程语言,所有的变量，都使用var来定义,变量的具体类型是由值来确定的,变量命名规范与Java一样
2、数据类型(4种基本类型+引用类型)
基本类型:
- number
数值类型，可以代表整数类型，也可以代表浮点类型，包括NAN - string
字符串类型，可以表示字符，也可以表示字符串，使用单引号或双引号括起来 - boolean
布尔类型，表示真假，值:true/false
-undefined
未定义类型，定义了一个变量但是没有赋值，值和类型都是undefined
引用类型:object
JS内核中定义的Array,Date,String等
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
//js变量的定义
var a = 10;
var b = 12.3;
var c = "abc";
var d = true;
console.log(a,b,c,d);
//查看变量的类型
var f = 10;
console.log(f,typeof f);//number
f = 12.3;
console.log(f,typeof f);//number
f = false;
console.log(f,typeof f);//boolean
f = "abc";
console.log(f,typeof f);//string
f = 'abcdef';
console.log(f,typeof f);//string
f = new Object();
console.log(f,typeof f);//object
f = null;
console.log(f,typeof f);//object
//变量定义但是没有赋值
//那么值和类型都是undefined
var m;
console.log(m,typeof m);//undefined
</script>
</body>
</html>
3、运算符
1>算术运算符:+ - * / % ++ --
- * / %:如果有纯数字类型串参与运算
会先将字符串解析为整数
++ --:如果有字符串,尽可能先将字符串解析成整数
2>比较运算符: > < >= <= == != === !==
> < >= <=:如果字符串和数字比较,会先将字符串解 析为整数，如果是字符串之间互相比较，按照字母表顺序比较
== != 只比较内容
=== ！== 同时比较内容和类型
3>逻辑运算符: && || !
4>赋值运算符: = += -= *= /= %=
5>三项运算符: ?:
6>位运算符: ^ & | ~
7>移位运算符: >> >>> <<
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
/*js运算符*/
//算术运算符
var a = 15;
var b = "2";
var result = a+b;
console.log(result);
result = a-b;
console.log(result);
result = a*b;
console.log(result);
result = a/b;
//向下求整得整数
result = Math.floor(result);
console.log(result);
result = a%b;
console.log(result);
result = b+++(++b);
console.log(result);
var i = 1;
i = i++;
i = i++;
i = i++;
i = i++;
console.log(i);
var m = 1;
var n = m++;
n = m++;
n = m++;
n = m++;
console.log(m,n);
//比较运算符
var c = "20";
var d = 20;
console.log(c>d,c>=d);
console.log(c<d,c<=d);
//==只比较内容
console.log(c==d);//true
console.log(c!=d);//false
//===同时比较内容和类型
console.log(c===d);//false
//内容和类型只要有一个不一致,就为true
console.log(c!==d);//true
//逻辑运算符
var a = 20;
var b = 30;
var f = a++>20 && --b<30;
console.log(f,a,b);
//三项运算符
// 只使用一次表达式,求出a,b,c三个数中最大值
a = 20;
b = 30;
c = 50;
max = a>b?(a>c?a:c):(b>c?b:c);
console.log(max);
</script>
</body>
</html>
4、分支语句
1>if(){}else{}
2>if(){
}else if(){
}...
else{}
3>switch(){
case 值:语句;break;
case 值:语句;break;
...
default:语句;
}
1>JS会将非0数字解析为true，将0解析为false
2>JS会将非空字符串解析为true，将空字符串解析为false
3>JS会将null和undefined解析，为false
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
/*JS分支语句*/
var f = true;
f = 10;//true
f = 0;//false
f = 12.3;//true
f = -12;//true
f = "abc";//true
f = "";//false
f = " ";//true
f = "0";//true
f = null;//false
var a;//undefined-->false
if(a){
console.log("今天周五");
}else{
console.log("今天周一");
}
console.log(100?"aaa":"bbb");
console.log("呵呵"?111:222);
console.log("哈哈"&&"呵呵");
</script>
</body>
</html>
5、循环语句
1、for(初始化表达式;条件判断;递增递减){}
2、while(){}
3、do{}while();
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
//for循环向浏览器页面输出10句话
for(var i=0;i<10;i++){
document.write("<h1 style='color:red'>循环测试"+i+"</h1>");
}
//while循环不断的弹窗
// while(true){
// alert("关不掉啊");
// }
//do~while循环,输出5个大于0.999小于1的浮点数
for(var i=0;i<5;i++){
var num;
do{
num = Math.random();
}while(num<0.999);
document.write(num+"<br/>");
}
</script>
</body>
</html>
6、数组
1>数组概念
Java:存储一组连续的且数据类型相同的元素
JS:可以存储一组不连续,或者数据类型不相同的元素
2>数组定义
var arr = new Array(1,2,3...);
var arr = [1,2,3];
3>数组元素访问,赋值,修改
与java一样,通过下标操作,下标从0开始
可以不连续,数组中可以放入任意数据类型元素,会自动扩容
4>数组常用API
sort():排序
concat():拼接数组
slice():截取数组
length:数组长度
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
/*JS数组的应用*/
//1、数组的定义
var arr = new Array();
arr = [1,2,3];
console.log(arr,typeof arr);
//2、获取数组中元素,通过下标,下标从0开始
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
console.log(arr[4]);//undefined
//3、往数组中添加元素,通过下标
arr[3] = true;
arr[4] = "abc";
arr[5] = [false,"abc",100];
arr[8] = 12.3;
arr[11] = 'mn';
console.log(arr[6],arr[7]);//undefined
console.log(arr);
//4、获取数组长度,最大下标加1
console.log(arr.length);
//5、数组API
var arr1 = [1,true];
var arr2 = ["abc",12.3];
//拼接数组
var arr3 = arr1.concat(arr2);
console.log(arr3);
//数组元素倒序
arr3 = arr3.reverse();
console.log(arr3);
//数组排序,匿名函数自己指定排序规则
var arr4 = [6,8,4,2];
arr4.sort(function(n1,n2){
return n2-n1;
});
console.log(arr4);
var a = [1,2,3,4,5,6,7,8]
console.log(a.splice(4));//截取部分
console.log(a);//剩余部分
//从起始位置截取到结束位置
var arr = [1,2,3,4,5,6];
console.log(arr.slice(2,5));
</script>
</body>
</html>
7、函数
7、函数
1>函数概念
封装了一个特定功能的代码块并进行命名,
给其他地方进行调用
2>函数的语法
java:
修饰符 返回值类型 方法名(参数列表...){}
JS:
function 函数名(参数列表){}
1)函数没有修饰符和返回值类型
需要返回直接加return
2)参数列表不能带类型var
3>函数调用
1)JS中没有函数重载概念,如果两个函数名称相同,那么
后写的会将先写的覆盖
2)JS中内置对象arguments用于存储函数调用过程中的实参,本质上是一个数组
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
//封装一个函数,用于从控制台打印输出
//没有修饰符,没有返回值类型
//形参不能带类型
function print(content){
console.log(content);
}
//调用函数,只检测函数名称
print("呵呵");
print(100);
print(true);
print();//undefined
print("aaa","bbb");//aaa
//console.log(print("sss")); 调用错误,函数没有返回值
//定义一个函数,计算两个数的和
function add(a,b){
return a+b;
}
//函数覆盖
function add(a,b){
return a-b;
}
function add(a,b,c){
console.log(a,b,c);
return a*b;
}
/*
* arguments用于接收函数
* 调用过程中的实参,以数组形式存储
* arguments = [5,6,7]
*/
function add(){
console.log(arguments);
//将所有实参进行累加
var sum = 0;
for(var i=0;i<arguments.length;i++){
sum += arguments[i];
}
return sum;
}
var result = add(5,6);
console.log(result);
</script>
</body>
</html>
