今天学习了js的基础入门，作为后端程序员对js的常用方法和格式语法了解就行，不必深学
时间： 2022/5/8
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 文档对象模型，用来操作网页中的元素（标签） |
HTML引入JS
1. 内部js 2. 外部js 注意: 1.如果引入了外部js,当前标签就不能再写内部js 2.页面是从上往下加载的 上面的js代码不能获取下面的html元素
输出语句
JS三种输出方式:
1. 浏览器弹框输出字符 alert(‘哈哈’)
2. 输出html内容到页面 document.write(‘呵呵’)
3. 输出到浏览器控制台 console.log(‘嘻嘻’)
变量声明
下面变量和常量的声明都是基于JS6版本讲解的, 所以必须先将idea中JS的版本调整为6
在JS中声明变量主要用到的关键字是let， 声明常量用到的关键字是const，而且声明时不用理会数据的类型
数据类型
基本类型:
* string：字符串类型（单引号双引号都可以）
* number：数值类型
* boolean：布尔型
* undefined：未定义的,未赋值的
* null:赋值为null
对象类型:
* object： 其他对象类型
获取变量类型的方式:
typeof(变量名)
运算符
js与java的运算符一样，算数运算符、赋值运算符、逻辑运算符等等，不需要死记硬背，写程序会用就行
- 算数运算符
+ - * / % ++ – - 赋值运算符
= += -= *= /= - 比较运算符
> < == === != - 逻辑运算符
&& || ! - 三元运算符
条件表达式？为真 : 为假
条件判断
在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：跳出本次循环
函数[重点]
功能：js函数用于执行特定功能的代码块，为了方便理解也可以称为js方法(其作用就类似于Java中的方法)
在JS中函数分为两种，分别是普通函数和匿名函数
普通函数
function 方法名（参数列表）{
方法实现
}
匿名函数
function （参数列表）{
方法实现
}
普通函数
语法:
function 函数名(形参1, 形参2){
方法实现
}
调用:
函数名(实参1,实参2)
特点:
- js的函数形参不需要写数据的类型
- js的函数不需要写返回值类型,可以直接写return返回值
- js的函数形参和实参个数不一致也可以调用,语法不严格
匿名函数
先记住语法格式，一会讲到js的事件，它就有用了！！！！
事件[重点]
时间监听机制：
给一个事件源绑定一个事件, 当事件发生就执行指定的方法.
事件源: 指定的一个元素
事件: 具体的一个动作
方法: 就是要执行的代码.;
事件绑定方式:
通过事件，可以将HTML上的元素跟函数绑定在一起来完成一些具体的功能。
绑定方式有两种:1.在标签上绑定事件 2.在js中绑定事件
常用事件
-
点击事件：
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)
Window定时器
Window对象可以实现两种定时器：setInterval（周期性任务）、setTimeout（一次性任务）
Location地址栏
Location对象指的是浏览器的地址栏，它的主要作用是地址的获取、刷新和跳转
reload() 重新加载页面
href 获取当前地址
href=“新地址” 修改当前地址,跳转页面
案例:轮播图
Title
DOM对象
DOM（Document Object Model）文档对象模型，其作用是把HTML页面内容抽象成为一个Document对象，然后可以使用js动态修改页面内容。
HTML上元素, 属性, 内容 都算是DOM的对象, 都可以使用js代码来操作
获取元素对象
document.getElementById(id属性值)
document.getElementsByTagName(标签名)
document.getElementsByClassName(class属性值)
document.getElementsByName(name属性值)
石原里美新垣结衣花泽香菜 斋藤飞鸟
操作DOM内容
获取元素的内容: js对象.innerHTML
修改元素的内容: js对象.innerHTML=‘xxx’
js对象.outerHTML
大厦春
操作DOM属性
获取元素的属性: js对象.属性名
设置元素的属性: js对象.属性名=‘xxx’
注意: 只有元素的固有属性可以这样去操作
操作DOM样式
使用js的设置css样式:
js对象.style.样式名=‘样式值’
使用js配合css设置样式:
js对象.className=‘值’
Title
石原里美
正则表达式
作用：根据定义好的规则，过滤文本内容；这里我们用于校验表单
-
正则语法:
let regex = /^正则表达式$/; 创建正则规则
regex.test(字符串) 判断指定字符串是否符合正则规则 -
常见符号：
^ 表示匹配字符串的开始位置
$ 表示匹配字符串的结束位置- 表示匹配 零次到多次
- 表示匹配 一次到多次 (至少有一次)
? 表示匹配零次或一次
. 表示匹配单个字符
| 表示为或者,两项中取一项
( ) 小括号表示匹配括号中全部字符
[ ] 中括号表示匹配括号中一个字符 范围描述 如[0-9 a-z A-Z]
{ } 大括号用于限定匹配次数 如 {n}表示匹配n个字符 {n,}表示至少匹配n个字符 {n,m}表示至少n,最多m
转义字符 如上基本符号匹配都需要转义字符 如 * 表示匹配*号
w 表示英文字母和数字
d 表示数字
案例：表单校验
表单校验
 |
 |
| 首页 周边游 山水游 古镇游 出境游 国内游 港澳游 台湾游 5A景点游 全球自由行 |
|
|
 |
| 江苏传智播客教育科技股份有限公司 版权所有Copyright 2006-2020, All Rights Reserved 苏ICP备16007882 |
