一、初始JavaScript
JavaScript 是 Web 的编程语言。
所有现代的 HTML 页面都使用 JavaScript。
在网页中,JavaScript 代码,需要在script标签中定义。
script标签可以放在的网页的任何地方,但是,通常会放到body标签的最下方,
确保JavaScript 代码,在网页的内容全部加载完毕后再执行。
1.输出语句
console.log 输出信息
console.warn 输出警告信息
console.error 输出错误信息
console.table 以表格的方式展开对象的成员信息
console.time(name) 开始测试时间
console.timeEnd(name) 结束测试时间
2.定义变量
(1) 什么变量
就是内存中的一个空间,用于存储数据,数据的种类是不一样的,所以对空间的要求也不一样。
定义不同类型的变量,其实就是定义不同的存储空间,存储不同的数据。
var是定义变量的关键字,定义变量的方式是:var 变量名 = 变量值。
变量名就是变量的标识,用于之后重新获取变量里面保存的值。
注意:js是一门弱类型语言,不像java,C#是强类型语言。
强类型语言,在定义变量的时候,就必须要明确类型,并且之后不能再改变类型。
弱类型语言,在定义变量的时候,不需要明确类型,类型由具体的数据确定,并且之后可以改变类型。
(2) 类型
typeof关键字,用于返回变量的数据类型
number是数字类型,注意:在js中,整型和浮点型的数据都是number类型。
string是字符串类型,由一对双引号 或 单引号 引起来的数据都是字符串。
boolean是布尔类型,布尔类型用于表示:真 或 假。只有两个属性值:true 和 false。
undefined是未定义类型,变量已经定义,但是还没有赋值。
object是对象类型,用于定义复杂的数据格式。
null是空类型,用于表示空对象,所以,null本质上也是object类型,但是不具有object默认的属性和行为。
symbol是ES6新增了一个数据类型,用于确定一个唯一的数据,通常用于给对象添加唯一的属性 或 方法。
ES6指的是ECMAScript2015之后的版本
注意:在js中,每条语句采用分号结尾,分号可以省略。
总结:在js中,数据类型一共有7个。
分别是:number(数字类型),string(字符串类型),boolean(布尔类型),undefined(未定义类型),
object(对象类型),null(空对象类型),symbol(唯一值类型)。
3.算术运算符
算术运算符:+ - * / %
注意:字符串 + 任何数据 都是拼接,重新返回新的字符串。
表达式是从左往右执行,当遇到字符串时,整个表达式才当做字符串处理。
除法运算,除法会保留小数。
parseInt()函数,用于取整数,注意:并不是四舍五入,而且去掉小数。
简写形式:
b += a //b = b + a
b -= 10 //b = b - 10
b *= 2 //b = b * 2
b /= 5 //b = b / 5
b %= 3 //b = b % 3
num++ // num = num + 1
++num // ++可以放在变量的后面,也可以放在变量的前面
++在变量的后面,表示先返回变量的原值,再加1
++在变量的前面,表示变量的值先加1,再返回变量的值
<script>
var num1 = 100;
var num2 = 200;
var num3 = "300";
console.log(num1+num2); //300这里的加号是加法运算。
console.log(num1+num3); //100300这里的加号是字符串的拼接,因为表达式中只要有一个数据是字符串,整个表达式就当做字符串处理。
console.log(num1+num2+num3); //300300因为表达式是从左往右执行,当遇到字符串时,整个表达式才当做字符串处理。
console.log(num1+num2+num3+num1+num2); //300300100200整个表达式从遇到num3开始,后面的都当做字符串处理。
</script>
4.比较运算符
比较运算符:> >= < <= == != ===(全等于,恒等于) !==(恒不等于)
使用比较运算符的表达式是比较表达式,比较表达式返回的数据类型是boolean类型
注意:采用==比较两份数据是否相等,只比较值,不比较类型。
注意:采用===比较两份数据是否相等,值要相等,类型也要相等。
注意:采用!=比较两份数据是否不相等,只比较值,不比较类型。
注意:采用!==比较两份数据是否不相等,值不相等或者类型不相等。
5.逻辑运算符
逻辑运算符:&&(并且) ||(或者) !(取反)
|| 是或运算符,左右两个表达式,其中一个返回true,整个表达式返回true
&& 是与运算符,左右两个表达式,都返回true,整个表达式才返回true
! 是非运算符,用于将表达式的值取反值,如果表达式返回true,取反就是false
6.运算符的优先级
运算符的优先级:() > 算术运算符 > 关系运算符 > ! > && > ||
7.命名规范
变量里面保存的是一份数据,为了方便将来获取里面存储的数据,变量名命名一定要规范。
就是看到变量名就知道里面存储的是什么数据。(见名知意)
在JS中,变量名的规范有:
只能使用:字母、数字、_、$ 做为变量名称。
数字不要开头,
不能使用JS的关键字,
多个单词组成的变量名,要使用驼峰命名法,第一个单词的首字母小写,其余单词的首字母大写。
二、选择结构
1.JavaScript的组成
(1) 三大核心
ESMAScript 核心语法(标准规范)-> SE6
BOM 浏览器对象模式,其实就是window对象,该对象可以操作浏览器
DOM 文档对象模型,其实就是document对象,该对象可以操作网页里面的所有元素
(2) window对象的常用方法
window.alert()方法,用于打开消息框
window.prompt()方法,用于打开输入框,输入框返回的数据的类型是string类型
window.confirm()方法,用于打开确定框,确认框里面有两个按钮,确定和取消,点击确定按钮返回true,点击取消按钮返回false
window.parseInt()方法,用于将字符串数据,强转为整型
window.parseFloat()方法,用于将字符串数据,强转为浮点型
window.isNaN()方法,用于判断一份数据是不是NaN数据(not a number)
2.if选择结构
if选择结构的语法是:if ( 判断条件 ) { 满足条件之后,执行的代码块 }
if-else选择结构,if ( ) 里面的条件成立执行 if { } 里面的代码块,否则执行 else { } 里面的代码块
注意:当if或者else里面只有条件语句的时候,可以省略{}
建议:初学者,不要省略{}
3.多重if选择结构
多重if选择结构里面,满足其中一个条件,执行该条件对应的代码,这个大括号下执行完成后会跳出整个程序结构。
如果所有的条件都不成立,有else,就执行else;没有else,整个程序结构结束。
<script>
var score = parseInt(prompt('请输入考试成绩:'));
// 判断成绩,大于等于90分,奖励手机一部
// 大于等于80分,奖励MP4一个
// 大于等于70分,奖励MP3一个
// 大于等于60分,没有任何奖励
// 小于60分,罚抄代码50遍
if (score >= 90) {
console.log('奖励手机一部');
}else if (score >= 80) {
console.log('奖励MP4一个');
}else if (score >= 70) {
console.log('奖励MP3一个');
}else if (score >= 60) {
console.log('没有任何奖励');
}else {
console.log('罚抄代码50遍');
}
</script>
练习题:
如果有500万存款,买一辆奔驰-迈巴赫S600
如果有300万存款,买一辆宝马740
如果有100万存款,买一辆奥迪A6L
如果有50万存款,买一辆大众途观L
如果有10万存款,买一辆奥拓
否则,买一辆捷安特
4.嵌套if选择结构
嵌套if选择结构:就是在一个完整的if或者else的结构中,继续使用if结构语句。
<script>
// 问题分析:
// 百米成绩跑进12秒,进入决赛,否则直接淘汰
// 进入决赛后,再根据需求分组,分男子组和女子组
var score = parseFloat(prompt('请输入百米成绩:'));
if (score < 12) {
console.log('进入决赛...');
var sex = prompt('请输入性别');
if (sex === '男') {
console.log('进入男子组...');
}else {
console.log('进入女子组...');
}
}else {
console.log('直接淘汰!');
}
</script>
练习题:
请输入是否是会员,输入y是会员,输入n不是会员
请输入消费金额
会员:消费打8折,满100元打6折
非会员:消费满200元打9折,不满200元不打折
最后输出本次实际消费金额
多重if和嵌套if的综合练习题:
输入年 月 输出该月份有多少天?
闰年公式:年份能被4整除,但不能被100整除;或者年份能被400整除。闰年的2月份是29天,平年的2月份是28天。
5.switch选择结构
switch选择结构,也是用于进行多分支判断,语法结构比多重if简洁。
但是,switch选择结构只能进行等值判断。
语法结构是:将需要进行等值判断的变量,放到()里面。在{}里面通过case后面的值跟它进行等值判断。
<script>
// 请输入成绩,第一名奖励手机一部,第二名奖励MP4一个,第三名奖励MP3一个,否则没有奖励。
var mc = parseInt(prompt('请输入名次:'));
if (mc === 1) {
console.log('奖励手机一部');
} else if (mc === 2) {
console.log('奖励MP4一个');
} else if (mc === 3) {
console.log('奖励MP3一个');
} else {
console.log('没有奖励');
}
console.log('--------------------------');
switch (mc) {
case 1:
console.log('奖励手机一部');
break;
case 2:
console.log('奖励MP4一个');
break;
case 3:
console.log('奖励MP3一个');
break;
default:
console.log('没有奖励');
break;
}
</script>
注意1:
case语句,在结束之前,通常都要加上break,表示跳出switch选择结构,因为,
switch选择结构,里面的case一旦判断成立,后面的case就不会再进行判断了。
注意2:
如果多个case的输出结果相同,可以将多个case的结果合并,并省略前面case的break。
// case语句,通常都要加上break结束,什么情况下会不加break
// 题目:超市商品打折。1,3,5面包打5折;2,4,6,可乐买一送一;周日,全场5折
var weekDay = prompt('请输入今天是周几:');
switch (weekDay) {
case '1':
case '3':
case '5':
console.log('面包打5折');
break;
case '2':
case '4':
case '6':
console.log('可乐买一送一');
break;
default:
console.log('全场5折');
break;
}
6.三元运表达式
三元表达式,可以简化基本的if-else语句结构
var c = a > 10 ? 100 : 200
三元表达式,也可以简化复杂的if-else语句结构
var e = a > 20 ? 200 : (a > 10 ? 100 : 300)
<script>
// 如果a>10,b赋值100,否则b赋值200
var a = 20
var b;
if (a > 10) {
b = 100;
} else {
b = 200;
}
console.log(b);
console.log('--------------');
// 三元表达式,可以简化基本的if-else语句结构
var c = a > 10 ? 100 : 200
console.log(c);
console.log('--------------');
// 如果a>10,d赋值100,如果a>20,d赋值200,否则d赋值300
var d;
if (a > 20) {
d = 200;
} else if (a > 10) {
d = 100;
} else {
d = 300;
}
console.log(d);
console.log('--------------');
// 三元表达式,也可以简化复杂的if-else语句结构
var e = a > 20 ? 200 : (a > 10 ? 100 : 300);
console.log(e);
</script>