JS
1、JavaScript 简介
JavaScript 是 Web 的编程语言。
JavaScript是一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。
JS的书写位置
<script>
1. // 这是JS的注释,属于单行注释。
2. /*
这是JS的注释,属于多行注释
可以换行
*/
3.这里面写的是JS代码
document.write("你好,世界");
</script>
<script>
第一种,书写的位置是在当前页面的script标签中
document.write("hello world");
</script>
第二种,书写的位置是外部的JS文件中
<script src="./1908.js"></script>
注意:如果一个script标签拥有了src属性,不论是否有src的属性值,该标签之间不能够
再书写JS代码
<script src="">
document.write("1908");
注:JavaScript 没有任何打印或者输出的函数。但是 可以通过不同的方式来输出数据:
使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。
2、变量
变量是用于存储信息的"容器"。
变量必须以字母开头
变量也能以 $ 和 _ 符号开头(不过我们不推荐这么做)
变量名称对大小写敏感(y 和 Y 是不同的变量)
变量名称不可以是关键字和保留字
推荐使用驼峰命名法 (驼峰命名法:首字母小写,之后的每一个单词的首字母大写 var snakeAndGameAnd = “”;)
变量的定义
我们通常使用var来定义变量
var name;变量声明之后,该变量是空的(它没有值)。
赋值变量,需要使用 =
name = “value”
也可以对变量直接进行赋值
var name = "value";
3、数据类型
编程语言所操作的一切,都是数据。
// 在JS中,数据一共有6种类型。 可以划分为两大类:值类型(基本数据类型、原始值)、 引用类型(会在数组和对象的时候讲解)
// 值类型(基本类型、原始值):string(字符串)、 number(数值)、 boolean(布尔值)、 undefined(undefined)、 null(null)
// 引用类型:object
var str = "你好,世界";
var num = 10;
var bool = false;
var und; 声明变量,没有准确的值
var nul = null;
// 判定不同的数据类型
console.log(typeof(str));
console.log(typeof(num));
console.log(typeof(bool));
console.log(typeof und);
console.log(typeof null); // object
// 判定的方式有两种: typeof 变量 typeof(变量)
数据类型间的转换
字符串转为数字
**// 方式1: parseInt()**
// 该方法用于将字符串转为数字 第一个参数是被转换的字符串
// 转换规则:1 忽略字符串开头的空格
// 2 能转几个数字就转换几个数字
// 3 一旦开始转换之后,遇见的第一个非数字字符就停止
// 4 如果第一个就是非数字字符 则立刻停止并返回NaN
var str = " 123";
var str1 = " 123df";
var str2 = "ddd";
var str3 = "d1111";
var str4 = " 12 3.456";
console.log(parseInt(str)); // 123
console.log(parseInt(str1)); // 123
console.log(parseInt(str2)); // NaN: Not a Number
console.log(parseInt(str3)); // NaN
console.log(parseInt(str4)); // 12
**// 方式2: parseFloat()**
// 转换规则:1 忽略字符串开头的空格
// 2 能转几个数字就转换几个数字
// 3 一旦开始转换之后,遇见的第一个非小数点数字字符就停止
// 4 如果第一个就是非数字字符 则立刻停止并返回NaN
var str5 = " 123.4sd56.789";
console.log(parseFloat(str));// 123
console.log(parseFloat(str1));// 123
console.log(parseFloat(str2));// NaN
console.log(parseFloat(str3));// NaN
console.log(parseFloat(str4));//12
console.log(parseFloat(str5));//123.4
**// 方式3: Number()**
// 转换规则: 能够全部转为数字的才能转换成功 只要有任何一个非数字字符 就转换失败 返回NaN 忽略开头和结尾的空白
console.log(Number(str))//123
console.log(Number(str1))// NaN
console.log(Number(str2))// NaN
console.log(Number(str3))// NaN
console.log(Number(str4))// NaN
console.log(Number(str5))// NaN
**// 方式4: +**
// 转换规则: 等同于Number
console.log(+str); //123
console.log(+str1);// NaN
console.log(+str2);// NaN
console.log(+str3);// NaN
console.log(+str4);// NaN
console.log(+str5);// NaN
数字转为字符串
// 定义数字
var num = 123;
// 方式1: String()
console.log(String(num));
// 方式2: toString()
console.log(num.toString());
// 方式3: 数字 + ""
console.log(num + "");
/* +运算符的规则: 如果它两侧有任何一个运算数是字符串,
则会对另外一侧默认调用toString方法 */
// 方式4: toFixed
console.log(num.toFixed(2));
4、运算符
JS中的运算符:数学运算符、赋值运算符、逻辑运算符、比较运算符(关系运算符)、三元运算符、位运算符。
数学运算符: + - * / %
var a = 10;
console.log(a + 1);
console.log(a);
a = a + 1;
console.log(a);
// a = a + 1; 这条代码可以简写成: a += 1;
var b = 12;
b -= 11; // 减法也可以简写
console.log(b);
var c = 13;
c *= c;
console.log(c);
var d = 14;
d /= 2;
console.log(d);
var f = 100;
f %= d;
console.log(f);
// 加法运算条件:两侧必须是数字
比较运算符
比较运算符就是用于比较两者的关系
> < >= <= == != === !==
比较运算符返回一个布尔值作为结果
注: == 是相等的意思 不比较数据类型 === 是全等的意思 比较数据类型
var a = 10;
var b = 11;
console.log(a > b); // false
console.log(a < b); // true
console.log(a >= b); // false
console.log(a <= b); // true
console.log(a == b); // false
console.log(a != b); // true
console.log(a === b); // false
console.log(a !== b); // true
如果比较的是字符串 则实际比较的是每一个字符的unicode编码数字
当字符串的长度是多个时,则两两比较,知道分出大小
var a = “10”;
var b = 10;
console.log(a == b); // true
console.log(a === b); // false
逻辑运算符
// 逻辑运算符有三个: && 逻辑与 || 逻辑或 ! 逻辑非
console.log(true && true); // 真
console.log(true && false); // 假
console.log(false && false); // 假
// 逻辑与:有假就假 都真才真
console.log(true || true); // 真
console.log(false || true); // 真
console.log(true || false); // 真
console.log(false || false); // 假
// 逻辑或: 有真就真 都假才假
// 逻辑非的含义就是取反: 真的变假的 假的变真的
console.log(!true); // 假
console.log(!false); // 真
// 在JS中,能够表示假的数据:0 “” NaN undefined null false 其余的都为真
console.log(!0); // 真
逻辑运算符
// i++ i-- 中的++ – 就是自增自减运算符
var a = “10”;
// a++; // 等价于 a = a + 1; a += 1;
// console.log(a); // 11
console.log(a++); // 因为 ++ 在变量的后面 所以先使用a的值 再+1
console.log(++a); // 因为 ++ 在变量的前面 所以先+1 再使用a的值
// 如果变量的值是字符串,则会先向数字进行转换 再进行++ --的操作
5、弹出框
// 浏览器自带了一些提示框 alert() prompt() confirm()
console.log(1);
// alert(“你好,我是警告框”);
// var result = prompt(“输入点内容”);
// console.log(“用户输入的是” + result);
var result = confirm(“此网页需要您的位置权限,是否同意?”);
console.log(result);
console.log(2);
// 注:这三个方法都会阻塞线程
// 注: JavaScript是一个单线程的语言。
// 注:这三个方法都是BOM的内容。