JavaScript简介
JavaScript是一门跨平台、面向对象的脚本语言，来控制网页行为的，他能使网页可交互
JavaScript引入方式
1. 内部脚本
将JS代码定义在HTML页面中
* 在HTML文档中可以在任意位置放置任意数量的<script>标签
* 一般把脚本置于<body>标签的底部，可改善显示速度，因为脚本执行会拖慢显示
<script>
alert("hello js");
</script>
2. 外部脚本
将JS代码定义在外部JS文件中，然后引入到HTML页面中
* 外部脚本不能包含<script>标签
* <script>标签不能自闭和
// demo.js
alert("hello js");
<script src="../js/demo.js"></script>
JavaScript基础语法
1. 书写语法
1. 区分大小写
2. 每行结尾分号可有可无
3. 单行注释// 多行注释/**/
4. 大括号表示代码块
2. 输出语句
window.alert(""); //弹出警告框
document.write(""); //写入HTML
console.log(""); //写入控制台
3. 变量
JavaScript是一门弱类型语言，变量可以存放不同类型的值
<script>
var test = 20;
test = "Hello JS!";
window.alert(test);
/*
var：
1. 作用域：全局变量
2. 变量可以重复定义
let：
1. 只在let关键字所在的代码块内有效
2. 不允许重复声明
const：
声明一个只读的常量
*/
</script>
4. 数据类型
原始类型 & 引用类型
5种原始类型：
1. number：数字（整数、小数、NaN(Not a Number)）
2. string：字符、字符串（单双引号都可以）
3. boolean：布尔
4. null：对象为空
5. undefined：声明的变量未初始化、该变量默认值是undefined
var age;
alert(typeof age); //typeof用于查看变量对应的数据类型
5. 运算符
* 一元运算符：++,--,...
* 算数运算符：+,-,...
* 赋值运算符：=,+=,...
* 关系运算符：<,>,===,...
* 逻辑运算符：&&,||,...
* 三元运算符：
/*
== 与 ===的区别
==:
1. 判断类型是否一致，不一致则进行类型转换
2. 进行比较
===:
1. 判断类型是否一致，不一致直接返回false
2. 类型一致再进行比较
*/
var age1 = 20;
var age2 = "20";
alert(age1 == age2); //true
alert(age1 === age2); //false
/*
类型转换：
* 其他类型转换为number：
1. string转number
按照字符串的字面值转为数字 "20" -> 20
如果字面值不是数字，则转为NaN
一般使用parseInt()方法将string转为number
2. boolean转number
true -> 1
false -> 0
* 其他类型转换为boolean：
1. number转boolean
0和NaN -> false
其他 -> true
2. string转boolean
空字符串 -> false
非空字符串 -> true
3. null转boolean
转为false
4. undefined转boolean
转为false
*/
6. 流程控制语句
if
switch
for
while
与Java中相同
//if
var count = 3;
if(count == 3){
alert(count);
}
//switch
var num = 3;
switch(num){
case 1:{
alert(1);
break;
}
default:{
alert("不是1")；
}
}
//for
var sum = 0;
for(let i = 1; i <= 100; i++){ //建议用let来定义循环变量
sum += i;
}
alert(sum);
//while
var sum = 0;
var i = 1;
while(i <= 100){
sum += i;
i++;
}
alert(sum);
7. 函数
函数的定义
形式参数不需要类型
返回值不需要类型，可以在函数内部直接使用return返回即可
函数的调用
函数调用可以传递任意个数参数
//函数的定义
//方式一
function add(a, b){
return a + b;
}
//方式二
var add = function(a, b){
return a + b;
}
//函数的调用
let result0 = add(1) //NaN
let result = add(1, 2); //3
let result2 = add(1, 2, 3); //3
JavaScript常用对象
1. Array对象
const cars = ["Tesla", "Volvo", "BMW"];
| 属性 | 描述 |
|---|---|
| length | 设置或返回数组中元素的数量。 |
| 方法 | 描述 |
|---|---|
| indexOf() | 在数组中搜索元素并返回其位置。 |
| push() | 将新元素添加到数组的末尾，并返回新的长度。 |
| splice() | 从数组中添加/删除元素。 |
//定义
//方式一
var arr = new Array(1, 2, 3);
//方式二
var arr = [1, 2, 3];
//访问
arr[0] = 10;
/*
特点：
JavaScript数组相当于Java中集合，变长变类型
*/
//变长
var arr = [1, 2, 3];
arr[4] = 5; //1,2,3,,5
//变类型
arr[3] = "hello"; //1,2,3,hello,5
arr.push(10); //1,2,3,hello,5,10
arr.splice(0, 2); //3,hello,5,10 从0开始删除2个元素
2. String对象
| 属性 | 描述 |
|---|---|
| length | 字符串的长度 |
| 方法 | 描述 |
|---|---|
| charAt() | 返回在指定位置的字符。 |
| indexOf() | 检索字符串。 |
//定义
//方式一
var str = new String("abc");
//方式二
var str = "abc";
var str = 'abc';
// trim()方法：去除字符串两端的空白字符
var str1 = " abc ";
str1 = str1.trim(); //abc
3. 自定义对象
var person = {
name : "ziping",
age : 23,
eat : function(){
alert("eat");
}
};
BOM —— 浏览器对象模型
Browser Object Model:浏览器对象模型
JavaScript将浏览器的各个组成部分封装为对象
1. Window对象
| 方法 | 描述 |
|---|---|
| alert() | 显示带有一段消息和一个确认按钮的警告框 |
| confirm() | 显示带有一段消息以及确认按钮和取消按钮的对话框 |
| setInterval() | 按照指定的周期来调用函数或计算表达式 |
| setTimeout() | 在指定的毫秒数后调用函数或计算表达式 |
//获取：直接使用window.，window.可以省略
window.alert("");
//方法：
//alert()
window.alert("Hello JS1!");
//confirm()
var flag = window.confirm("Hello JS2!");
alert(flag); //点击确认flag为true，点击取消flag为false
//定时器
//setInterval():循环执行
setInterval(function () {
var div = document.createElement('div');
div.innerHTML = 'Hello JS!';
document.body.appendChild(div);
}, 2000);
//setTimeout():只执行一次
setTimeout(function () {
var div = document.createElement('div');
div.innerHTML = 'Hello JS!';
document.body.appendChild(div);
}, 2000);
2. History对象
//获取：window.history.方法()，window.可以省略
history.back();
history.forward();
3. Location对象
//获取：window.location.方法()，window.可以省略
location.href = "https://www.baidu.com";
DOM —— 文档对象模型
Document Object Model:文档对象模型
JavaScript将标记语言的各个组成部分封装为对象
JavaScript通过DOM对HTML进行操作
获取Element对象
//获取：使用Document对象的方法来获取
//1. 根据id属性值获取
var img = document.getElementById("light")
//2. 根据标签名称获取
var divs = document.getElementsByTagName("div")
//3. 根据name属性值获取
var hobbys = document.getElementsByName("hobby")
//4. 根据class属性值获取
var clss = document.getElementsByClassName("cls")
常见HTML Element对象的使用
查看文档使用
//举例：
img.src = "";
div.style.color = 'red';
div.innerHTML = 'Hello JS!';
but.checked = true;
事件监听
事件：
按钮被点击
光标移动到元素上
按下键盘按键
事件监听：JavaScript可以在事件被侦测到时执行代码
事件绑定
方式一：通过HTML标签中的事件属性进行绑定
<input type = "button" onclick = 'on()'>
<script>
function on(){
alert("click");
}
</script>
方式二：通过DOM元素属性进行绑定
<input type = "button" id = "btn">
<script>
document.getElementById("btn").onclick = function(){
alert("click");
}
</script>
常见的事件
参考文档：https://www.w3school.com.cn/
document.getElementById("register").onsubmit = function(){
//onsubmit返回true表单提交成功，返回false表单不会被提交
return true;
}
表单验证
//1. 当输入框失去焦点时，验证输入内容是否符合要求
//1.1 获取表单输入框
var nameInput = document.getElementById("name");
//1.2 绑定onblur事件
nameInput.onblur = checkName;
function checkName(){
//1.3 获取输入内容
var name = nameInput.value.trim();
//1.4 判断是否符合规则，显示对应信息
if(name.length >= 6 && name.length <= 12){
//符合规则，隐藏错误信息
document.getElementById("name_err").style.display = 'none';
return true;
}else{
//不符合规则，显示错误信息
document.getElementById("name_err").style.display = '';
return false;
}
};
//2. 当点击注册按钮时，判断所有输入框的内容是否都符合要求，不符合则阻止表单提交
//获取表单对象
var regForm = document.getElementById("reg-form");
//为表单对象绑定onsubmit
regForm.onsubmit = function(){
//判断所有输入框，全部符合返回true，反之返回false
var flag = checkName();
return flag;
};
正则表达式
定义字符串的组成规则
//定义：
//方式1. 直接量：不要加引号
var reg = /^\w{6,12}$/;
//方式2. 创建RegExp对象
var reg = new RegExp("^\\w{6,12}$");
//方法：
//判断指定字符串是否符合规则，返回true或false
var str = "ziping";
var flag = reg.test(str); //true
正则表达式的语法：
1. 字符
^ 表示开始
$ 表示结束
[] 代表某个范围内的单个字符
. 代表任意单个字符
\w 代表单个单词字符，相当于[A-Za-z0-9_]
\d 代表单个数字字符，相当于[0-9]
2. 量词
+ 至少一个
* 零个或多个
? 零个或一个
{x} x个
{m,} 至少m个
{m,n} 至少m个，至多n个
//举例
//电话号码
var reg = /^[1]\d{10}$/;
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
