今天学习了js的基础入门，作为后端程序员对js的常用方法和格式语法了解就行，不必深学
时间： 2022/5/8
JS概述
JavaScript是用来实现页面交互的一门编程语言
JavaScript历史
- **起源：**上世纪末，Netscape（网景）公司推出Navigator浏览器。发布后用的人不多，这咋整啊？这家公司就想了一个好方案，不仅在浏览器实现静态HTML，还想要有动态效果，比如：在前端处理表单验证。
- **动手：**有目标就去做，网景公司大牛多，Brendan Eich（布兰登·艾奇）据说就用了10天就把JavaScript搞了出来，刚出来时叫LiveScript，为了蹭蹭当红明星Java热度，就改成JavaScript了（瞬间就火了），事实上他们两没啥关系。
- **竞争：**看到网景公司有了js，微软感觉不行啊，我的IE要被干掉啊，同时也感到js的前途无量，于是参考JavaScript弄了个名为JScript浏览器脚本语言。
- 标准： Netscape和微软竞争出现的js导致版本的不一致，随着业界的担心，JavaScript的标准化被提上议事日程。ECMA（欧洲计算机制造商协会）组织就去干这事，最后在1997年弄出了ECMAScript作为标准。
JavaScript组成
| 组成部分 | 作用 |
|---|---|
| ECMA Script | 构成了JS核心的语法基础 |
| BOM | Browser Object Model 浏览器对象模型，用来操作浏览器上的对象 |
| DOM | Document Object Model 文档对象模型，用来操作网页中的元素（标签） |
JS基础
HTML引入JS
1. 内部js <script type="text/javascript"> js代码 </script>
2. 外部js <script type="text/javascript" src="外部js文件"></script>
注意:
1.如果引入了外部js,当前标签就不能再写内部js
2.页面是从上往下加载的 上面的js代码不能获取下面的html元素
输出语句
JS三种输出方式:
1. 浏览器弹框输出字符 alert(‘哈哈’)
2. 输出html内容到页面 document.write(‘呵呵’)
3. 输出到浏览器控制台 console.log(‘嘻嘻’)
<script>
// 1. 浏览器弹框输出字符 alert('哈哈')
alert("哈哈");
// 2. 输出html内容到页面 document.write('呵呵')
document.write("呵呵");
// 3. 输出到浏览器控制台 console.log('嘻嘻')
//浏览器的控制台打开: F12 (+Fn)
console.log("嘻嘻");
</script>
变量声明
下面变量和常量的声明都是基于JS6版本讲解的, 所以必须先将idea中JS的版本调整为6
在JS中声明变量主要用到的关键字是let， 声明常量用到的关键字是const，而且声明时不用理会数据的类型
数据类型
基本类型:
* string：字符串类型（单引号双引号都可以）
* number：数值类型
* boolean：布尔型
* undefined：未定义的,未赋值的
* null:赋值为null
对象类型:
* object： 其他对象类型
获取变量类型的方式:
typeof(变量名)
<script>
//定义字符串
let s = 'abc';
//定义整数
let a = 10;
let b;
let i = null;
let q = true;
document.write(" s=" + typeof(s));
document.write(" a=" + typeof(a));
document.write(" b=" + typeof(b));
document.write(" i=" + typeof(i));
document.write(" q=" + typeof(q));
//定义常量
const c = 10;
//c = 20; 报错
</script>
运算符
js与java的运算符一样，算数运算符、赋值运算符、逻辑运算符等等，不需要死记硬背，写程序会用就行
- 算数运算符
+ - * / % ++ – - 赋值运算符
= += -= *= /= - 比较运算符
> < == === != - 逻辑运算符
&& || ! - 三元运算符
条件表达式？为真 : 为假
<script>
// == 比较两个变量的内容是否一致
// === 比较两个变量的内容和类型是否一致
let a = 123;
let b = 123;
let c = "123";
document.write(a==b); //true
document.write(a===b); //true
document.write(a==c); //true
document.write(a===c); //false
let d = "true";
let q = "1";
let e = true; //做比较时:true变成1 false变成0
alert(d==e); //false
alert(q==e); //true
</script>
条件判断
在JS中条件判断主要有两种: if和switch，其使用方式和Java一致
-
if判断
if (条件表达式) {
代码块;
} else if(条件表达式) {
代码块;
} else {
代码块;
} -
switch判断
switch(条件表达式){
case 值1 :
代码块 break;
case 值2 :
代码块 break;
default:
默认代码块;
}
循环语句
在JS中, 用于实现循环的语法主要是for和while
-
普通for循环
for(let i= 0; i<10; i++){
需要执行的代码;
} -
增强for循环
for(let obj of array){
需要执行的代码;
} -
while循环
while (条件表达式) {
需要执行的代码;
} -
do…while循环
do{
需要执行的代码;
}while(条件表达式); -
break和continue
break: 跳出整个循环
continue：跳出本次循环
<script>
//1. 普通for循环
for(let i=0; i<10; i++){
document.write(i);
}
//创建数组(一会学)
let arr = [11,22,33,44];
//2.增强for循环
for(let a of arr){
document.write(a);
}
//3. while循环
let i = 1;
while(i<=10){
document.write(i);
if(i%3==0){
break;
}
i++;
}
</script>
函数[重点]
功能：js函数用于执行特定功能的代码块，为了方便理解也可以称为js方法(其作用就类似于Java中的方法)
在JS中函数分为两种，分别是普通函数和匿名函数
普通函数
function 方法名（参数列表）{
方法实现
}
匿名函数
function （参数列表）{
方法实现
}
普通函数
语法:
function 函数名(形参1, 形参2){
方法实现
}
调用:
函数名(实参1,实参2)
特点:
- js的函数形参不需要写数据的类型
- js的函数不需要写返回值类型,可以直接写return返回值
- js的函数形参和实参个数不一致也可以调用,语法不严格
<script>
//定义函数
function method(a,b) {
alert(a);
alert(b);
}
//调用函数
method("abc",123);
</script>
匿名函数
先记住语法格式，一会讲到js的事件，它就有用了！！！！
<script>
//匿名函数
let method1 = function () {
alert(123);
};
method1();
</script>
事件[重点]
时间监听机制：
给一个事件源绑定一个事件, 当事件发生就执行指定的方法.
事件源: 指定的一个元素
事件: 具体的一个动作
方法: 就是要执行的代码.;
事件绑定方式:
通过事件，可以将HTML上的元素跟函数绑定在一起来完成一些具体的功能。
绑定方式有两种:1.在标签上绑定事件 2.在js中绑定事件
<script>
//要给这个按钮绑定单击事件,绑定方式有两种
//1.在标签上绑定事件 2.在js中绑定事件
function aaa() {
alert("你点到我了~~");
}
</script>
<input type="button" value="请点我" onclick="aaa()">
<input type="button" value="请点我">
<script>
//要给这个按钮绑定单击事件,绑定方式有两种
//1.在标签上绑定事件 2.在js中绑定事件
//获取input按钮
let e = document.getElementsByTagName("input");
//给元素绑定事件
e[0].onclick = function () {
alert("你点到我了~~");
}
</script>
常用事件
-
点击事件：
1. onclick ：单击事件(**)
2. ondblclick：双击事件 -
焦点事件
1. onblur：失去焦点(**)
2. onfocus:获得焦点 -
加载事件：
1. onload：页面加载完成后立即发生 -
鼠标事件：
1. onmousedown 鼠标按钮被按下
2. onmouseup 鼠标按键被松开
3. onmousemove 鼠标被移动
4. onmouseover 鼠标移到某元素之上()
5. onmouseout 鼠标从某元素移开() -
键盘事件：
1. onkeydown 某个键盘按键被按下
2. onkeyup 某个键盘按键被松开
3. onkeypress 某个键盘按键被按下 -
改变事件
1. onchange 域的内容被改变 -
表单事件：
1. onsubmit 提交按钮被点击(*)这个事件不是加在submit元素上,是加在form元素上
内置对象[了解]
String对象
创建方式:
let s = new String(“字符串”);
常见方法：
和java中的同名方法功能也相同
let s = new String("abc");
let s2 = "abc";
let a = s.charAt(1);
alert(typeof (s)); //object
alert(typeof (s2)); //string
alert(a);
Array对象
-
创建数组:
let arr = [1,2,3];
注意:JS数组不区分数据类型,而且其长度可以随意改变,因此JS数组类似于Java中的集合 -
数组方法[不用记]:
合并:concat() 合并数组
添加:push() 尾部添加 / unshift() 头部添加
删除:pop() 尾部删除 / shift() 头部删除
转字符串:join(分隔符)
//创建数组
let arr = ["abc",22,33,44];
arr[5] = 100;
//给末尾添加元素
arr.push(200);
//获取末尾的元素
let a2 = arr.pop();
alert(a2);
//要把数组转成字符串,用=分割元素
let s3 = arr.join("=");
alert(s3);
for(let a of arr){
document.write(a+" ");
}
BOM&DOM
BOM对象
BOM（Browser Object Model ）浏览器对象模型，其作用是把浏览器抽象成为一个对象模型，然后可以使用js模拟浏览器的一些功能。
Window弹框
Window对象可以实现三种弹框：警告窗(alert)、确认窗(confirm) 、输入窗(prompt)
<script>
window.alert(""); //用window调用的方法付 window.可以省略
//警告弹窗
alert("哈哈");
//确认弹窗
let b = confirm("是否保存密码");
document.write(b);
//输入弹窗
let s = prompt("请输入:");
</script>
Window定时器
Window对象可以实现两种定时器：setInterval（周期性任务）、setTimeout（一次性任务）
<script>
//定时器方法的返回值是这个定时器的编号.每次创建的定时器都有一个编号
//setInterval（周期性任务）
//每3秒执行一次方法
let a = setInterval(function () {
alert("哈哈");
},3000);
// setTimeout（一次性任务）
//倒计时三秒之后执行一次
let b = setTimeout(function () {
alert("哈哈");
},3000);
//关闭定时器的方法
clearInterval(a);
clearTimeout(b);
</script>
Location地址栏
Location对象指的是浏览器的地址栏，它的主要作用是地址的获取、刷新和跳转
reload() 重新加载页面
href 获取当前地址
href=“新地址” 修改当前地址,跳转页面
<input type="button" value="按钮" id="a">
<script>
//获取这个按钮元素
let b = document.getElementById("a");
//给元素绑定单击事件
b.onclick = function () {
//重新加载当前页面,刷新
//location.reload();
//获取当前路径
//let q = location.href;
//alert(q);
//修改路径为百度
location.href = "https:\\www.baidu.com";
}
</script>
案例:轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img src="img/1.jpg" alt="" width="70%" height="400px" id="a">
<script>
//定义变量
let i = 1;
//获取img元素
let img = document.getElementById("a");
//定义循环定时器
setInterval(function(){
//i++
i++;
//判断
if(i>5){
i = 1;
}
//把图片的src路径做修改
img.src = "img/"+i+".jpg";
}, 2000);
</script>
</body>
</html>
DOM对象
DOM（Document Object Model）文档对象模型，其作用是把HTML页面内容抽象成为一个Document对象，然后可以使用js动态修改页面内容。
HTML上元素, 属性, 内容 都算是DOM的对象, 都可以使用js代码来操作
获取元素对象
document.getElementById(id属性值)
document.getElementsByTagName(标签名)
document.getElementsByClassName(class属性值)
document.getElementsByName(name属性值)
<div id="a" class="abc" name="user">石原里美</div>
<div class="abc">新垣结衣</div>
<span id="b" class="abc">花泽香菜</span>
<span name="user">斋藤飞鸟</span>
<script>
//document.getElementById(id属性值) :获取到一个元素,返回元素
let e1 = document.getElementById("a");
//console.log(e1);
//document.getElementsByTagName(标签名) :获取到多个元素,返回元素的数组
let e2 = document.getElementsByTagName("span");
//console.log(e2[0]);
//console.log(e2[1]);
//document.getElementsByClassName(class属性值)
let e3 = document.getElementsByClassName("abc");
//console.log(e3);
//document.getElementsByName(name属性值)
let e4 = document.getElementsByName("user");
//js中操作元素时要操作单个元素,不能直接操作数组
let arr = document.getElementsByTagName("span");
//绑定鼠标移入
for(let a of arr){
a.onmouseover = function () {
//就弹出窗口
alert("哈哈");
}
}
</script>
操作DOM内容
获取元素的内容: js对象.innerHTML
修改元素的内容: js对象.innerHTML=‘xxx’
js对象.outerHTML
<div>大厦春</div>
<script>
//获取元素
let a = document.getElementsByTagName("div");
//获取元素里面的内容
//let s = a[0].innerHTML;
//弹出内容
//alert(s);
//设置元素的内容
a[0].innerHTML = "马冬梅";
</script>
操作DOM属性
获取元素的属性: js对象.属性名
设置元素的属性: js对象.属性名=‘xxx’
注意: 只有元素的固有属性可以这样去操作
<img src="img/1.jpg" alt="" id="img">
<input type="text" name="username" id="aaa">
<script>
//修改图片的路径
//1.获取图片元素
let img = document.getElementById("img");
//2.修改图片的src属性
img.src = "img/2.jpg";
//获取输入框的值
//1.获取输入框元素
let input = document.getElementById("aaa");
//2.给元素绑定失去焦点
input.onblur = function () {
//3.获取输入框的值弹出
alert(input.value);
}
</script>
操作DOM样式
使用js的设置css样式:
js对象.style.样式名=‘样式值’
使用js配合css设置样式:
js对象.className=‘值’
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c{
color: pink;
}
.d{
color: green;
}
</style>
</head>
<body>
<div id="d1">石原里美</div>
<input type="button" value="点我" id="i1">
<input type="button" value="点我" id="i2">
<script>
//分别获取两个按钮
let button1 = document.getElementById("i1");
let button2 = document.getElementById("i2");
//获取div元素
let div = document.getElementById("d1");
//如果点击第一个按钮文字显示成粉色
button1.onclick = function () {
//js对象.style.样式名='样式值'
//div.style.color = "pink";
//js对象.className = "class值";
div.className = "c";
};
//如果点击第二个按钮文字显示成绿色
button2.onclick = function () {
//div.style.color = "green";
div.className = "d";
};
</script>
</body>
</html>
正则表达式
作用：根据定义好的规则，过滤文本内容；这里我们用于校验表单
-
正则语法:
let regex = /^正则表达式$/; 创建正则规则
regex.test(字符串) 判断指定字符串是否符合正则规则 -
常见符号：
^ 表示匹配字符串的开始位置
$ 表示匹配字符串的结束位置- 表示匹配 零次到多次
- 表示匹配 一次到多次 (至少有一次)
? 表示匹配零次或一次
. 表示匹配单个字符
| 表示为或者,两项中取一项
( ) 小括号表示匹配括号中全部字符
[ ] 中括号表示匹配括号中一个字符 范围描述 如[0-9 a-z A-Z]
{ } 大括号用于限定匹配次数 如 {n}表示匹配n个字符 {n,}表示至少匹配n个字符 {n,m}表示至少n,最多m
\ 转义字符 如上基本符号匹配都需要转义字符 如 * 表示匹配*号
\w 表示英文字母和数字
\d 表示数字
<script>
//let regex = /^正则表达式$/; 创建正则规则
//regex.test(字符串) 判断指定字符串是否符合正则规则
// 在""的里面写\就要写成\\ , 如果不在""里面\就只需要写一根\
let regex = /^\w{6,12}$/;
let s = "qwertyu";
//比较
let b = regex.test(s);
alert(b);
</script>
案例：表单校验
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>表单校验</title>
<link rel="stylesheet" href="../css/register.css">
<style>
span{
color: red;
font-size: 12px;
/*display: none;*/
}
</style>
</head>
<body>
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td>
<img src="../img/top_banner.jpg" width="100%" alt="">
</td>
</tr>
<tr>
<td>
<img src="../img/logo.png" width="100%" alt="">
</td>
</tr>
<tr height="40px" align="center">
<td bgcolor="#ffc900">
首页      
周边游      
山水游      
古镇游      
出境游      
国内游      
港澳游      
台湾游      
5A景点游      
全球自由行      
</td>
</tr>
<tr height="500px">
<td>
<div class="content">
<div class="rg_form">
<div class="rg_form_left">
<p style="color: #ffc900;font-size: 20px;">用户注册</p>
<p style="color: #aeb2c9;font-size: 20px">USER REGISTER</p>
</div>
<div class="rg_form_center">
<form action="#" method="get" id="myForm">
<table>
<tr>
<td class="td_left">用户名</td>
<td>
<input type="text" id="username" name="username" placeholder="请输入6-12位数字或字母">
<span id="userInfo"> </span>
</td>
</tr>
<tr>
<td class="td_left">手机号</td>
<td>
<input type="text" id="telephone" name="telephone" placeholder="请输入手机号">
<span id="telInfo"> </span>
</td>
</tr>
<tr>
<td class="td_left">密码</td>
<td>
<input type="password" id="password" name="password" placeholder="请输入密码">
<span id="pwdInfo"> </span>
</td>
</tr>
<tr>
<td class="td_left">验证码</td>
<td>
<input type="text" name="smsCode" id="smsCode" placeholder="请输入验证码">
<a href="#">发送手机验证码</a>
<span id="codeInfo"></span>
</td>
</tr>
<tr>
<td></td>
<td width="373">
  <input type="submit" value="注册">
</td>
</tr>
</table>
</form>
</div>
<div class="rg_form_right">
<p>已有账号？<a href="#" style="text-decoration: none;color: #fcb1b1">立即登录</a></p>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<img src="../img/footer_service.png" width="100%" alt="">
</td>
</tr>
<tr>
<td bgcolor="#ffc900" height="50px" align="center">
江苏传智播客教育科技股份有限公司 版权所有Copyright 2006-2020, All Rights Reserved 苏ICP备16007882
</td>
</tr>
</table>
<script>
//定义一个判断用户名的方法
function aaa(){
//1.获取用户名元素
let username = document.getElementById("username");
//3.如果失去焦点获取输入框里面用户填写的值
let s = username.value;
//4.写正则表达式做判断
let regex = /^[a-zA-Z0-9]{6,12}$/;
if(!regex.test(s)){
//5.如果判断结果是false,就给输入框后面加上"用户名格式不合法"
//5.1获取用户名后面的span元素
let userInfo = document.getElementById("userInfo");
//5.2给这个元素设置内容
userInfo.innerHTML = "用户名格式不合法";
//返回值
return false;
}else{
//5.3如果判断结果是true,就把不合法的内容去掉
let userInfo = document.getElementById("userInfo");
userInfo.innerHTML = "";
//返回值
return true;
}
}
//对用户名做判断
//1.获取用户名元素
let username = document.getElementById("username");
//2.给元素绑定失去焦点
username.onblur = function () {
aaa();
};
//获取form表单元素
let form = document.getElementById("myForm");
//绑定提交事件
form.onsubmit = function () {
//这个事件的方法有返回值,如果返回true就代表允许提交,如果返回false就代表阻止提交
let b = aaa();
return b;
}
</script>
</body>
</html>
2555
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
