js全称是JavaScript,一种具有函数优先的轻量级,脚本语言,JavaScript是一种解释型的脚本的语言,C,C++等语言先编译后执行,而JvaScript是在程序的运行过程中逐行进行解释。
js的组成
ECMAScript 基准 基础 标准 ECMA欧洲计算机制造协会
DOM Document Object Model 文档 对象 模型
BOM Browser Object Model 浏览器 对象 模型
js在html的位置,同css一样
行内 写在标签里
<input type="button" value="点击" onclick="alert(‘我是行内’)">
内部 写在title下
<script>
alert('我是内部’)
</script>
3.外部 新建一个js文件,在页面title下引进js文件
<script src="文件路径"></script>
注意:script标签里不可以写任何东西
//单行注释 Ctrl+/
输入输出
输入
<script>
prompt("请输入你的名字");
prompt("请输入你的名字", "张三")
</script>
输出
<script>
alert("我是弹框") // 弹框
console.log("我是控制台输出") // 控制台输出,在页面按F12,找到console(控制台)
</script>
转移符
\n 换行 如果想让\n显示 在前面加\
\t 空格 如果想让\n显示 在前面加\
变量的使用
- 变量声明
var age;
赋值
age = 10;
2. 初始化
var age = 10;
3. 变量名的命名规范
/** 1.变量名是由数字、字母、_、$、组成,数字不能开头
2.变量名不能用关键字、保留字、也就是不能是红色的单词
3.严格区分大小写
4.如果存在两个或以上单词,从第二个单词开始,首字母大写(驼峰命名法)
5.见名知意 **/
4. 变量的多声明 多赋值
var myName='李四',
age=18,
address=‘江苏’,
tel=200454,
gender='男';
console.log(`我是${myName},今年${age}了,来自${address},手机号码是${tel},性别${gender}`);
// 我是里斯,今年18了,来自江苏,手机号是200454,性别男
特殊性
1.只声明 未赋值 结果是undefinned
2.只赋值 未声明 可以正常输出(不推荐)
数据类型
数字型 Number 包含了整数和小数(浮点数)
字符串 String 如果出现引号的嵌套外单内双或外双内单 字符串的长度 变量名:length()
布尔型 Boolean 值只有两个 真 true 假 false
underfined 只声明 未赋值
判断是否是数字 is NaN(); is Not a Number
// 检测类型,typeof(变量名)
数字类型转换
转换数字型
1.Number(变量名或值)
字符串转换 如果不是纯数字 则为NaN not a number
true 转换成1,false 转换成 0,null 转换成0,underfined 转换成 NaN
2.parseInt() 转换为整数
字符串转换 若干不是纯数字 数字在最前时 转换到非数字结束 非数字在前 转换成NaN
true false null underfined转换成NaN
parseFloat(); 原理同上
3. 转换成字符串
1.String() 主要是将数字转换为字符串
2.to String() 使用方法:变量名 .to String()
3.+空字符串
转换为Boolean类型
1.Boolean();
数字转换为布尔类型 除0外都是true 0为false
字符串转换为布尔类型 除了''(空字符串)外都为true ''为false
null 为false
under fined 为false
length 字符串的长度
运算符
1.算术运算符 + - * / %
2.一元运算符
运算:++ --
++ -- 在前 先加减 在运算
++ -- 在后 先运算 在加减
理解:++相当于 自身+1 --相当于 自身-1
var a=10;
b=a++ + ++a;
console.log(b); // b=22 10+11+1
console.log(a); // b=12 11+1
运用最多的是
var a=10;
a++ 或 a--
3.比较运算符 > < >= <= == === != !==
// >=满足一个即可
// ==只要值相等就是true 除了 null undefined
// ===只有值和类型都一致时,才是true
4.赋值运算符 = += -= /= %=
=是将右边的值给左边
var a=10;
a+=10 // a=a+10 a=20
console.log(a);
5.逻辑运算符 && 和 || 或 ! 非 (取反)
// && 和 表达式1&&表达式2 都为真时 结果为真 其他情况都为假
// || 或 表达式1||表达式2 都为假时 结果为假 其他情况都为真
// ! 非 取反
6.运符的优先级
1.()优先级最高
2.一元运算符 ++ -- !
3.算数运算符 先 * / % 后 + -
4.关系运算符 > >= < <=
5.相等运算符 == != === !==
6.逻辑运算符 先&&后||
7.赋值运算符
分支结构 if
if(条件){ // 条件 可以是比较越算 逻辑越算 布尔类型
输出语句; // 只有真的情况下 才执行
}
if else
if(条件){ // 条件 可以是比较越算 逻辑越算 布尔类型
输出语句; // 只有真的情况下 才执行
} else {
输出语句; // 只有假的情况下 才执行
}
var age = prompt("请输入您的年龄");
if (age > 18){
alert("可以喝酒了");
} else {
alert("回家写作业");
}
if(条件1){ //条件 可以是比较越算 逻辑越算 布尔类型
输出语句; // 只有满足条件1情况下 才执行
} else if(条件2){
输出语句; // 不满足条件1,只有满足条件2的情况下 才执行
} else if(条件3){
输出语句; // 不满足以上条件,只有满足条件3的情况下 才执行
} else if(条件4){
输出语句; // 不满足以上条件,只有满足条件4的情况下 才执行
} else{
输出语句; // 以上都不满足
}
小练习
// 闰年
var year = prompt("请输入您的年份");
if (year%4 === 0 && year%100 === 0 || year%400 === 0){
alert("是闰年");
} else {
alert("是平年");
}
// 判断与7有关
var num = prompt("请输入1-100以内的一个数:");
if (num%7 == 0 || num%10 == 7 ||parseInt(num/10) == 7){
alert("与7有关")
} else{
alert("与7无关")
}
// 100米成绩是否进10秒 进10秒 输入男还是女 男进男子组 女进女子组
var score=prompt("请输入百米成绩");
//判断是否10秒
if (score < 10){
alert("恭喜你进入决赛");
}
//判断男女
var gender=prompt("请输入你的性别");
if (gender = "男"){
alert("进入男子组");
} else {
alert("进入女子组");
}
随机数
// Math.random() 小数
parseInt(Math.random() * 10) // 取值范围 0-9 整数
三元运算符
// 条件 ? 表达式1 :表达式2 如果条件为真执行表达式1 否则执行表达式2
var age = prompt("请输入年龄");
var resul t= age > 18 ? "买车" : "学习去";
console.log(result);
switch语句
在switch中,有严格的类型比较,只有类型一致才能比较
常量的值不能相同
break 不能省略否则会形成击穿
default 一般在最后
// 声明
var number=prompt("请拨打手机号:选择备注(1、2、3、4)"); //手机号
// 输出
switch (number) {
case "1":
alert("爸爸的手机号:123");
break;
case "2":
alert("妈妈的手机号:456");
break;
case "3":
alert("爷爷的手机号:789");
break;
case "4":
alert("奶奶的手机号:000");
break;
default:
alert("输入错误");
break;
}
循环
for循环
// 初始化 循环条件 迭代
for(var i = 0; i < 100; i++;){
// 循环体
cosnole.log(i); // 0,1,2,3,4,5,6,7,8....99
}
while循环
while(循环条件){ //结果为:真或假 只有在真的情况下才执行
//循环体
//迭代
}
// 在while循环中迭代一定要有否则就是死循环,点击Sources,点击右下部分网页代码,迭好循环刷新,watch + 回车
for循环与while的区别
// for循环一般用于次数固定的循环
// while一般用于次数不固定的循环
// for 循环的执行顺序 初始化 循环条件 循环体 迭代
for循环的注意事项
1.各部分之间用;隔开
2.初始化部分如果省略 结果会出现i is not defined 未声明
3.循环条件如果省略,会出现死循环
4.迭代条件如果省略,会出现死循环
5.只剩;结果会出现死循环
break 是中止整个循环
continue 跳过本循环 进行下一个循环
适用范围
break swith和if和循环(while do while for)
continue if 和循环 (while do while for)