JS主要的特点:简单、安全、动态、跨平台
JS的使用
JavaScript代码可以直接写在HTML页面中,只需使用script首尾标签嵌套即可。语句放在head或body首尾标签中均可。 JS脚本插入在主体时,JavaScript语句能够被立即执行。也可以定义成函数,但必须引用才能执行。
内部引用:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>内部JavaScript的简单应用</title>
</head>
<body>
<h3>内部JavaScript的简单应用</h3>
<hr />
<script>
alert("Hello JavaScript!");
</script>
</body>
</html>
外部引用:
<script src="js/myFirstScript.js"></script>
JS语法
大小写是严格区分 每行有分号,没有分号在没有开启严格检查模式的情况下可以执行 注释和c++一样 代码块声明和java c++一样需要大括号
JS变量
var a;
const a=1;
let a;
首位字符必须是字母(A-Za-z)、下划线或者美元符号 其他位置上的字符可以是下划线、美元符号、数字(0-9)或字母(A-Za-z)
JS基本数据类型
JavaScript有五种原始类型分别是:Number(数字)、Boolean(布尔值)、String(字符串)、Null(空值)和Undefined(未定义)。 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210705171552524.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ2MTI2NTM3,size_16,color_FFFFFF,t_70) Number类型表示数字,其数字可以是32位以内的整数或64位以内的浮点数。 八进制的数需要用数字0开头 十六进制的数需要用数字0和字母x开头 浮点数可以使用toFixed()方法规定小数点后保留几位数。
var x = 3.1415926;
var result = x.toFixed(2);
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210705172642827.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ2MTI2NTM3,size_16,color_FFFFFF,t_70)
var x1 = 3e9000;
var x2 = 9e3000;
alert(x1==x2);
var x1 = 5 / 0;
var x2 = -5 / 0;
var x3 = 0 / 0;
var x = Number.POSITIVE_INFINITY;
var result = x + 99;
alert(result);
两个数值均为NaN,它们也并不相等。
var x = "red";
var result = Number(x);
isNaN(变量名称)
Boolean(0 || -0 || null || "" || false || undefined || NaN)=false;
对象类型
本地对象
数组: 无需在一开始声明数组的具体元素数量
var mobile = ["苹果", "三星", "华为"];
var x = mobile.length;
alert(mobile);
日期:
new Date();
new Date(dateString);
new Date(milliseconds);
new Date(year, month, day, hours, minutes, seconds, milliseconds);
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210705191400700.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ2MTI2NTM3,size_16,color_FFFFFF,t_70) 正则表达式 菜鸟教程-正则表达式
内置对象
宿主对象
BOM && DOM
类型转换
var x = true;
var result = x.toString();
var x1 = 99;
var x2 = 99.90;
var x3 = 1.25e8;
var result1 = x1.toString();
var result2 = x2.toString();
var result3 = x3.toString();
var x = 10;
var result1 = x.toString(2);
var result2 = x.toString(8);
var result3 = x.toString(16);
var x = null;
var result1 = String(x);
var result2 = x.toString();
var x = "123hello";
var result = parseInt(x);
var x = "hello";
var result = parseInt(x);
var x = "3.14";
var result = parseInt(x);
var x = "10";
var result1 = parseInt(x, 2);
var result2 = parseInt(x, 8);
var result3 = parseInt(x, 10);
var result4 = parseInt(x, 16);
var x = "010";
var result1 = parseInt(x);
var result2 = parseInt(x, 10);
var result3 = parseInt(x, 8);
var x = "hello3.14";
var result = parseFloat(x);
var x = "3.14hello";
var result = parseFloat(x);
var x = "3.14.15.926";
var result = parseFloat(x);
var x = "010";
var result1 = parseInt(x);
var result2 = parseFloat(x);
var x = "A";
var result1 = parseInt(x, 16);
var result2 = parseFloat(x);
var x = Number("2");
var y = Number("2.9");
var x = Number(true);
var y = Number(false);
var x = "2.12.13";
var result3 = Number(x);
var x1 = null;
var x2;
var result1 = Number(x1);
var result2 = Number(x2);
var student = new Object();
var result = Number(student);
JS运算
基础
var s = "Hello";
var x = 2016;
var result = s+x;
var s = "2015";
var x = 2016;
var result = s+x;
在进行逻辑运算之前,JavaScript中自带的抽象操作ToBoolean会将运算条件转换为逻辑值。 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210705195255428.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ2MTI2NTM3,size_16,color_FFFFFF,t_70)
- 当两个字符串进行比大小时,是按照从左往右的顺序依次比较相同位置上的字符,如果字符完全一样则继续比较下一个。
- 如果两个字符串在相同位置上都是数字则仍然按照数学上的大小进行比较。
- 大写字母的代码小于小写字母的代码。
- 如果大小写相同,则按照字母表的顺序进行比较,字母越往后越大
var x1 = "9";
var x2 = "10";
var result = x1 > x2;
比较的数据存在其他数据类型(例如字符串、布尔值等),要先将运算符前后的内容尝试转换为数字再进行比较判断 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210705195701127.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ2MTI2NTM3,size_16,color_FFFFFF,t_70) ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210705195717362.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ2MTI2NTM3,size_16,color_FFFFFF,t_70)
for(x in object){
代码块
}
操作DOM对象
document.getElementById("id名称");
document.getElementsByTagName("标签名称");
document. getElementsByClassName("类名称");
document.write("Hello 2016");
var 变量名 = 元素对象.innerHTML;
元素对象.innerHTML = 新的内容;
var img = document.getElementById("image");
img.src = "image/newpic.jpg";
var img = document.getElementById("image");
img.setAttribute("src" ,"image/newpic.jpg");
元素对象.style.属性 = 新的值;
var test = document.getElementById("test");
test.style.backgroundColor = "blue";
JS事件
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210705201336862.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ2MTI2NTM3,size_16,color_FFFFFF,t_70) ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210705201400527.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ2MTI2NTM3,size_16,color_FFFFFF,t_70)
|