JavaScript
一、介绍
1.简介
是一种运行在浏览器的编程语言，实现人机交互效果，进行网页特效(监听用户行为让网页做出反馈)、表单验证(对表单数据合法性进行判断)、数据交互(获取后台的数据，渲染到前端)、服务端编程(node.js)。
2.使用
1.页面script标签嵌入
位置在</body>上面
<script type="text/javascript">
alert('ok！');
</script>
alert函数即为页面弹框
script语句以
;号结尾，但是可写可不写，因为js默认将换行符识别成结束符，若是几条语句放到一行，则必须中间加入分号。页面内标签嵌入放到html文件底部，因为浏览器会按照代码顺序进行加载
2.行间事件（主要用于事件）
<input type="button" name="" onclick="alert('ok！');">
在Vue书写时会用到
3.外部引入
连接外部.js文件
<script type="text/javascript" src="js文件位置"></script>
注：在外部引用的script标签内无需写代码，会被忽视
3.输入输出
(1)输入
//提示弹框输入
promt('要输入的标题:')
//eg:promt('请输入姓名:')
(2)输出
//向body中写入，可以识别标签
document.write('要输出的内容')
document.write('<h1>要输出的内容</h1>')
//页面警示框alert函数
alert('要输出的内容')
//控制台输出，可以直接log按tab键，一般是用来测试的，在f12中console控制台处进行测试
console.log('console.log要输入的内容')
document.write结果：
alert结果：
console.log结果：
4.字面量
是计算机中描述事物
举个栗子：‘姓名’为字符串字面量。{}对象字面量
二、变量
1.使用
// 1.声明变量
let 变量名
// 1.2.声明变量并初始化
let 变量名=值
// 2.变量赋值
变量名=值
eg:打开页面弹出控制台输入年龄，然后页面直接打印该年龄
// 1.声明变量
let age=19
// 打印变量
age=prompt('请输入年龄')
document.write('你的年龄为：'+age)
//字符串拼接：可以使用`+`号拼接两个字符串
let声明同一个变量只能声明一次
let就是为了解决var的一些问题，以后使用let声明变量
var不合理处： 可以先使用再声明
变量可以重复声明
没有块级作用域
2.获取标签
-
document.getElementsByTagName：获取页面上的某一种标签，获取的是一个选择集，不是数组，但是可以用下标的方式操作选择集里面的标签元素。 -
document.getElementById：通过id获取标签，因为id只能使用一次，所以返回只有一个 -
document.getElementsByClassName：通过类名获取标签选择集 -
document.getElementsByName：通过name获取标签选择集
<script>
window.onload = function(){
var ap = document.getElementsByTagName('p');
//弹出p选择集长度，即2
alert(ap.length);
//设置第一个p标签
ap[0].style.width = '500px';
ap[0].style.height = '500px';
ap[0].style.backgroundColor = 'blue';
//即第一个p标签
}
</script>
<p></p>
<p></p>
3.变量命名规则和规范
(1)规则
- 变量名不能用关键字
- 下划线、字母、数字、$组成，数字不能开头
- 区分大小写
(2)规范：
- 小驼峰命名法 eg:userName
三、js基本数据类型
可以通过typeof+变量名检测数据类型
x=1
document.write(typeof(x))
//number类型
1.number数字类型
正数、复数、小数等统一称为数字类型
js是弱数据类型，只有赋值后才能确定
2.string字符串类型
单引号''、双引号""、反引号`包裹的数据都叫字符串。单引号和双引号本质无区别，推荐使用单引号
注：单引号和双引号之间可以互相嵌套，但是不能嵌套相同的，比如外层双引号，那么内层不能使用双引号
模板字符串拼接
正常字符串拼接是使用+号拼接两个字符串
使用反引号`包裹的称为模板字符串，模板字符串拼接时用**${}**包裹。使得字符串拼接更加简便
let age=18
document.write(`我的年龄：${age}`)
//${}内还可以进行计算
document.write(`20年后我的年龄：${age+20}`)
//还可以写html标签
document.write(`<span style='color:red'>Hello</span>`)
3.boolean布尔型
4.undefinded未定义类型
只声明不赋值的时候，该变量就是未定义类型。平时可以判断是否收取到用户传递过来的值。
5.null空类型
表示赋值了但是内容是空
6.扩展：类型转换
使用表单、prompt获取的数据为字符串类型，使用时有时需要进行数据类型转换。
(1)隐式转换
- +号两边只要有一个字符串，都会把另外一个字符串转换成字符串
- 除了+以外的算术运算符，比如-*/等都会把数据转换成数字类型
注：
- 转换类型不明确，需要靠经验总结
- +号作为正号解析可以转换成number
x='10' document.write(typeof(+x)) document.write(+x + 10) //number20
(2)显示转换
- Number(数据)：转换成数字型，若字符串内有非数字，则转换失败，结果为NaN(Not a Number)，即不是一个数字。
NaN也是number类型的数据，代表非数字。
-
parseInt(数据)：只保留整数，不进行四舍五入
-
parseFloat(数据)：强制转换成小数，经常用于过滤单位
document.write(parseFloat(`100px`))
//100
- String(变量)：转换为字符型
- 变量.toString(进制)：转换成字符串（一般使用String(变量)）
let age=18
document.write(String(age))
document.write(age.toString())
7.举例：商品订单信息
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>商品</title>
<style>
*{
margin: 0;
padding: 0;
}
table{
margin: 0 auto;
text-align: center;
/* 合并:表示表格的两边框合并为一条。 */
border-collapse: collapse;
}
table,th,td{
border: 1px solid black;
padding: 15px;
}
</style>
</head>
<body>
<script>
//1.输入数据
let name = prompt('请输入名称：')
let price = +prompt('请输入价格：')//转换成数字类型
let num = +prompt('请输入数量：')
let address = prompt('请输入收货地址：')
//计算总价
let total=price * num
//渲染表格 填充数据
document.write(`
<table>
<tr>
<th colspan="5">订单付款确认页面</th>
</tr>
<tr>
<td>商品名</td>
<td>商品价格</td>
<td>商品数量</td>
<td>总价</td>
<td>收获地址</td>
</tr>
<tr>
<td>${name}</td>
<td>${price}元</td>
<td>${num}个</td>
<td>${total}元</td>
<td>${address}</td>
</tr>
</table>
`)
</script>
</body>
</html>
四、运算符
1.算数运算符
| 运算符 | 含义 |
|---|---|
| + | 加 |
| - | 减 |
| * | 乘 |
| / | 除 |
| % | 取模 |
2.赋值运算符
| 运算符 | 含义 |
|---|---|
| = | 赋值 |
| += | 相加，返回值给符号左侧的变量 |
| -= | 相减，返回值给符号左侧的变量 |
| *= | 相乘，返回值给符号左侧的变量 |
3.一元运算符
| 运算符 | 含义 |
|---|---|
| ++ | 自加1 |
| – | 自减1 |
4.比较运算符
| 运算符 | 含义 |
|---|---|
| > | 大于 |
| < | 小于 |
| >= | 大于等于 |
| <= | 小于等于 |
| == | 相等 |
| != | 不相等 |
| === | 两边是否类型和值都相等 |
| !== | 两边是否不全等 |
5.逻辑运算符
| 运算符 | 含义 |
|---|---|
| && | 逻辑与 |
| || | 逻辑或 |
| ! | 逻辑非 |
逻辑或可以判断用户是否输入，如
x=x||0，表示若用户输入则给x赋值，否则给x赋值0
6.运算符优先级
- 括号：
() - 一元运算符：
++ -- ! - 算数运算符：先
* / %后+ - - 关系运算符：
> >= < <= - 相等运算符：
== != === !== - 逻辑运算符：先
&&后|| - 赋值运算符：
= - 逗号运算符：
,
7.三元运算符
条件 ? 满足条件执行的代码 : 不满足条件执行的代码
//求a,b最大值，并让a保存最大值
a=a>b?a:b
五、判断循环语句
1.判断语句：
if(条件1){
代码
}
else if(条件2){
代码
}
else{
代码
}
2.分支语句：
switch(条件){
case 结果1: 代码1 break
case 结果2: 代码2 break
...
default:代码n break
}
3.while循环
while(条件){
代码
}
4.for循环
for(声明起始值;循环条件;变化值)
{
代码
}
六、引用数据类型
1.array数组
(1)声明
let 数组名=[数据1,数据2,...]
(2)取值、查询
数组名[下标]//从0开始
数组名//输出数组
(3)长度
数组名.length
(4)修改
数组[下标]=新值
(5)增加★
数组名.push(新增内容)
//尾插法：末尾添加，返回新长度
数组名.unshift(新增内容)
//头插法：开头添加，返回新长度
(6)删除★
数组名.pop()
//删除最后一个元素，并返回该元素值
数组名.shift()
//删除第一个元素，并返回该元素值
数组名.splice(起始位置,删除的个数)
//删除指定元素，即从起始位置开始，删除几个元素，若不写删除元素个数，则表示全部删除
(7)反转
let a = [1,2,3,4];
a.reverse();
alert(a); // 弹出4,3,2,1
(8)数组中元素第一次出现的索引值
let a = [1,2,3,4,1,3,4];
alert(a.indexOf(1));//1第一次出现的索引值
(7)案例：柱状图
用户输入四个季度的数据，生成柱状图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>柱状图</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
margin: 0 auto;
display: flex;
width: 500px;
height: 300px;
border-left: 1px solid pink;
border-bottom: 1px solid pink;
/* 水平分布justify-content */
justify-content: space-around;
/* 垂直分布align-items */
align-items: flex-end;
/* 参数:flext-start：从水平或垂直方向的起点对齐
flex-end：水平或垂直方向的终点对齐
center：在水平或垂直方向上居中
space-between：最左最右靠边，中间间距相等
space-evenly：每个间距均匀分布
space-around：每个项目的左右撑开距离相等 */
text-align: center;
}
.box div{
display: flex;
width: 50px;
background-color: pink;
/* 属性决定主轴的方向（即项目的排列方向）
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。*/
flex-direction: column;
justify-content: space-between;
}
.box div span{
margin-top: -20px;
}
.box div h4{
margin-bottom: -35px;
width: 70px;
margin-left: -10px;
}
</style>
</head>
<body>
<script>
// 1.声明数组并输入数据
let a=[]
for(let i=0;i<4;i++)
{
a.push(prompt(`请输入第${i+1}季度的数据：`))
}
// 2.渲染数据，渲染柱子
document.write(`<div class="box">`)
// 循环四个柱子
for(let i=0;i<a.length;i++)
{
document.write(`
<div style="height: ${a[i]}px;">
<span>${a[i]}</span>
<h4>第${i+1}季度</h4>
</div>
`)
}
</script>
</body>
</html>
2.function函数
(1)定义函数
function 函数名(参数)
{
代码
}
举个栗子：输入四个数组成一个数组，再输入一个数b，让数组每个数都加b并输出
function sum(a,b)
{
return a+b
}
let a=[]
for(let i=0;i<4;i++)
a.push(+prompt(`请输入a[${i+1}]的数据：`))
let b=+prompt('请输入b的值')
for(let i=0;i<4;i++)
a[i]=sum(a[i],b)
document.write(`数组a每个元素都加b得`)
document.write(a)
(2)返回多个值
若返回一个值可以直接：return 返回值
若想要返回多个值，则可以使用返回数组：return [返回值1，返回值2，。。。]
//获取数组最大值和最小值
function ManAndMin(a)
{
let max=min=a[0]
for(let i=1;i<a.length;i++)
{
max=max>a[i]?max:a[i]
min=min<a[i]?min:a[i]
}
return [max,min]
}
let a=[1,3,5,7,9,2,4,6,8]
let b=ManAndMin(a)
alert(`max=${b[0]},min=${b[1]}`)
(3)作用域
-
全局变量：函数外部let变量，全局都能使用
若未声明变量直接赋值，则表示其为全局变量，但是强烈不推荐
-
局部变量：函数内部let变量，只能作用在函数内
-
块级变量：{}内的let变量，只能作用在{}
作用域链：变量的访问原则是就近原则
(4)匿名函数
- 具名函数：有函数名的函数
- 匿名函数：无函数名的函数
函数表达式：
let fn=function(参数){
代码
}
//fn是变量的名，并不是函数名
//使用
fn(参数)
封闭函数是javascript中匿名函数的另外一种写法，创建一个一开始就执行而不用命名的函数。
(function myalert(){
alert('hello!');
})();
//还可以在函数定义前加上“~”和“!”等符号来定义匿名函数
!function myalert(){
alert('hello!');
}()
封闭函数的好处
封闭函数可以创造一个独立的空间，在封闭函数内定义的变量和函数不会影响外部同名的函数和变量，可以避免命名冲突，在页面上引入多个js文件时，用这种方式添加js文件比较安全
3.object对象
(1)声明对象
let 对象名={}
(2)对象组成=属性+方法
属性：特征，如姓名、年龄、性别等特点
方法：行为，如跑步、说话、写字等等
let 对象名={
属性名：属性值,
方法名：函数
}
//eg:
let person={
name:'张三',
age:20,
sex:'男',
goRun: function(address){
document.write(`${this.name}去${address}跑步`)
}
}
//查看对象详细信息
console.log(person)
//查看对象详细信息，比log更加详细
console.dir(person)
this
在方法中，this 表示该方法所属的对象。
如果单独使用，this 表示全局对象。
在函数中，this 表示全局对象。
在函数中，在严格模式下，this 是未定义的(undefined)。
在事件中，this 表示接收事件的元素。
①使用属性–对象.属性、对象[属性]
person.name
person['name']
②使用方法–对象.方法名()
let address=prompt('请输入地址：')
person.goRun(address)
//输入：公园
//输出：张三去公园跑步
(3)重新赋值
对象.属性=值
对象.方法=function(){}
(4)增加属性
对象.新属性名=新值
(5)删除属性
delete 对象名.属性名
(6)遍历对象
for(let k in 对象){}
eg:
for(let k in person){
//输出属性名，并且k类型为字符串=='name'
document.write(k+'\n')
//输出属性值
document.write(person[k])
}
(7)数组对象
举个栗子：打印学生表
<style>
*{
margin: 0;
padding: 0;
}
div{
padding-top: 10px;
width: 400px;
margin: 0 auto;
text-align: center;
}
caption{font-size: 20px;margin-bottom: 10px;}
table{width: 400px;}
table,td,th{
margin: 0 auto;
text-align: center;
border-collapse: collapse;
border: 0.5px solid #ccc;
}
tr{
height: 40px;
}
.student:hover{
background-color:#ddd;
}
table tr:nth-child(1){
background-color:#ddd;
}
table tr:nth-child(1){
background-color:#eee;
}
</style>
</head>
<body>
<script>
let student=[
{name:'张三',age:20,gender:'男'},
{name:'李四',age:21,gender:'女'},
{name:'王五',age:19,gender:'男'},
{name:'钱六',age:22,gender:'男'}
]
document.write(`
<div>
<table>
<caption>学生列表</caption>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
`)
for(let i=0;i<student.length;i++)
{
document.write(`<tr style:"hover:background">
<td>${i+1}</td>
`)
for(let k in student[i])
document.write(`<td>${student[i][k]}</td>`)
document.write(`</tr>`)
}
document.write(`
</table>a
</div>
`)
</script>
</body>
(8)内置对象
是javascript内部提供的对象
- document
document.getElementById() //通过id获取元素
document.getElementsByTagName() //通过标签名获取元素
document.referrer() //获取上一个跳转页面的地址(需要服务器环境)
- location
window.location.href() //获取或者重定url地址
window.location.search() //获取地址参数部分
window.location.hash() //获取页面锚点或者叫哈希值
- Math
Math.random() 获取0-1的随机数
Math.floor 向下取整
Math.ceil 向上取整
534
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
