一 js基础
1-1. Javascript是什么
- JavaScript 是世界上最流行的语言之一，是一种运行在客户端的脚本语言 （Script 是脚本的意思）
- 脚本语言：不需要编译，运行过程中由 js 解释器( js 引擎）逐行来进行解释并执行
- 现在也可以基于 Node.js 技术进行服务器端编程 !
1-2.Javascript的作用
- 表单动态校验（密码强度检测） （ JS 产生最初的目的 ）
- 网页特效
- 服务端开发(Node.js)
- 桌面程序(Electron)
- App(Cordova)
- 控制硬件-物联网(Ruff)
- 游戏开发(cocos2d-js)
1-3.js与html/css 有什么关系
- html是页面的骨架
- css主要是样式修饰页面
- js是进行交互的，实现业务逻辑和页面控制
1-4.Javascript组成？
- javascript: ECMA标准、DOM、BOM
- ECMA是来定义了javascript的基础语法
- DOM 文本文档对象模型
- BOM 浏览器窗口模型
二 Javascript学习
2-1.输出方式
- alert()
- prompt()
- console.log() --需要打开控制台查看输出结果
2-2.引入方式
- 行内式
<button onclick="alert('helloworld!!')">点击</button>
- 嵌入式
<script>
// 写js代码
alert("helloworld!!!")
</script>
- 外部引入
//先在文件夹里创建一个js文件，后缀为.js
<script src="./test.js"></script>
2-3.变量
- 变量是用来存储数据的容器。我们可以通过变量名称获取数据修改数据！！！
- 变量的声明 var是关键词, variable
var age;
// 变量的赋值
age = 10;
// 变量的初始化
var age = 10;
// 后台输出变量值
console.log(age)
2-4.变量的命名
- 由字符、数字、下划线、美元符号组成
- 不能以数字开头
- 不能是关键字、保留字
- 严格区分大小写
- 变量的定义最好有一定的意义
- 建议使用驼峰命名法进行命名
<script>
var age = 10;
//这两个不同，区分大小写
var Age = 20;
// var var = 20;不能使用关键字命名！！！
var myTest = 10;//驼峰命名法，一般后面的单词首字母大写
alert(myTest)
</script>
2-5.数据类型
<script>
var age = 20; // 20是数字类型
var name = "名字"; // 是字符串类型，需要用“”
</script>
- 数字类型
<script>
var num1 = 10;
var num2 = 20;
var num3 = 0xa;
// 进制之间的转换
// 数字的范围
// var num4 = ; 最大不能超过9007199254740992
// isNaN == 判断是否不是一个数字
console.log(isNaN(num1)) // 打印出来false（错误） isNot a Number
</script>
- 字符串类型
<script>
// 1.在定义字符串时，单引号和双引号都是可以的！！！
var string1 = "中国加油";
var string2 = "武汉加油";
var string3 = '你好世界';
//在遇到 ""里面有 ''或者 "" 的时候需要用到转义字符
// 2.字符串的转义字符
// \n == 换行
// \\ 代表一个反斜线字符''\'
// \" 代表一个双引号字符
// \'代表一个单引号（撇号）字符
// \t tab 空格
// \b
// var string4 = "这是一个'激动人心'的时刻"
var string4 = "这是一个\"激动人心\"的时刻"
// 显示结果 这是一个激动人心的时刻
var string5 = "锄禾日当午，\n汗滴禾下土"
<!--显示结果 锄禾日当午，-->
<!-- 汗滴禾下土-->
// 3.字符串的长度
var string6 = "1234567890!"
console.log(string6.length)
// 4.字符串拼接
var string7 = "锄禾日当午";
var string8 = "汗滴禾下土";
console.log(string7+string8)
// 显示结果 锄禾日当午汗滴禾下土
</script>
- 布尔值类型
<script>
// 布尔值类型 true 和false
// true 真 false 假
// 布尔值和数字相加时 true = 1 ， false = 0;
</script>
- 其他数据类型
<script>
// undefined 没有被定义的意思，这种一种数据类型！！！
var name;
console.log("你好" + name)
// null也是一种数据类型！！！
var age = null;
console.log(111 + age)
// 当数字和字符串进行拼接时，会将数字自动转换成字符串！！！
console.log(111 + "您好")
// 当字符串数字和数字想减时，就会自动将字符串数字转换成数字！！！
console.log("110" - 9);
// NaN == not a number 非数字值的特殊值。该属性用于指示某个值不是数字。
console.log("你好" - 10);
</script>
2-6.检测变量的数据类型
<script>
var str = "中国加油";
var a;
var b = null;
// typeof 使用方法 typeof 变量名称
console.log(typeof str) //string
console.log(typeof 110) // number
console.log(typeof true) // boolean
console.log(typeof a) // undefined
console.log(typeof null) // object
</script>
转换数据类型
- 转换成字符串类型
<script>
// string number boolean object undefined
var num = 10;
//隐式转换
console.log("您的数字为:" + num);
// 显式转换
var num = 10;
// .toString() String()
console.log(num.toString())
console.log(String(num))
</script>
2-7.字面量
- var a = 10 ;
- console.log(18);
- 以上10 和 18 都属于字面量
三 Javascript中运算符
3-1.算数运算符
<script>
// 加减乘除 + - * /
console.log(1 + 1);
console.log(1 - 1);
console.log(1 * 1);
console.log(1 / 1);
// % 取余
console.log(4 % 2); // 0
console.log(5 % 2); // 1
console.log(3 % 5); // 3
// 浮点数 float
// 非常重要的面试题！！！
console.log(0.1 + 0.2); //输出显示 0.30000000000000004
// 在编程语言里面进行计算，是要先将0.1 二进制 0.2 二进制
// 二进制 + 二进制 = 二进制 => 十进制！！！
var num1 = 0.1;
var num2 = 0.2;
var str1 = num1.toString(2)
// console.log(str1) // 0.0001100110011001100110011001100110011001100110011001101
var str2 = num2.toString(2);
// console.log(str2) // 0.001100110011001100110011001100110011001100110011001101
// 在javascript中最大值的存储位数为53位,
// 需要将多余的位数进行截取，截取之后才能进行二进制相加
// 溢出！！！
// 0.30000000000000004
console.log(str1.length)//57位
console.log(str2.length)//56位
</script>
- 递增递减运算符++ --
<script>
// 递增
var age1 = 1;
age1++; // age1 = age1 + 1;
console.log(age1) //输出 2
var age2 = 1;
++age2;
console.log(age2) // 2
// 递减
var age3 = 1;
age3--; // age3 = age3 - 1;
console.log(age3) // 0
var age3 = 1;
--age3;
console.log(age3) // 0
</script>
- ++age和age++的区别
<script>
var num = 10;
var num = num++;
// var num2 = num++; // num++ ，会先进行赋值，然后进行 ++
// 区别就是 ++num， 先进行计算++，然后再赋值。num++，先赋值再进行++
console.log(num1) // 10
console.log(num2) // 11
var age = 10;
console.log(age++ + 10); // 20 . 先进行 10 + 10; 然后再计算age++ = 11
// console.log(++age + 10); // 21 . 先进行++age = 11; 然后再计++age + 10 = 21
console.log(age) // 11
</script>
3-2.表达式
- 比如var num = 1+1; console.log(1+1)等诸如此类的带有运算符的表达式。
3-3.比较运算符
<script>
console.log(3 >= 5); // 输出布尔值false
console.log(10 >= 5); // 输出布尔值true
// >=（大于等于） <=（小于等于） >（大于） <（小于） ==（等于） !=(不等于)
===（三个等于号，不仅要判断数值，而且要判断数据类型！！！）
!==（先比较===， 再加上！比较）
console.log(3 == 5); // false
console.log("张三" == "李四")// false
console.log(18 == 18); //true
console.log(18 == "18")// true 前面是一个数字，后面是字符串！！！
console.log(15 != 18)// false
// === 三个等于号，不仅要判断数值，而且要判断数据类型！！！
console.log(18 === "18") // false
console.log(18 !== "18") // 18 === "18"(!false)=>true
</script>
3-4.逻辑运算符
- 逻辑运算符
// && || !
// 1.&& 并且 and
// 如果想要整体打印出true，&& 两边都要为true，如果有一边为false，那么打印出来就是false
console.log(5 > 3 && 10 > 5) // true
console.log(3 < 5 && 3 > 2); // true
// 2. || 或者 or , 如果想要整体打印出true，|| 两边只要有一个为true就打印true，如果两个都为false，
// false
console.log(3 > 5 || 3 > 6); //false
console.log(3 > 5 || 3 < 10); // true
// 3. ! 非 not
console.log(!(3 > 5));
- 逻辑运算符中断
// 1.true && false
// 2. 数字 && 数字 数字 && 字符串
// 3. 数字 || 数字
// 1）逻辑与的短路运算
//如果表达式1结果为真，则返回表达式2
// 如果表达式1结果为假，则返回表达式1
console.log(110 && 120); // 120
console.log(0 && 456); // 0
console.log(0 && 1 + 2 && 456 * 56789); // 0
// 2）逻辑或的短路运算
// 如果表达式1为真，则直接返回表达式1
// 如果表达式1为假，则返回表达式2
console.log(123 || 456)//123
console.log(123 || 456 || 456 + 789)//123
console.log(0 || 456 || 456 + 789); //456
</script>
3-5.赋值运算符
<script>
var num = 10;
num += 2; // num = num + 2;
num -= 2; // num = num - 2;
num *= 2; // num = num * 2;
num /= 2; // num = num / 2;
num %= 2; // num = num % 2;
</script>
3-6.运算符的优先级
// 算术运算符 、 比较运算、逻辑、赋值
// 1 -- 括号()
// 2.一元运算符 ++ -- !
// 3.算术运算符 + - * /
// 4.关系运算符 > < =
// 5.相等运算符 == != === !==
// 6.逻辑运算符 && || 先 && 后 ||
// 7.赋值 =
// false true true true
console.log(4 >= 6 || '张三' != '李四' && !(12 * 2 == 144) && true)// true
</script>
3-7.按位运算符
<script>
// 1.左移 右移
// 2.& |
var num1 = 1;
// << 左移两位
var num2 = num1 << 2;
var num3 = num2 >> 1;
console.log(num2)
console.log(num3)
var num4 = 10;
// 00001010
var num5 = 20;
// 00010100
// 00011110
// & 的意思就是如果都为1则为1，如果有一个不为1，则为0
var num6 = num4 | num5;
console.log(num6)//30
</script>
3-8.if判断语句
- if else
<script>
var age = prompt("请输入您的年龄:");
//先判断if（条件）里面的条件
//是则输出"成年了！"
//否则输出"未成年！"
if(age >= 18) {
console.log("成年了！")
}else{
console.log("未成年！")
}
</script>
else if
<script>
//符合那个条件就会输出哪个
if(条件表达式1) {
console.log()
}else if(条件表达式2) {
console.log("")
}else if(条件表达式3) {
console.log("...")
}else {
//
}
- switch分支
<script>
// if （else if） else
// switch 语法不一样，执行性能更高
var str = prompt("");
// str和case 后面的数值不仅要一样，而且类型也要一样！！！
switch (str) {
case "苹果":
console.log("苹果7块一斤！！")
// break 断开！！！ 每一个分支都要加上break！！！！！！！！！！！！！
break;
case "香蕉":
console.log("香蕉10块钱一斤！！！")
break;
case "口罩":
console.log("口罩7块一个！！！！");
break;
case '10':
console.log("这是一个数字");
break;
default:
console.log("没有匹配到任何一个结果")
break;
}
</script>
3-9.三元运算符
<script>
// 语法结构
// 表达式1 ? 表达式2: 表达式3
// 表达式1如果为true, 则返回表达式2,否则返回表达式3
var num = 10;
var num2 = num >= 20 ? 10: num;
console.log(num2)//10
</script>
