是一种运行在浏览器的编程语言，实现人机交互效果，进行网页特效(监听用户行为让网页做出反馈)、表单验证(对表单数据合法性进行判断)、数据交互(获取后台的数据，渲染到前端)、服务端编程(node.js)。
2.使用1.页面script标签嵌入
位置在
是一种运行在浏览器的编程语言，实现人机交互效果，进行网页特效(监听用户行为让网页做出反馈)、表单验证(对表单数据合法性进行判断)、数据交互(获取后台的数据，渲染到前端)、服务端编程(node.js)。
2.使用1.页面script标签嵌入
位置在
<script type="text/javascript">
alert('ok！');
script>
alert函数即为页面d框
script语句以
;号结尾，但是可写可不写，因为js默认将换行符识别成结束符，若是几条语句放到一行，则必须中间加入分号。页面内标签嵌入放到html文件底部，因为浏览器会按照代码顺序进行加载
2.行间事件（主要用于事件）
<input type="button" name="" onclick="alert('ok！');">
在Vue书写时会用到
3.外部引入
连接外部.js文件
<script type="text/javascript" src="js文件位置">script>
3.输入输出 (1)输入注：在外部引用的script标签内无需写代码，会被忽视
//提示d框输入
promt('要输入的标题:')
//eg:promt('请输入姓名:')
//向body中写入，可以识别标签
document.write('要输出的内容')
document.write('要输出的内容')
//页面警示框alert函数
alert('要输出的内容')
//控制台输出，可以直接log按tab键，一般是用来测试的，在f12中console控制台处进行测试
console.log('console.log要输入的内容')
document.write结果：
alert结果：
console.log结果：
4.字面量是计算机中描述事物
举个栗子：‘姓名’为字符串字面量。{}对象字面量
二、变量 1.使用// 1.声明变量
let 变量名
// 1.2.声明变量并初始化
let 变量名=值
// 2.变量赋值
变量名=值
eg:打开页面d出控制台输入年龄，然后页面直接打印该年龄
// 1.声明变量
let age=19
// 打印变量
age=prompt('请输入年龄')
document.write('你的年龄为：'+age)
//字符串拼接：可以使用`+`号拼接两个字符串
2.获取标签
let声明同一个变量只能声明一次
let就是为了解决var的一些问题，以后使用let声明变量
var不合理处： 可以先使用再声明
变量可以重复声明
没有块级作用域
document.getElementsByTagName：获取页面上的某一种标签，获取的是一个选择集，不是数组，但是可以用下标的方式 *** 作选择集里面的标签元素。
document.getElementById：通过id获取标签，因为id只能使用一次，所以返回只有一个
document.getElementsByClassName：通过类名获取标签选择集
document.getElementsByName：通过name获取标签选择集
<script>
window.onload = function(){
var ap = document.getElementsByTagName('p');
//d出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>
可以通过typeof+变量名检测数据类型
x=1
document.write(typeof(x))
//number类型
2.string字符串类型正数、复数、小数等统一称为数字类型
js是弱数据类型，只有赋值后才能确定
单引号''、双引号""、反引号`包裹的数据都叫字符串。单引号和双引号本质无区别，推荐使用单引号
模板字符串拼接注：单引号和双引号之间可以互相嵌套，但是不能嵌套相同的，比如外层双引号，那么内层不能使用双引号
正常字符串拼接是使用+号拼接两个字符串
使用反引号`包裹的称为模板字符串，模板字符串拼接时用**${}**包裹。使得字符串拼接更加简便
let age=18
document.write(`我的年龄：${age}`)
//${}内还可以进行计算
document.write(`20年后我的年龄：${age+20}`)
//还可以写html标签
document.write(`Hello`)
只声明不赋值的时候，该变量就是未定义类型。平时可以判断是否收取到用户传递过来的值。
5.null空类型表示赋值了但是内容是空
6.扩展：类型转换使用表单、prompt获取的数据为字符串类型，使用时有时需要进行数据类型转换。
(1)隐式转换 +号两边只要有一个字符串，都会把另外一个字符串转换成字符串除了+以外的算术运算符，比如-*/等都会把数据转换成数字类型(2)显示转换 Number(数据)：转换成数字型，若字符串内有非数字，则转换失败，结果为NaN(Not a Number)，即不是一个数字。注：
转换类型不明确，需要靠经验总结+号作为正号解析可以转换成numberx='10' document.write(typeof(+x)) document.write(+x + 10) //number20
NaN也是number类型的数据，代表非数字。
parseInt(数据)：只保留整数，不进行四舍五入
parseFloat(数据)：强制转换成小数，经常用于过滤单位
document.write(parseFloat(`100px`))
//100
let age=18
document.write(String(age))
document.write(age.toString())
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(`
订单付款确认页面
商品名
商品价格
商品数量
总价
收获地址
${name}
${price}元
${num}个
${total}元
${address}
`)
script>
body>
html>
| 运算符 | 含义 |
|---|---|
| + | 加 |
| - | 减 |
| * | 乘 |
| / | 除 |
| % | 取模 |
| 运算符 | 含义 |
|---|---|
| = | 赋值 |
| += | 相加，返回值给符号左侧的变量 |
| -= | 相减，返回值给符号左侧的变量 |
| *= | 相乘，返回值给符号左侧的变量 |
| 运算符 | 含义 |
|---|---|
| ++ | 自加1 |
| – | 自减1 |
| 运算符 | 含义 |
|---|---|
| > | 大于 |
| < | 小于 |
| >= | 大于等于 |
| <= | 小于等于 |
| == | 相等 |
| != | 不相等 |
| === | 两边是否类型和值都相等 |
| !== | 两边是否不全等 |
| 运算符 | 含义 |
|---|---|
| && | 逻辑与 |
| || | 逻辑或 |
| ! | 逻辑非 |
6.运算符优先级 括号：逻辑或可以判断用户是否输入，如
x=x||0，表示若用户输入则给x赋值，否则给x赋值0
()一元运算符：++ -- !算数运算符：先* / %后+ -关系运算符：> >= < <= 相等运算符：== != === !==逻辑运算符：先&&后||赋值运算符：=逗号运算符：,
7.三元运算符
条件 ? 满足条件执行的代码 : 不满足条件执行的代码
//求a,b最大值，并让a保存最大值
a=a>b?a:b
if(条件1){
代码
}
else if(条件2){
代码
}
else{
代码
}
switch(条件){
case 结果1: 代码1 break
case 结果2: 代码2 break
...
default:代码n break
}
while(条件){
代码
}
for(声明起始值;循环条件;变化值)
{
代码
}
let 数组名=[数据1,数据2,...]
数组名[下标]//从0开始
数组名//输出数组
数组名.length
数组[下标]=新值
数组名.push(新增内容)
//尾插法：末尾添加，返回新长度
数组名.unshift(新增内容)
//头插法：开头添加，返回新长度
数组名.pop()
//删除最后一个元素，并返回该元素值
数组名.shift()
//删除第一个元素，并返回该元素值
数组名.splice(起始位置,删除的个数)
//删除指定元素，即从起始位置开始，删除几个元素，若不写删除元素个数，则表示全部删除
(7)反转
let a = [1,2,3,4];
a.reverse();
alert(a); // d出4,3,2,1
(8)数组中元素第一次出现的索引值
let a = [1,2,3,4,1,3,4];
alert(a.indexOf(1));//1第一次出现的索引值
用户输入四个季度的数据，生成柱状图
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(``)
// 循环四个柱子
for(let i=0;i<a.length;i++)
{
document.write(`
${a[i]}px;">
${a[i]}
第${i+1}季度
`)
}
script>
body>
html>
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)
若返回一个值可以直接：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]}`)
全局变量：函数外部let变量，全局都能使用
若未声明变量直接赋值，则表示其为全局变量，但是强烈不推荐
局部变量：函数内部let变量，只能作用在函数内
块级变量：{}内的let变量，只能作用在{}
(4)匿名函数 具名函数：有函数名的函数匿名函数：无函数名的函数作用域链：变量的访问原则是就近原则
函数表达式：
let fn=function(参数){
代码
}
//fn是变量的名，并不是函数名
//使用
fn(参数)
封闭函数是javascript中匿名函数的另外一种写法，创建一个一开始就执行而不用命名的函数。
(function myalert(){
alert('hello!');
})();
//还可以在函数定义前加上“~”和“!”等符号来定义匿名函数
!function myalert(){
alert('hello!');
}()
3.object对象 (1)声明对象封闭函数的好处
封闭函数可以创造一个独立的空间，在封闭函数内定义的变量和函数不会影响外部同名的函数和变量，可以避免命名冲突，在页面上引入多个js文件时，用这种方式添加js文件比较安全
let 对象名={}
属性：特征，如姓名、年龄、性别等特点
方法：行为，如跑步、说话、写字等等
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)
//输入：公园
//输出：张三去公园跑步
对象.属性=值
对象.方法=function(){}
对象.新属性名=新值
delete 对象名.属性名
for(let k in 对象){}
eg:
for(let k in person){
//输出属性名，并且k类型为字符串=='name'
document.write(k+'\n')
//输出属性值
document.write(person[k])
}
举个栗子：打印学生表
<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(`
学生列表
序号
姓名
年龄
性别
`)
for(let i=0;i<student.length;i++)
{
document.write(`
${i+1}
`)
for(let k in student[i])
document.write(`${student[i][k]} `)
document.write(` `)
}
document.write(`
a
`)
script>
body>
是javascript内部提供的对象
documentdocument.getElementById() //通过id获取元素
document.getElementsByTagName() //通过标签名获取元素
document.referrer() //获取上一个跳转页面的地址(需要服务器环境)
window.location.href() //获取或者重定url地址
window.location.search() //获取地址参数部分
window.location.hash() //获取页面锚点或者叫哈希值
Math.random() 获取0-1的随机数
Math.floor 向下取整
Math.ceil 向上取整
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）