本文介绍JavaScript的基础知识，涵盖JS与HTML的结合方式、数据类型、流程控制等，详解基本对象如Function、Array及Date等的使用，并涉及DOM和BOM的概念与操作。
JavaScript 基础
<1> 简介
JavaScript 是运行在浏览器的脚步语言, 可控制html元素, 实现特定功能, 无需编译即可运行.
常见浏览器脚本语言: JavaScript, ScriptEase, JScript
JavaScript (JS) = ECMAScript(统一标准) + BOM + DOM
<2> ECMAScript
1.JS 与 HTML 结合方式
(1) 内部JS
定义script标签, 标签体内容是JS代码
(2) 外部JS
定义script标签, 使用src属性引入JS文件
注意:
① script 标签可以定义在任意位置, 但是建议写在 body 中的尾部
② script 标签可以定义多个
③ script 标签按照顺序依次执行
2.注释
单行: //注释
多行: /*注释 */
3.数据类型
(1) 原始 (基本) 数据类型:
number: 数字: 整数 小数 NaN
string: 字符串
boolean: trur false
null: 空的占位符
underfined: 未定, 若未初始化, 则默认赋值 underfined
(2) 引用数据类型: 对象
4.变量
(1) 强类型: 定义空间时定义固定的储存的数据类型
(2) 弱类型: 定义空间时不定义固定的储存的数据类型, 可存放任意类型
var 变量 = 内容 //定义变量
document.write(变量名+"<br>") //输出变量并换行
注意:
java 是强类型, JS 是弱类型
null 在 typeof 命令中被认为是 object 类
5.运算符
(1) 一元运算符
++, – , + (正号)
注意:
+ - 号运算中, 若JS中运算符不是运算符搜要求的类型, JS 会将其进行类型转换
==============================================================================
string 转 number: 按照字面值转化, 若不是数字则转化为 NaN
boolean 转 number: true为1, false为0
(2) 算数运算符
+, - ,* , / , %
(3) 赋值运算符
= , += , -+
(4) 比较运算符
> < >= <= ===
注:
类型相同的，根据ASCII码比较
类型不同的比较: 先进行类型转化再比较
==============================================================================
“==”先转化类型再比较；“===”不转化类型，类型不同直接返回False
(5) 逻辑运算符
&& , || , !
注:
number: 0和NaN为假, 其余为真
string: 除空字符串(""), 其余都是true
null&undefined: 都是false
对象: 所有对象都是true
(6) 三元运算符
? : (同C/JAVA)
var c=a>b? 1:2
true则取值1为1, false则取值2为2
6. 流程控制语句 (与Java类似)
(1) if…else
(2) switch
在 JS 中, 可以接受任意数据类型
(3) while
(4) do…while
(5) for
7.基本对象
(1) Functuion 对象
- 基本用法
① var fun =new new Function (形式参数. 方法体)
② function 方法名称(形式参数列表)[
方法体
}
③ var 方法名 = function(形式参数列表){
方法体
}
fun.length: fun函数的参数个数
2.特点：
① 方法定义是，形参的类型不用写,返回值类型也不写。
② 方法是一个对象，如果定义名称相同的方法，会覆盖
③ 在JS中，方法的调用只与方法的名称有关，和参数列表无关
④ 在方法声明中有一个隐藏的内置对象 (数组)，arguments, 封装所有的实际参数, 但根据形参数量传递 (多于形参元素的部分不传递)
(2) Array 数组
- 创建
var arr1=new Array(1,2,3,"m",true,"哇哇哇");
var arr2=new Array(5); //定义长度为 5 的数组
var arr3= [1,2,9,,true,"呜呜呜"];
document.write(arr1+"<br>"+arr2+"<br>"+arr3);
- 方法
join(参数):将数组中的元素按照指定的分隔符拼接为字符串
document.write(arr.join("--")+"<br>");
push() 向数组的末尾添加一个或更多元素，并返回新的长度。
- 属性
length : 长度 - 特点
JS 中数组元素长度和类型可变, 类似 JAVA 中的集合
(3) Date 日期
- 创建：
var date = new Date(); - 方法：
date.toLocaleString()：返回字符串格式的本地时间
date.getTime(): 获取毫秒值, 返回当前时间到1970年1月1日零点的毫秒值差
(4) Math 数学类 (不用创建, 直接使用)
random():返回 0 ~ 1 之间的随机数。[ 0 , 1 )
ceil(x)：对数进行上舍入。
floor(x)：对数进行下舍入。
round(x)：把数四舍五入为最接近的整数。
取 [1 , 100] 随机整数:
var number = Math.floor((Math.random()*100))+1;
(5) 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}:最多n次
* n如果缺省：{m,} 最少m次
3. 开始结束符号
* ^:开始
* $:结束
<2> 正则对象：
1. 创建
1. var reg = new RegExp(“正则表达式”);
2. var reg = /正则表达式/;
2. 方法
1. test(参数):验证指定的字符串是否符合正则定义的规范
(6) Global 全局变量
<1>功能: 转化字符串与 URL 编码
注: 全局变量, 不需要调用即可使用
方法:
① encodeURI: 编码
decodeURI: 解码
② encodeURIComponent: 编码
decodeURIComponent: 解码
区别: ①只转换中文和特殊字符, ②转换包括符号在内的全部内容, 通常建议使用②;
encode 在客户端执行; decode 在服务器端执行
var str = "http://www.baidu.com?wd=我真菜!";
var encode = encodeURI(str);
document.write(encode +"<br>");
var s = decodeURI(encode);
document.write(s +"<br>");
document.write("=============================================<br>");
var str2 = "http://www.baidu.com?wd=我真菜!";
var encode2 = encodeURIComponent(str2);
document.write(encode2 +"<br>");
var s2 = decodeURIComponent(encode2);
document.write(s2 +"<br>");
结果:
http://www.baidu.com?wd=%E6%88%91%E7%9C%9F%E8%8F%9C!
http://www.baidu.com?wd=我真菜!
=============================================
http%3A%2F%2Fwww.baidu.com%3Fwd%3D%E6%88%91%E7%9C%9F%E8%8F%9C!
http://www.baidu.com?wd=我真菜!
方法:
<2> parseInt(): 将字符串的数字部分转成数字,
<3> isNaN() 判断是否为NaN, 并返回 Boolean
注: NaN 参与的所有比较(==)均为 False
<4> eval() 将字符串形式的JS语句识别并执行
8. 特殊语句 (相比于Java的不同点, 但不建议使用)
(1) 单条语句结尾可以省略分号
(2) 定义变量时, 使用var关键字, 定义的是局部变量; 不使用, 定义的是全局变量
<3> DOM
1.简介
DOM → Document Object Model → 文档对象模型
它可以动态地访问程序和脚本, 并更新其内容、结构
2.核心
核心 DOM - 针对任何结构化文档的标准模型
Document： 文档对象
Element： 元素对象
Attribute： 属性对象
Text： 文本对象
Comment: 注释对象
Node： 节点对象，其他 5 个的父对象
3.文档对象
(1) 获取页面标签(元素)对象：获取 Element 对象
① document.getElementById("id值"): 通过元素的id获取元素对象
-
Element 对象可修改属性值和标签体内容
修改标签体内容：
1. 获取元素对象
2. 使用 innerHTML 属性修改标签体内容
<h1 id="0">我太厉害了！</h1>
=====================================================
var ab=document.getElementById("0");
ab.innerHTML="我太菜了！";
② getElementsByTagName()： 根据元素名称获取元素对象们。返回值是一个数组
③ getElementsByClassName(): 根据Class属性值获取元素对象们。返回值是一个数组
④ getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组
(2) 操作 Element 对象
① 修改属性值:
removeAttribute()：删除属性setAttribute()：设置属性
注: 直接在对象的后面 “.” 就可以改变对象的属性
var element_a = document.getElementsByTagName("a")[0]; //由于获取到的变量是数组, 仅仅取其首元素[0]即可
element_a.setAttribute("href","https://www.baidu.com");
4.节点对象
(1)简介
节点对象，其他5个的父对象; 所有dom对象都可以被认为是一个节点
★ 补充知识:
在超链接中, 只设置超链接样式而不实现跳转功能 (空 " " 为刷新当前页面) 的写法为:
<a href="javascript:void(0);" id="add">
(2) 方法
appendChild()： 向节点的子节点列表的结尾添加新的子节点。
removeChild() ： 删除（并返回）当前节点的指定子节点。
replaceChild()： 用新节点替换一个子节点。
parentNode: 返回节点的父节点。
<4> BOM
(1)简介
概念: 浏览器对象模型, 处理浏览器各部分的对象模型.
组成:
Window : 窗口对象
Navigator : 浏览器对象 (不重要)
Screen : 屏幕显示器对象 (不重要)
History : 历史记录对象
Location : 地址栏对象
(2)Window 窗口对象
- 弹出框
① alert() : 显示带有一段消息和一个确认按钮的警告框
② confirm() : 显示带有一段消息以及确认按钮和取消按钮的对话框 (确认按钮返回 true, 取消按钮返回 false )
③ prompt() : 显示可提示用户输入的对话框, 返回用户输入的值
注: window 对象用变量接收可用于执行不同的操作
var a=confirm("133");
if(a) {document.write("123456789");}
else {document.write("abcdefghijk");}
=============================================================
var result = prompt("请输入");
alert(result+"tgyuiojpk");
=====================================================================
var result=prompt("请输入:");
alert(result);
- 打开, 关闭窗口
<input id="openBtn" type="button" value="打开窗口">
<input id="closeBtn" type="button" value="关闭窗口">
//打开新窗口
var openBtn = document.getElementById("openBtn");
var newWindow;
openBtn.onclick = function(){
//打开新窗口
newWindow = open("https://www.baidu.com");
}
//关闭新窗口
var closeBtn = document.getElementById("closeBtn");
closeBtn.onclick = function(){
// 关闭新窗口
newWindow.close();
}
(3) 定时器
- 一次性定时器
setTimeout(fun(),2000);
function fun(){
alert('boom~~');
}
- 循环定时器
setInterval(fun(),2000);
function fun(){
alert('boom~~');
}
- 取消定时器:
一次性定时器:clearTimeout()
循环定时器:clearInterval()
注: 括号内的参数传递定时器返回的变量
★ 实例: 轮播图
<img src="img/pic1.jpg" width="100%" height="100%" id="image">
<script>
var i=1;
function f(){
//i++;
var im =document.getElementById("image");
if(i>4) i=1;//一共四张图
im.src="img/pic"+(++i)+".jpg";
}
//以下是定时器
setInterval(f,"2000");
</script>
4. Window 属性
- 获取其他 BOM 对象
history
location
Navigator
Screen - 其他 DOM 对象
document
5. Location 地址栏对象
- 创建(获取)：window.location 或 location
- 方法：
reload()重新加载当前文档。刷新
href设置或返回完整的 URL (超链接)。
★实例: 5 秒自动跳转
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{text-align: center;}
span{color: deeppink;}
</style>
<script>
var i=5;
function time(){
i--;
var n= document.getElementById("number");
if(i<=0){location.href="https://www.baidu.com";}
n.innerHTML = i;
}
setInterval(time,1000);
</script>
</head>
<body>
<p>
<span id="number">5</span> 秒后跳转
</p>
</body>
6.History 历史记录对象
-
创建(获取)：
1. window.history
2. history -
方法：
back()加载 history 列表中的前一个 URL。
forward()加载 history 列表中的下一个 URL。
go(参数) 加载 history 列表中的某个具体页面。
参数：
* 正数：前进几个历史记录
* 负数：后退几个历史记录
- 属性：
length返回当前窗口历史列表中的 URL 数量。
<5> 事件
(1) 事件简介
事件定义: 当某些组件执行某项操作时, 触发代码
(2) 点击事件
onclick: 定义鼠标单击击后的操作
var light = document.getElementById("light");
light2.onclick = fun; //在外部定义fun函数
ondblclick： 双击事件
(3) 焦点事件
onblur： 失去焦点 (鼠标或光标移动到之外, 常用于表单校验)
onfocus: 元素获得焦点。
(4) 加载事件：
onload： 一张页面或一幅图像完成加载。
(5) 鼠标事件：
onmousedown 鼠标按钮被按下。
onmouseup 鼠标按键被松开。
onmousemove 鼠标被移动。
onmouseover 鼠标移到某元素之上。
onmouseout 鼠标从某元素移开。
(6) 键盘事件：
onkeydown 某个键盘按键被按下。
onkeyup 某个键盘按键被松开。
onkeypress 某个键盘按键被按下并松开。
(7) 选择和改变
onchange 域的内容被改变。
onselect 文本被选中。
(8) 表单事件
onsubmit 确认按钮被点击。
onreset 重置按钮被点击。
扫一扫
1677
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
