ss
文章目录
JavaScript基础(语法、变量)
一、JavaScript简介
* 概念:一门客户端脚本语言
- 运行在客户端浏览器中的。每一个浏览器都有Javascript的解析引擎
- 脚本语言:不需要编译,直接就可以被浏览器解析执行了
* 功能 :
- 可以来增强用户和html页面的交互过程,可以来控制html元素,让页面有一些动态的效果,增强用户的体验。
- JavaScript =ECMAScript + JavaScript自己特有的东西(BOM+DOM)
1. ECMAScript : 客户端脚本语言的标准
1.基本语法
1. 与html结合方式
1.内部JS :
- 定义
<script>
,标签体内容就是js代码
2. 外部JS :
* 定义<script>
,通过src属性引入外部的 js文件
* 注意:
1. <script>
可以定义在html页面的任何(符合语法规则)地方。但是定义的位置会影响执行顺序。
2. <script>
可以定义多个
2. 注释
- 单行注释: // 注释内容
- 多行注释: /* 注释内容 */
3. 数据类型:
- 原始数据类型(基本数据类型) :
1. number :数字。整数/小数/NaN(not a number -个不是数字的数字类型)
2. string:字符串。字符串 ”abc" “a” ‘abc’
3. boolean: true和false
4. null : 一个对象为空的占位符
5. undefined : 未定义时,默认的类型。
2.引用数据类型: 对象
4. 变量
-
变量:一小块存储数据的内存空间
- Java语言是强类型语言, 而JavaScript是弱类型语言。
- 强类型:在开辟变量存储空间时,定义了空间将来存储的数据的数据类型。只能存储固定类型的数据
- 弱类型:在开辟变量存储空间时,不定义空间将来的存储数据类型,可以存放任意类型的数据。
- 语法:
- var 变量名=初始化值;
- 验证类型:
document.write(typeof(num));
//打印在页面
其中,typeof 运算符对于 null 值 返回 “object”,这其实是JavaScript中的一个bug,然后被ECMAScript沿用了,现在null 被认为是对象的占位符,从而解释了这一矛盾
- Java语言是强类型语言, 而JavaScript是弱类型语言。
5. 运算符
-
一元运算符:只有一个运算数的运算符
++ -- +(正号) 其中,++ --:自增(自减) 当++或--在前,先自增或自减,再运算 当++或--在后,先运算,在自增或自减
-
算术运算符
+ - * / %
-
赋值运算符
= += -+ ...
-
比较运算符
< >= == ===(全等于)
其中比较方式:- 类型相同:直接比较
- 字符串,按照字典顺序比较,按位逐一比较,直接得出大小为止
- 类型不同:先进行类型转换,再比较
- ===,全等于。在比较之前,先判断类型,如果类型不一样,则直接返回false
- 类型相同:直接比较
-
逻辑运算符
&& || !
-
三元运算符
? :
7. 注意:
在 JS 中,如果运算符不是运算符所要求的类型,那么 JS引擎会自动的将运算数进行类型转换
其他类型转number:
-
string 转number:按照字面值转换,若字面值不是数字,则转为NaN(不是数字的数字)
- boolean 转number:true转为1,false转为0
8. 流程控制语句(和Java类似)
(1)if…else…
(2)switch:
* 在java中,switch语句可以接受的数据类型: byte int short char ,枚举(1.5), string(1.7)
格式:switch(变量):
case 值:
* 在JS中, switch语句可以接受任意的原始数据类型
(3) while
(4) do… .while
(5) for
9. JS 中的特殊语法
(1)语句以分号结尾,如果一行只有一条语句,则可以省略(不建议)
(2)变量定义使用 var关键字,也可以不使用
用的话,定义的是局部变量
不用的话,定义的辩论是全局变量(不建议)
2.基本对象
(1)Function:函数(方法)对象
1)创建:
a. var fun=new Function(形式参数列表,方法体); //不建议
b. function 方法名称(形式参数列表){
方法体
}
c. var 方法名=function(形式参数列表){
方法体
}
2)方法:
3)属性:
length:代表形参的个数
4)特点:
a.方法定义时,形参的类型可以不用写,返回值类型也不写
b.方法是一个对象,如果定义名称相同的方法,会覆盖(方法调用只与方法名称有关)
c.在JS中,方法的调用只与方法的名称有关,和参数列表无关(个数也无关)
d.在方法声明中有一个隐藏的内置对象(数组),arguments,封装所有的实际参数
//求任意个数的数的和
function add(){
var sum=0;
for(var i=0; i< arguments.length; i++){
sum +=arguments[i];
}
return sum;
}
(2)Array:数组对象
1)创建
a. var arr=new Array(元素列表);
b. var arr=new Array(默认长度);
c. var arr=[元素列表];
2)方法
join(参数) 将数组中的元素按照指定的分隔符拼接为字符串
push( ) 向数组的末尾添加一个或更多元素,并返回新的长度。
3)属性
length:数组的长度
4)特点:
a. 在JS中,数组的元素类型可变的
b. 在JS中,数组的长度可变的。
(3)Date:日期对象
1)创建:
var date=new Date();
2)方法:
toLocaleString():返回当前date 对象对应的时间本地字符串格式
getTime():获取毫秒数。返回当前日期对象描述的时间到1970年1月1日零点的毫秒数。
3)更多方法看JavaScript手册https://www.w3school.com.cn/jsref/jsref_obj_date.asp
(4)Math:数学
1)创建:
特点:Math对象不用创建,直接使用。 Math.方法名();
2)方法:
random():返回 0~1 之间的随机数。 含0不含1
ceil(x): 对数进行上舍入。
floor(x): 对数进行下舍入。
round(x): 对数进行四舍五入为最接近的整数。
3)属性:
PI 圆周率
/*
* 取 1~100之间的随机整数
* 1.Math.random()产生随机数,范围(0,1]小数
* 2.乘以100--->[0,99.9999]小数
* 3. 舍弃小数部分:floor--->[0,99]整数
* 4.+1--->[0,99] 整数[1,100]
*/
var number=Math.floor((Math.random()*100))+1;
document.write(number);
(5)Number
(6)String
(7)RegExp:正则表达式对象
1)正则表达式:定义字符串的组成规则。
a.单个字符:[ ]
如:[a] [ab] [a-zA-Z0-9_]
特殊字符代表特殊含义的单个字符:
\d:单个数字字符[0-9]
\w:单个单词字符[a-zA-Z0-9]
b. 量词符号:
?:表示出现0次或1次
* :表示出现0次或多次
+ :出现1次或多次
{m,n}:表示 m<= 数量 <=n
当m缺省时,即{ , n} 表示最多n次
当n 缺省时,即{m, } 表示最少m次
2)正则对象:
a. 创建
第一种:var reg=new RegExp(“正则表达式”);
第二种:var reg=/正则表达式/;
b. 方法
* test(参数):验证指定的字符串是否符合正则定义的规范
c.补充:
转义字符 \:若想要表示常规的字符\,则可多打一个
符号 ^ 表示开始,$ 表示结束 eg.var username=/^\w{6,12}$/;
表示6-12位单词字符构成
(8)Global
1)特点:全局对象,这个Global 中封装的方法不需要对象就可以直接调用。 方法名()。
2)方法:
encodeURI():编码为 URI。
decodeURI(): url解码。
这两组有区别
encodeURIComponent():url编码,编码的字符更多
decodeURIComponent():url解码
parseInt( ): 将字符转为数字
* 逐一判断每一个字符是否是数字,直到不是数字为止,将前边数字部分转为number
isNaN( ): 判断一个值是否为NaN
* NaN 六亲不认,连自己的都不认。NaN 参与的 == 全等于全部都为false
eval( ):计算 JavaScript 字符串,并把它作为脚本代码来执行。
/*
* 判断是否是NaN 需要通过方法isNaN
*/
var a=NaN;
document.write(a==NaN); //无法判断,结果为false
document.write(isNaN(a));
2.DOM 简单学习
(1)功能:控制html的文档内容
(2)获取页面标签(元素)对象:Element
document.getElementById(“id值”):通过元素的id获取元素对象
(3)操作Element对象:
1) 修改属性值:
a.明确获取对象是哪一个?
b.查看API文档,找其中可以设置的属性https://www.w3school.com.cn/jsref/dom_obj_all.asp
2)修改标签体内容:
属性: innerHTML
a. 获取元素对象
b.使用innerHTML属性修改标签体内容
3. 事件简单学习
(1)功能:某些组件被执行某些操作后,触发某些代码的执行。
(2)如何绑定事件
1)直接在html 标签上,指定的属性(操作),属性值就是JS代码(不推荐,代码耦合度高,难以维护)
a.事件:onclick—单击事件
<img id="light" src="" οnclick="fun();"> <!--fun()是JS 函数-->
2)通过JS 获取元素对象,指定事件属性,设置一个函数
/* 获取light对象*/
var light=document.getElementById("light");
//绑定单击事件
light.onclick=function(){
...
}
4. 一个简单的电灯开关案例
(1)电灯图片:点击图片,则灯的颜色变化,显示出开灯关灯的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>电灯开关</title>
</head>
<body>
<img id="light" src="img/off.png" /><!---->
<script>
/*
* 分析:
* 1.获取图片对象
* 2.绑定单击事件
* 3.每次点击切换图片
* 规则:
* 如果灯是开的 on,切换图片为 off
* 如果灯是关的 off,切换图片为on
* 使用标记 flag来完成
*/
/* 获取light对象*/
var light=document.getElementById("light");
var flag=false; //代表灯是灭的。off图片
//绑定单击事件
light.onclick=function(){
if(flag){
//判断如果灯是开的,则灭掉
light.src="img/off.png";
flag=false;
}else{
light.src="img/on.png";
flag=true;
}
}
</script>
</body>
</html>
5. BOM对象
(1)概念
Browser Object Model 浏览器模型
将浏览器的各个组成部分封装成对象
(2)组成
Window
Navigator
Screen
History
Location
(3)Window:窗口对象
1)创建
Window对象不需要创建
2)方法
a.与弹出框有关的方法:
alert() 显示带有一段消息和一个确认按钮的警告框。
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。 其中,如果用户点击确定按钮,则方法返回true;如果用户点击取消按钮,则方法返回false。
prompt() 显示可提示用户输入的对话框。 返回值:获取用户输入的值
b.与打开关闭有关的方法:
open() 打开一个新的浏览器窗口或查找一个已命名的窗口。会返回一个新的Window对象。
close() 关闭浏览器窗口。注意是关闭调用该方法的窗口。
c.与定时器有关的方法
setTimeout() 在指定的毫秒数后调用函数或计算表达式。
* 参数:JS代码或者方法对象; 毫秒值
* 返回值:唯一标识,用于取消定时器。
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
3)属性:
a.获取其他BOM对象:Navigator, Screen,History, Location
b. 获取DOM对象:document
4)特点
* Winow 对象不需要创建可以直接使用 window使用。wondow.方法名();
* window引用可以省略,即Window 对象的使用可以直接写方法名:方法名();
(4)Location:地址栏对象
1)创建(获取):
a. Window.location
b. location
2)方法:
reload() 重新加载当前文档,即刷新。
3)属性
href:设置或返回完整的 URL。
(5)History:历史记录对象(仅仅是当前窗口的)
1)创建(获取):
a. window.history
b.history
2) 方法:
back() 加载 history 列表中的前一个 URL。
forward() 加载 history 列表中的下一个 URL。
go(参数) 加载 history 列表中的某个具体页面。
若参数为正数,则前进几个历史记录;若参数为负数,则后退几个历史记录
3)属性:
length: 返回当前窗口历史记录中的 URL 数量。
6. 轮播图 案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片轮播</title>
</head>
<body>
<img id="img" src="img/banner1.jpg" width="100%" />
<script>
/**
* 分析:
* 1.在页面上使用img 标签展示图片
* 2.定义一个方法,修改图片对象的src属性
* 3.定义一个定时器
*
* 注意:
* 图片的img标签与JS的script标签顺序,
* 该顺序与调用顺序有关,
* 若JS代码在前,当资源很多时,有可能会加载不出来
*
*/
//修改图片的src属性
var number=1;
function fun () {
number ++;
if(number >3){
//一共三张图片
number=1;
}
//获取img 对象
var img=document.getElementById("img");
img.src="img/banner"+ number+".jpg";
}
// 设置定时器
setInterval(fun,2000); //每两秒换一次
</script>
</body>
</html>
7. 自动跳转页面 案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自动跳转到首页</title>
<style>
p{
text-align: center;
}
span{
color: red;
}
</style>
</head>
<body>
<p>
<span id="time">5</span> 秒之后,自动跳转到首页
</p>
<script>
/*
* 分析:
* 1.显示页面效果 <p>
* 2.倒计时读秒效果实现:
* (1)定义一个方法,获取span 标签,修改span标签体内容,时间
* (2)定义一个定时器,1秒执行该方法
* 3. 在方法中判断时间如果<=0,则 跳转到首页
*
*
* */
//倒计时读秒效果实现
var second=5;
var time= document.getElementById("time");
//定义一个方法,获取span标签,修改标签体内容,时间
function showTime(){
second --;
if(second <=0){
location.href="http://www.baidu.com";
}
time.innerHTML=second+""; // DOM 使用innerHTML属性修改标签体内容
}
//设置定时器, 1 秒执行一次该方法
setInterval(showTime,1000);
</script>
</body>
</html>
8. DOM对象
(1)概念
DOM:Document Object Model 文档对象模型;
将标记语言文档的各个组成部分,封装成对象。可以使用这些对象,对标记语言文档进行CRUD的动态操作。
DOM树
DOM 是 W3C(万维网联盟)的标准。
DOM 定义了访问 HTML 和 XML 文档的标准:
“W3C 文档对象模型 (DOM) 是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”
(2) W3C DOM 标准被分为 3 个不同的部分:
1)核心 DOM - 针对任何结构化文档的标准模型
* Docuent:文档对象
* Element:元素对象
* Attribute:属性对象
* Text:文本对象
* Comment: 注释对象
* Node: 节点对象,其他5个对象的父对象
2)XML DOM - 针对 XML 文档的标准模型
3)HTML DOM - 针对 HTML 文档的标准模型
(3)核心DOM模型
1)Document:文档对象
(1)创建(获取):在html dom模型中可以使用window对象来获取
a. window.document
b. document
(2