JavaScript Day1(基础)
简介
概念:JavaScript是一种运行在客户端(浏览器)的编程语言
组成:两部分(ECMAscript & Web APIs)
三部分(ECMAscript & DOM & BOM)
标签样式
- 行内式
- 嵌入式(,标签内不要写代码无效)
输入输出语句
输入
语法1:
document.write('')
语法2:页面弹出
alset('')
语法3:控制台输出
console.log('')
输出
prompt('')
JavaScript代码执行顺序:
按HTML文档流顺序执行JavaScript代码
alert()和 prompt()它们会跳过页面渲染先被执行
变量声明
单个变量(推荐)
ES6中声明变量用let
var a = 18
var a = 19
console.log(a) //不报错,不科学
let a = 18
let a = 19
console.log(a) //报错,不允许多次声明
使用var,不好之处:
可以先使用在声明(不合理)
var声明过的变量可以重复声明(不合理)
比如变量提升、全局变量、没有块级作用域等等
多个变量(可读性不好)
逗号隔开
let age = 18, username = "xiaoxiao"
变量名命名规范,特别要注意的几点:
不能用关键词;
只能用下划线、字母、数字、$组成,且数字不能开头;
js严格区分大小写.
常量声明
注意点:
- 常量不允许更改值
- 常量声明的时候必须赋值
数据类型
基本数据类型:number & string & boolean & undefined & null
引用数据类型:object对象
-
字符串可以用""(双引号) | ‘’(单引号) | ``(反引号)
字符串拼接
let age = 18 console.log("我今年"+ age + "岁了") // 模板字符串 外面反引号`` 里面${变量名} console.log(`我今年${age}岁了`)
使用表单、prompt获取过来的数据默认是字符串类型的
-
undefined & null
undefined表示变量未赋值
null表示赋值了,但是内容为空(官方解释:把null作为尚未创建的对象)
console.log(undefined + 1) //NaN console.log(null + 1) //1
-
检测数据类型
console.log(typeof null) //object
-
类型转换
-
隐式转换:某些运算符被执行时,系统内部自动将数据类型进行转换,这种转换称为隐式转换。
+号两边只要有一个是字符串,都会把另外一个转成字符串;作为正号解析可以转换成数字型
除了+以外的算术运算符比如 - * / 等都会把数据转成数字类型
console.log(2 + '2') //22 console.log(2 - '2') //0 console.log(+'123') //123,转换为数字型
-
显式转换
转数值
Number() & parseInt() & parseFloat()
let num1 = +prompt('输入年薪') console.log(num1) let num2 = Number(prompt('输入年薪')) console.log(num2)
let a = +prompt("1:") let b = +prompt("2:") alert(`两个数的和为${a + b}`)
转字符串
String()
变量.toString() 括号里面可以跟进制
-
运算符
一元运算符
前置|后置自增 自减
let i = 2
console.log(++i + 1); //4
console.log(i++ + 1); //4
//了解
let t = 1
console.log(t++ + ++t +t) //1+3+3=7
比较运算符
-
字符串比较,是比较的字符对应的ASCII码
(从左往右依次比较;如果第一位一样再比较第二位,以此类推)
-
不同类型之间比较会发生隐式转换
最终把数据隐式转换转成number类型再比较
所以开发中,如果进行准确的比较我们更喜欢 === 或者 !==
-
= & == & === 区别
=是赋值
==是判断只要求值相等,不要求数据类型一样即可返回true
=== 是全等要求值和数据类型都一样返回的才是true
开发中,请使用===
console.log('a' < 'b') //true
console.log('aa' < 'ab') //true
console.log('aa' < 'aab') //true,一位一位比较,没有的肯定小于有的
逻辑运算符
&& || !
&& 一假则假
|| 一真则真
let year = +prompt('请输入年份:')
if(year % 4 === 0 && year % 100 !== 0 || year % 400 === 0){
alert(`${year}年是闰年`)
} else {
alert(`${year}年是平年`)
}
优先级 | 运算符 | 顺序 |
---|---|---|
1 | 小括号 | () |
2 | 一元运算符 | ++ – ! |
3 | 算数运算符 | 先 * / % 后 + - |
4 | 关系运算符 | > >= < <= |
5 | 相等运算符 | == != === !== |
6 | 逻辑运算符 | 先 && 后 || |
7 | 赋值运算符 | = |
8 | 逗号运算符 | , |
三元运算符
运用场景:其实是比 if 双分支更简单的写法,可以使用三元表达式
let num1 = +prompt('请您输入第一个数:')
let num2 = +prompt('请您输入第二个数:')
num1 > num2 ? alert(`最大值是${num1}`) : alert(`最大值是${num2}`)
//补零
let num = prompt('请您输入一个数字')
//法一:
// num < 10 ? num = 0 + num : num = num
//法二:
num = num < 10 ? 0 + num : num
alert(num)
表达式
表达式是可以被求值的代码,JavaScript引擎会将其计算出一个结果。
语句:语句是一段可以执行的代码。
程序三大流程控制语句
以前我们写的代码,写几句就从上往下执行几句,这种叫顺序结构
有的时候要根据条件选择执行代码,这种就叫分支结构
某段代码被重复执行,就叫循环结构
if() 除0所有的数字都为真 && 除了空字符串’'所有的字符串都为真(’ '也为真)
switch判断是全等===;break穿透
let num1 = prompt('请您输入第一个数字:')
let num2 = prompt('请您输入第二个数字:')
let sp = prompt('请您输入 + - * / 其中一个:')
switch (sp) {
case '+':
alert(`两个数的加法操作是${num1 + num2}`)
break
case '-':
alert(`两个数的减法操作是${num1 - num2}`)
break
case '*':
alert(`两个数的乘法操作是${num1 * num2}`)
break
case '/':
alert(`两个数的除法操作是${num1 / num2}`)
break
default:
alert('请输入+-*/')
}
let money = 100
while(true){
let re = +prompt(`
请您选择操作:
1.存钱
2.取钱
3.查看余额
4.退出`)
if (re === 4){
break
}
switch(re) {
case 1:
let cun = +prompt('请输入存款金额')
money = money + cun
break
case 2:
let qu = +prompt('请输入取款金额')
money = money - qu
break
case 3:
alert(`您的银行卡余额是${money}`)
while循环三要素:
变量起始值;
终止条件(没有终止条件,循环会一直执行,造成死循环);
变量变化量(用自增或者自减).
continue & break 区别:
let i = 1
while(i <= 5){
if (i === 3){
i++
break //1,2
// continue
//1,2,4,5
}
console.log(`我要吃第${i}个包子`)
i++
}