javaScript组成:
ECMA Script : 简称ES,指的是JavaScript的语法版本
BOM----游览器对象模型--通过js操作游览器(弹窗,刷新)
DOM----文档对象模型 --通过JS操作文档内容
前端三剑客:
html: 负责网页的基本组成.显示的内容都通过它表示 -- 身体
css: 负责网页内容美化,排版布局,性能优化 -- 衣服/化妆品
JavaScript: 负责网页的动态效果,交互行为 -- 技能/行为
JavaScript的组成:
ECMA Script: 简称ES. 指的是JavaScript的语法版本
BOM -- browser object model --> 浏览器对象模型 --> 通过js操作浏览器(弹窗/刷新)
DOM -- document object model --> 文档对象模型 --> 通过js操作网页内容
JavaScript的写法:
1.写在script标签里(最好写在body最后) 先等html元素加载完了再执行js功能
<script>js代码</script>
2.把代码写在专门的js文件里.通过script里的src属性引入. 也可以引入网络上的js文件
<script src='js路径'></script>
注释:
单行注释: // 注释内容
多行注释: /* 注释内容 */
输入输出语句:
alert() // 弹窗
document.write() // 在网页里输出数据.能够识别标签内容
console.log() // 在网页控制台里输出内容.里面的内容是在控制台输出,不在网页里
prompt() // 输入框.出来一个弹窗进行输入
变量 = 用来存储数据的容器
声明变量:
在js中声明变量使用let / var 声明
let 变量名 = 变量值 // 声明变量并赋值
let 变量名 = 变量值,变量名 = 变量值 // 一次声明多个变量
let 变量名 // 声明空变量
let name='麒麟',age=27
使用变量:
输出语句(变量)
输出语句(变量,变量)
console.log(name)
console.log(name,age)
输入变量:
let 变量名 = prompt()
let name = prompt('你叫什么名字')
数据类型: 不同的数据有不同的作用.分门别类方便后续区分使用
查看数据的类型.可以通过typeof获取
console.log(数据,typeof 数据)
console.log(name,typeof name)
number: 数值类型,在js中整数,小数,正负数都是用number表示. 不区分int/float
let 变量名 = 数值
let money = 480
string: 字符串类型,用单'双"反` 引号包裹起来的数据.用来保存字符
let 变量名 = '字符'
let talk ='多喝热水'
反引号是用作模板字符串.类似于python的格式化输出,更方便的输出带有变量的数据
`${变量名}`
alert(`你好.我是${name}`)
boolean: 布尔类型.用于判断真/假 只有两个值 true/false
let 变量名 = true
let 变量名 = false
let is_login = true
undefined: 未定义类型.声明了一个变量,在未赋值的情况下.属性和值都为undefined
null: 空类型.类似于python里的None
运算符:
&&: and 与运算符. 当有多个条件时,都满足才为真
||: or 或运算符. 当有多个条件时,满足其中一个就为真
!: not 非运算符 取反
单目运算符(++/--) 让数据+1 -1. 运算符会根据位置不同,执行顺序也不同
let i = 10
++在后面 --> 先运行再赋值 alert(i++) // 结果为10,先输出再i+1
++在前面 --> 先赋值再运行 alert(++i) // 结果为12.先i+1再输出
三目运算符: 双分支语句的语法糖(偷懒写法).在面对双分支的情况时,代码会更简便
判断条件 ? 结果1 : 结果2
判断条件 ? 为真的结果 : 为假的结果
代码不是越精简越好 --> 可以尽量精简,但是要优先保障可读性
你写了一堆很骚气很精简的代码. 但是写的乱/不好理解
照样是不推荐的写法
高血压: 不写注释/滥用语法糖(有的时候宁愿多写几行,提升代码可读性)
转义字符 --> 带有特别含义的字符
\t --> 制表符,缩进,tab键
\n --> 换行
类型转换:
隐式类型转换 --> 程序运行时自动转换.
强制类型转换 --> 手动转换数据类型
String() -- 把数据转为字符串
Number() -- 把数据转为数值类型.转换失败值为NaN
Boolean() -- 把数据转为布尔类型.有值为真,无值为假
流程控制语句:
程序运行的不同方式,基本的有三种
1.顺序执行 -- 程序由上往下依次执行,遇到bug停止
2.选择执行 -- 根据条件满足与否,执行对应的语句
3.循环执行 -- 根据条件满足与否,重复执行对应的语句
2/3的条件判断都是基于boolean类型进行判断的
选择执行(分支语句) --> if
单分支(if) 如果满足判断条件,执行if里的代码.不满足无事发生
双分支(if else) 如果满足判断条件,执行if里的代码.不满足就执行else里的代码
多分支(if / else if /else)如果满足判断条件,执行if/else if里的代码.都不满足就执行else里的代码
单分支:
if(判断条件){
执行语句
}
双分支:
if(判断条件){
执行语句
}else{
执行语句
}
多分支:
if(判断条件){
执行语句
}else if(判断条件){
执行语句
}else{
执行语句
}
选择分支语句 switch: 一般用来判断多个连续性/关联性的事务
case 选择 default默认 break结束 如果case都不满足就执行default
switch(表达式){
case 情况1:
代码
break
case 情况2:
代码
break
default:
代码
break
}
循环语句:
while -- 根据循环条件判断是否执行代码.如果为真就循环执行.为假就不执行
do while -- 先执行一遍代码,再进行循环条件判断 --> 至少会运行一次
while(循环条件){
执行语句
更新语句
}
do{
执行语句
更新语句
}while(循环条件)
for循环的语法和python区别较大.但是都属于迭代循环 --> 相对来说更方便的循环方式
for(声明变量;循环条件;更新条件){
执行语句
}
for(let i=0;i<= 10; i++){
document.write('多喝热水')
}
中断语句: 在循环里一般结合if进行判断.如果满足条件就结束/跳过循环
break: 结束本轮循环
continue: 跳过本次循环
函数(function) --> 把一些常用的功能封装起来取个名字. 需要使用的时候调用即可
声明函数:
function 函数名(){
代码
}
function fun(){
alert('#096')
}
调用函数:
函数名()
fun()
alert()
函数参数: 可以把数据交给函数处理.让函数更灵活.而不是只能处理固定的数据
形参: 没有具体的数据,先占个位置 -- 定义阶段
实参: 有具体的值,在运行时取代形参 -- 调用阶段
function 函数名(参数1,参数2){
代码
}
函数名(数据1,数据2)
function like(name){
console.log(`那么多老师里面.我最喜欢的就是${name}了`)
}
like('沈昊麟')
like('七零')
like('麒麟')
函数返回值(return) --> 如果你希望函数里的数据能够让其他函数/功能调用.那就把它返回出去
function 函数名(){
return 返回值
}
function fun2(){
return '多喝热水'
}
let hot = fun2() // 调用函数,并把返回值赋值给变量hot
alert(hot)
匿名函数/自执行函数 --> 不想取函数名/自动执行
!(function(形参){
代码
})(实参);
内置对象 --> js内置的一些对象.他们有自己的属性和方法
数组Array -- 用法/语法和python里的列表类似.用中括号包裹多个数据.里面的数据通过下标来保存/获取
字符串String -- 对字符串内容进行增删改查操作
日期Date -- 获取时间日期
数学Math -- 进行数学计算
数组的sort排序 --> 里面会涉及到排序的算法.原理不做深入解释.要了解就自己拓展
数组的sort会结合自定义函数的返回值来排序. 如果返回值>0 就会交换里面的变量
ps:三目运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
let age = 19
alert(age >=18 ? '成年了' : '未成年')
</script>
</body>
</html>
ps:sort() 数组排序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
// sort() 数组排序 结合自定义函数的返回值来排序。如果返回值>0,就会交换里面的变量
let arr = [2346,47,58679,342]
function ASC(a,b){
return a-b //升序排序,从小到大
}
function DESC(a,b){
return b-a //降序排序,从大到小
}
arr.sort(ASC)
document.write(arr)
</script>
</body>
</html>