js简介
- js是一种运行在客户端(浏览器) 上的编程语言,实现人机交互效果
- 作用
网页特效 (监听用户的一些行为让网页作出对应的反馈)
表单验证 (针对表单数据的合法性进行判断)
数据交互 (获取后台的数据, 渲染到前端)
服务端编程 (node.js)
js组成
ECMAScript
规定js基础语法核心知识 例如变量,分支语句,循环语句,对象等
Web APIs
- DOM 操作文档
页面元素进行移动、大小、添加删除等操作 - BOM 操作浏览器
例如检测视口宽度,弹窗等 权威网站 MDN
js书写位置
内联式写法
写在标签内部 vue框架运用这种模式
<!-- 一,内联js书写 -->
<button onclick="alert('月薪过万')">点击我</button>
内部式写法
- 写在html标签内,用script标签包裹
- script标签写在 </ body> 上面,为了浏览器的加载顺序
<!-- 二,内部js书写 -->
<script>
alert('你好,js')
</script>
外部式写法
写在js文件夹中去通过script标签引入到html页面中去script标签内不可以再写其他内容,会被忽略
<!-- 三,外部js引入方式 script标签内不可以再写其他代码-->
<script src="./my.js"></script>
js注释
单行注释
// ctrl + /
多行注释(块注释)
/* */ ctrl + alt + a
js结束符
代表语句结束英文状态下分号 ;可写可不写- 换行符会被识别成结束符
- 统一写或者不写
js输入与输出语法
输出
body输入内容
// 1.document 文档的意思 write 写
document.write('我愿意')
//可以加标签
document.write('<h1>我愿意</h1>')
弹出框
// 2. alert 警示框
alert('你好,js')
控制台输出
// 3. 控制台输出语法 程序员看的
// console.log('我是用来测试的')
输入
- 显示一个对话框,用户输入内容
// 4. 输入语句 prompt 显示一个对话框
prompt('我是一个输入语句?')
字面量
包括数字 字符串 数组 对象等等
变量
变量含义
变量是计算机存储数据的容器变量不是数据本身
变量的基本使用
- 声明变量 let age
- 变量赋值 age = 18
- let不允许多次声明同一个变量
声明多个变量 let age = 18,name='gik'let age = ' ' (空字符串)
let与var的区别
var可以先使用在声明var声明过的变量可以重复声明var变量提升、全局变量、没有块级作用域
变量拓展-数组
let list = []- 数组是按顺序保存的,每个数据都右自己的编号==(索引或下标)==
数组可以存储任意类型的数据
变量的本质
内存: 计算机存储数据的地方,相当于一个空间变量: 程序在内存中申请一块用来存储数据的小空间本质: 去内存申请空间
变量的命名规格与规范
规则
- 必须遵守,不遵守报错
- 不允许使用关键字
- 只能使用下划线、字母、数字、$组成的
- 不能数字开头
- 字母严格区分大小写
规范
起名需要有意义- 遵守小驼峰命名法 userNmae
数据类型
数据分类的原因是为了更加高效的利用内存,更加方便的去管理数据
基本数据类型
数字型number
包括正数 负数 小数- js 是弱数据类型,变量的类型只有赋值后,才能确认是那种类型
字符串型string
单引号(' ')双引号(" ")- 反引号( ` )
单引号和双引号可以互相嵌套(外双内单,或者外单内双)- 字符串拼接
console.log('我的年龄为' + 18 +'岁') - 模板字符串
内容拼接变量时,使用反引号,用${}包裹住变量
let age = 18
let name = 'gik'
console.log(`我的名字时${name},我的年龄是${age}`)
布尔型boolean
有两个固定的值true 或 false
未定义型undefined
只声明变量不赋值使用场景:不知道这个数据是否传过来,通过检测变量是不是undefined
let age
console.log(age) //打印为undefined
空类型null
赋值了,但内容为空尚未创建的对象使用场景:未来有个变量存放的对象类型,但对象还没创建好,可以先给null
let obj = null
console.log(obj) //null
引用数据类型
对象object
js中的一种数据类型无序的数据集合对象声明 let对象名={}
//let 对象名={
属性名:属性值
方法名:匿名函数
}
多个属性之间用,号隔开属性名可以使用""或'' 一般省略(除空格或中横线)访问属性 对象.属性 或者 对象['属性']
// 声明人对象
let person = {
uname: '刘德华',
age: 18,
sex: '男',
sayHi: function(year = 0) {
alert('hello,我是刘德华')
console.log('hello,我是刘德华');
console.log('年', year);
}
}
// 第一种 : 访问属性值 对象.属性名
console.log(person.uname);
//第二种 对象['属性名']
console.log(person['sex']);
//调用方法 对象.方法名
person.sayHi()
//传参
person.sayHi(1999)
操作对象查询对象 对象.属性 对象.方法()修改对象 对象.属性=新值添加数据 对象.新属性=新值删除属性 delete 对象.属性
遍历对象for k in obj遍历对象k是对象的属性名obj[k]是获得的属性值
let obj = {
uname: '小明',
age: 18,
sex: '男'
}
// for in专门用来遍历对象
// k是个变量(对象中的属性名)
for (let k in obj) {
console.log('属性名', k); //k是属性名 是字符串'uname'
console.log('属性值', obj[k]); //属性值 不加引号
}
内置对象js内部提供的对象，包含各种属性和方法给开发者调用内置对象Math(数学运算方法)- 链接: 详细介绍网址
console.log(Math.PI); //圆周率
//返回的是一个随机小数 范围是[0-1) 包括0排除1 随机抽奖
console.log(Math.random());
//向上取整 返回的是整数
console.log(Math.ceil(1.1)); //2
console.log(Math.ceil(1.9)); //2
//向下取整 返回的是整数
console.log(Math.floor(1.1)); //1
console.log(Math.floor(1.9)); //1
//四舍五入 就近取整 负数时往大取整
console.log(Math.round(1.1)); //1
console.log(Math.round(1.9)); //2
console.log(Math.round(1.5)); //2
console.log(Math.round(-1.5)); //-1
console.log(Math.round(-1.9)); //-2
//找最大值 最小值 只能是对象
console.log(Math.max(1, 5, 8, 25, 45));
console.log(Math.min(1, 5, 8, 25, 45));
数组array
数组是一种可以按顺序保存数据的数据类型数组中，数据的编号叫做索引或小标数组可以存储任意类型的数据取值 arr[i] i为下标常见术语 元素：数组中保存的每个数据；长度：通过arr.length通过for循环 遍历数组- 操作数组
- 查询数组 数组[下标] arr[i]
- 重新赋值 数组[下标] = 新值
- 添加数据
- arr.push(新增内容）
返回的是新的数组的长度 往数组的后边添加 - arr.unshift(新增内容）
返回的新的数组的长度 往数组前边添加
- arr.push(新增内容）
- 删除数据
- arr.pop()
返回删除的元素 - arr.shift()
返回删除的元素 - arr.splice(删除的索引，删除的个数）
- arr.pop()
let arr = ['red', 'green', 'blue'];
//删除数组中最后一个元素
// arr.pop()
// console.log(arr);
//返回的是删除的元素
// console.log('删除的是哪一个', arr.pop());
//删除数组中的第一个元素
// arr.shift()
// console.log(arr);
//返回的是删除的元素 swhift是删除 unshift是增加(数组前边加)
// console.log('删除的是哪一个', arr.shift());
//删除指定元素
// arr.splice(起始位置,删除几个元素)
// 删除的元素不写,默认删除到最后
arr.splice(1)
console.log('删除后的数组', arr);
console.log('删除的元素', arr.splice(1));
冒泡排序(简单的排序算法）
let arr = [2, 6, 4, 3, 5, 1]
console.log('初始数组', arr);
// 1. 外层循环控制的是趟数 循环 5次 arr.length - 1
for (let i = 0; i < arr.length - 1; i++) {
//2. 内部循环 交换arr.length-i-1次
for (let j = 0; j < arr.length - i - 1; j++) {
//3. 交换变量
if (arr[j] > arr[j + 1]) {
let max_num = arr[j]
max_num = arr[j + 1]
arr[j + 1] = arr[j]
arr[j] = max_num
}
console.log(arr)
}
}
console.log('最后的数组', arr)
函数function
function是被设计为执行特定任务的代码块通过函数调用,可以精简代码,方便复用- 函数使用
// function 函数名(参数列表){
// 函数体是函数的构成部分，它负责将相同或相似代码“包裹”起来，直到函数调用时函数体内的代码才会被执行
// }
// 函数声明
function sayHi() {
document.write('hello,你好')
}
// 函数调用
sayHi()
- 函数传参
提高函数的灵活性,多个数据用逗号隔开形参:声明函数时写在函数名右边小括号里的(形式上参数),在这个函数内声明的变量实参:调用函数时写在函数名右边小括号里的(实际上的参数)尽量保持形参和实参个数一致
- 函数返回值
函数是被设计为执行特定任务的代码块return返回,结束当前函数return后的数据不要换行写没有return,默认返回undefined
- 作用域
代码的可用范围如果函数内部或者块级作用域内部，变量没有声明，直接赋值，也当全局变量看作用域链 用链式查找决定哪些数据能被内部函数访问 就近原则查找最终值作用域全局作用域 作用于整个script标签或独立的js文件局部作用域(函数作用域) 作用于函数内部的代码环境块级作用域 {}包裹 if或for
变量的作用域全局变量 任何区域都可以和使用局部变量 只能在当前函数内部访问和修改块级变量 只能在作用域里访问
匿名函数立即执行,无需调用避免全局变量之间的污染
// 立即执行函数 立即执行， 无需调用
// let fn=function fn(){
// }
// fn()
//1、 第一个小括号放形参 第二个是放的实参
(function(x, y) {
console.log('1111', x, y);
})(1, 2)
//2、 第一个小括号放形参 第二个是放的实参
(function(x, y) {
}(1, 2))
命名规范:尽量使用小驼峰写法,前缀应该为动词循环重复代码写完即执行,函数调用,随时调用,随时执行
检测数据类型
控制台 : 数字型和布尔型颜色为蓝色,字符串和undefined颜色为灰色console.log(typeof 变量)
类型转换
把一种数据类型的变量换成我们需要的数据类型
隐式转换
系统自动做转换+号两边只要有一个是字符串,都会把另一个转成字符串除了+号,- * / 都会把数据转成数字类型+号作为整数解析,可以转换成数字类型
console.log(10+ +'10') //返回20
显示转换
- 转换为数字型
Number 只能是数字类型,如果有字母等,结果为(NaN) ,NaN也是number数据类型的数据,代表非数据
parseInt 只保留整数
parseFloat 可以保留小数
// let num = '10'
console.log(Number('10.01'))
//转换为数字型, 只保留整数,没有四舍五入
console.log(parseInt('10.01'));
// 转换为数字型 会保留小数
console.log(parseFloat('10.01'));
//区别 Number只能放数字类型的字符,不能放其他的 否则返回NaN
console.log(Number('10.01abc'));
//parseFloat会过滤 经常用来过滤单位
console.log(parseFloat('10.01ab2c'));
console.log(parseFloat('100px'));
- 转换为字符型
string(数据)
变量.tostring(进制)