1、概念：
是一门客户端的脚本语言，每一个浏览器都有JavaScript的解析引擎
*脚本语言：不需要编译，直接可以被浏览器解析执行
2、功能：
可以增强用户和 html 的交互过程，可以控制html元素，增强用户体验
3、JavaScript的发展史：
1. 1992年，Nombase公司，开发出第一门客户端脚本语言，专门用于表单的校验，命名为：C—,后更名为：ScriptEase
2. 1995年 , Netscape ( 网景)公司，开发出一门客户端脚本语言：LiveScript。后来，请SUN公司专家，修改LiveScript,命名JavaScript
3. 1996年，微软借鉴（ChaoXi）JavaScript开发出JSscript
4. 1997年，ECMA（欧洲计算机制造商协会）,ECMAScript，就是所有客户端脚本语言的标准
*JavaScript == ECMAScript + JavaScript （BOM + DOM）
4、ECMAScript
*客户端脚本语言标准
1.基本语法
1.与html结合方式
1.内部JS
* 定义<script>标签,标签体内就是js代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--
内部JS
外部JS
-->
<script>
alert("hello world!");
</script>
<script src="../js01/a.js"></script>
</head>
<body>
</body>
</html>2.外部JS
*定义<script>标签，通过 src 属性引用外部 js 文件
2.注释
单行注注释：//
多行注释：/*注释*/
3.数据类型
1.number：数字。整数/小数/NAN（not a number：不是一个数字的数字类型）
2.string：字符串。字符串 “abc” “a” ‘abc’
3. boolean：true 和 false
4.null：一个对象为空的占位符
5.undefined ：未定义。如果一个变量没有给初始化值，则会被赋值为undefined
4.变量
*变量：一小块存储数据的内存空间
*Java语言是强类型语言，而JavaScript是弱类型语言
*强类型：在开辟变量存储空间时候，定义了空间将来存储的数据的数据类型，只能存储固定类型的数据
*弱类型：在开辟变量存储空间的时候，不定义空间将要存储数据的数据类型，可以存任意类型数据
5.运算符
1.一元运算符：只有一个运算数的运算符（++ ,—,+（正号），-（负号））
*在JS中如果运算数不是运算符所要求的类型，那么JS引擎会自动将运算数进行转换，string转number按照字面值转换，如果字面值不是数字，则转为NaN
2.算术运算符：（+，-，*，/…）
3.赋值运算符：（=，+=，-=...）
4.比较运算符：（<,>,<=,>=,==,===(全等于:在比较之前先判断类型)）
5.逻辑运算符：（&&，||，！）
*其他类型转boolean (1.number：0或NaN为假，其他为真 ，2.string：除了空字符串””为false 其他都为true ，3.null && undefined都是false ，4.对象：所有对象都为true)
6.三元运算符：（？：）
7.特殊语法：
1.语句一行只有一个，可不加分号（不建议）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
var a = 3
alert(3)
</script>
</head>
<body>
</body>
</html>2.变量定义使用 var 也可以不使用（用：局部变量；不用：全局变量）
6.流程控制语句
1. if…else
2. switch
*在Java中，switch可以接收的数据类型(byte,short,int,long,enum,String)
*js中可以接收任意数据类型
switch(){
case()
//…
break;
default
break;
}
2.基本对象
1.Function：函数（方法对象）
1.创建：
1.var fun = new Function(形参列表，方法体)；
2.function 方法名称（形参列表）{
// 方法体
}
3.var 方法名 = function(形参列表){
// 方法体
}
2.方法
3.属性
4.特点
1.方法定义时，形参类型不用写
2.方法是一个对象，同名方法会覆盖
3.在JS中，方法的调用只和方法的名称有关，和参数列表无关
4.在方法声明中有一个隐藏的内置对象（数组），arguments,封装所有的实际参数
5.调用：
方法名称（实际参数列表）；
/*
Function：函数（方法对象）
1.创建：
1.var fun = new Function(形参列表，方法体)；
2.function 方法名称（形参列表）{
// 方法体
}
3.var 方法名 = function(形参列表){
// 方法体
}2.方法
3.属性
4.特点
1.方法定义时，形参类型不用写
2.方法是一个对象，同名方法会覆盖
3.在JS中，方法的调用只和方法的名称有关，和参数列表无关
4.在方法声明中有一个隐藏的内置对象（数组），arguments,封装所有的实际参数
5.调用：
方法名称（实际参数列表）；
*/
// 创建方式1
/*var fun1 = new Function("a","b","alert(a);");
// 调用方法
fun1(3,4);*/
// 创建方式2
/*function fun2(a,b){
alert(a+b);
}
// 调用方法
fun2(3,4);*/
// 创建方式3
// var fun3 = function(a,b){
// alert(a * b);
// }
// // 调用方法
// fun3(3,4);
/*
*求两数之和
*/
// function fun3(a, b){
// alert(a + b);
// }
// fun3(5,6);
/**
* 求任意数之和
*/
function fun4(){
var sum = 0;
for(var i = 0; i < arguments.length; i++){
sum += arguments[i];
}
return sum;
}
var sum = fun4(1,2,3,4,5);
alert(sum);
2.Array：数组对象
1.创建：
1.var arr = new Array(元素列表)；
2.var arr = new Array(默认长度)；
3.var arr = [元素列表]；
2.方法
1.join：将数组中的元素按指定的分隔符拼装成字符串
3.属性
1.length：数组的长度
4.特点
1.JS中元素类型是可变的，长度是可变的
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 + "
");
document.write(arr2 + "
");
document.write(arr3 + "
");
document.write(arr4 + "
");
3. Math:数学
1.创建：
1.Math对象不用创建，直接使用：Math.方法名（）
2.方法：
1.random()：返回0～1之间的随机数（含0不含1）
2.ceil()：对数进行向上舍入
3.floor()：对数进行向下舍入
4.round():对数进行四舍五入
3.属性：
1.PI
/*
取1～100的随机整数
*/
var a = (Math.floor(Math.random()*100)+1)
document.write(a)
4. RegExp：正则表达式对象
1.正则表达式：定义字符串组成规则
1.单个字符：[]
如：[a][ab][a-zA-Z0-9]
特殊符号代表特殊含义的单个字符：
\d：单个字符[0-9]
\w：单个字符[a-zA-Z0-9]、
2.量词符号：
?：出现0次或1次
*：出现0次或多次
+：出现1次或多次
{m,n}:m<=数量<=n({m,}{,n})
3.开始结束符号
1.^：开始
2.$：结束
2.正则表达式对象
1.创建
1.var reg = new RegExp("正则表达式");
2.var reg = /正则表达式/;
2.方法
1.test(参数)：验证指定字符串是否符合正则表达式定义
var reg1 = new RegExp("^\\w{6,12}$");
// var reg2 = /\w{6,12}/
// alert(reg1);
// alert(reg2);
var name = "zhangsan";
//验证
var flag = reg1.test(name);
alert(flag);
DOM简单学习：
*功能：控制html文档的内容
*代码：获取页面标签（元素）对象Element
Document.getElementById(“id值”)：通过元素的id获取元素对象
*操作Element对象
1.修改属性值
1.明确获取的对象是哪一个？
2.查看API文档：找其中有哪些属性可以设置
2.修改标签体内容
*innerHTML
##事件的简单学习
*概念：某些组件被执行了某些操作后，触发某些代码的执行
*如何绑定事件
1.直接在html标签上，指定事件的属性（操作），属性值就是JS代码
*事件：onclick---单击事件
2.通过js获取元素对象，指定事件属性，设置一个函数。
#BOM：浏览器对象模型
1.概念：将浏览器的各个部分封装成对象
2.组成：
Window：窗口对象
1.创建
2.方法
1、与弹出框有关的方法
1.alert()显示带有一段信息和一个确定按钮的警告框
2.confirm()显示带有一段信息以及确认按钮和取消按钮的对话框
* 如果用户点击确定按钮，方法返回true
* 如果用户点击取消按钮，方法返回false
3.prompt()显示可提示用户输入的对话框
*返回值：用户输入的信息
2、与打开和关闭有关的方法
1.open()打开窗口
2.close()关闭窗口（谁调用我我关谁）
3、与定时器有关的方法
1.setTimeout()在指定的毫秒数后调用函数或计算表达式
*参数：
1.js代码或计算表达式
2.时间
2.clearTimeout()取消由setTimeout()方法设置的timeout
3.setInterval()按照指定的周期（毫秒计）来调用函数或计算表达式
4.clearInterVal()取消setInterval()设置的
3.属性
4.特点
* Window对象不用创建可以直接使用：Window.方法名()
* Window引用可以省略 方法名()
*/
// window.alert("hahaha!");
// alert("hahahaha!");
//var flag = confirm("您确定要离开吗？");
//alert(flag);
// if(flag){
// //退出操作
// }else{
// //提示:手别抖
// alert("手别抖！")
// }
//var message = prompt("请输入用户名");
//alert("输入的用户名："+message);
<body>
<!-- <input id="openBtn" type="button" value="打开新窗口" />
<input id="closeBtn" type="button" value="关闭新窗口" />-->
<script>
// //打开新窗口
// var button01 = document.getElementById("openBtn");
// var newwin01;
// var fun01 = function() {
// newwin01 = open("https://www.baidu.com");
// }
// button01.onclick = fun01;
// //关闭新窗口
// var button02 = document.getElementById("closeBtn");
// var fun02 = function() {
// newwin01.close();
// }
// button02.onclick = fun02;
//一次性定时器
function fun01(){
alert("boom~")
}
var id = setTimeout(fun01,3000);
clearTimeout(id);
//循环定时器
//setInterval(fun01,2000);
</script>
</body>
轮播图：
<html>
<head>
<meta charset="utf-8">
<title>轮播图</title>
<script>
//1.修改src属性
var number = 1;
function fun01(){
number ++;
if(number > 3){
number = 1;
}
//获取img对象
var img = document.getElementById("img");
img.src = "../img/banner_"+ number +".jpg";
}
//2.设置定时器
setInterval(fun01,3000);
</script>
</head>
<body>
<img id="img" src="../img/banner_1.jpg" width="100%">
</body>
</html>
Navigator：浏览器对象
*Screen：屏幕对象
*History：历史记录对象
*Location：地址栏对象
1.创建（获取）
1.window.location
2.location
2.方法
reload()：重新加载当前页面，刷新
3.属性
href
<html>
<head>
<meta charset="utf-8">
<title>location对象</title>
</head>
<body>
<input type="button" id="btn" value="刷新" />
<script>
//reload方法,定义一个按钮,点击按钮刷新当前页面
//1.获取按钮
var btn = document.getElementById("btn");
//2.绑定单击事件
btn.onclick = function(){
//3.刷新页面
location.reload();
}
//获取href
var href = location.href;
alert(href);
</script>
</body>
</html>自动跳转：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自动跳转</title>
<style>
p{
text-align: center;
}
span{
color: red;
}
</style>
<script>
/**
* 分析：
* 1.显示页面效果
* 2.倒计时读秒
* 2.1定义一个方法，获取span标签，修改spam标签内容，时间
* 2.2定义一个定时器，一秒一次
*/
</script>
</head>
<body>
<p>
<span id="time">5</span>秒之后自动跳转至首页...
</p>
<script>
function showTime(){
var time = document.getElementById("time");
time.innerHTML--;
if(time.innerHTML == 1){
location.href = "https://www.baidu.com";
}
}
setInterval(showTime,1000);
</script>
</body>
</html>
##DOM：Document Object Model 文本对象模型
将标记语言文档的各个组成部分，封装成对象，可以使用这些对象，对标记语言文档进行CURD操作
*W3C DOM标准被分为3个不同的部分：
1.核心DOM--针对任何结构化文档的标准模型
Document：文档对象
Element：元素对象
Attribute：属性对象
Text：文本对象
Comment：注释对象
Node：节点对象，其他5个父对象
2.XML DOM--针对 XML 文档的标准模型
3.HTML DOM--针对 HTML 文档的标准模型
扫一扫
386
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
