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 />
  <!--JavaScript代码部分-->
  <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（未定义）。
在这里插入图片描述
Number类型表示数字，其数字可以是32位以内的整数或64位以内的浮点数。
八进制的数需要用数字0开头
十六进制的数需要用数字0和字母x开头
浮点数可以使用toFixed()方法规定小数点后保留几位数。

var x = 3.1415926;
var result = x.toFixed(2); //返回值为3.14

在这里插入图片描述

//Infinity的两个数认为相等
var x1 = 3e9000;
var x2 = 9e3000;
alert(x1==x2);//判断变量x1与x2是否相等，返回值为true

var x1 = 5 / 0; //返回值是Infinity
var x2 = -5 / 0; //返回值是-Infinity
var x3 = 0 / 0; //返回值是NaN

//Infinity不可以与其他正常显示的数字进行数学计算，返回结果均会是NaN
var x = Number.POSITIVE_INFINITY;
var result = x + 99;
alert(result); //返回值为Infinity

两个数值均为NaN，它们也并不相等。

var x = "red";
var result = Number(x); //返回值为NaN，因为没有对应的数值可以转换

//正确转换为Number类型时返回真（true），其他情况返回假（false）
isNaN(变量名称)

Boolean(0 || -0 || null || "" || false || undefined || NaN)=false;

对象类型

本地对象

数组：
无需在一开始声明数组的具体元素数量

var mobile = ["苹果", "三星", "华为"];
var x = mobile.length; //这里x值为3
alert(mobile); //打印出数组元素

日期：

//表示获取当前的日期与时间
new Date();
//使用表示日期时间的字符串定义时间，例如填入 May 10, 2000 12:12:00
new Date(dateString); 
//使用从1970年1月1日到指定日期的毫秒数定义时间，例如填入1232345
new Date(milliseconds);
//自定义年、月、日、时、分、秒和毫秒，时分秒和毫秒参数缺省情况默认为0
new Date(year, month, day, hours, minutes, seconds, milliseconds);

在这里插入图片描述
正则表达式
菜鸟教程-正则表达式

内置对象

宿主对象

BOM && DOM

类型转换

//布尔值类型（Boolean）和数字类型（Number）这两种基本数据类型均可使用toString()方法
//把值转换为字符串形式
var x = true;
var result = x.toString(); //返回"true"

//toString()不带参数直接使用，此时无论是整数、小数或者科学计数法表示的内容，都会显示为十进制的数值
var x1 = 99;
var x2 = 99.90;
var x3 = 1.25e8;
 
var result1 = x1.toString(); //返回值为"99"
var result2 = x2.toString(); //返回值为"99.9"
var result3 = x3.toString(); //返回值为"125000000"

var x = 10;
var result1 = x.toString(2); //声明将原始数据转换成二进制数，返回值为"1010"
var result2 = x.toString(8); //声明将原始数据转换成八进制数，返回值为"12"
var result3 = x.toString(16); //声明将原始数据转换成十六进制数，返回值为"A"

var x = null;
var result1 = String(x); //返回值为字符串"null"
var result2 = x.toString(); //发生错误，无返回值

var x = "123hello";
var result = parseInt(x); //返回值是123，因为h不是有效数字，则停止检查

var x = "hello";
var result = parseInt(x); //返回值是NaN，因为第一个字符h就不是有效数字，直接停止检查

var x = "3.14";
var result = parseInt(x); //返回值是3，因为小数点不是有效数字，则停止检查

var x = "10";
var result1 = parseInt(x, 2); //表示原始数据为二进制，返回值为2
var result2 = parseInt(x, 8); //表示原始数据为八进制，返回值为8
var result3 = parseInt(x, 10); //表示原始数据为十进制，返回值为10
var result4 = parseInt(x, 16); //表示原始数据为十六进制，返回值为16

var x = "010";
var result1 = parseInt(x); //表示原始数据为八进制，返回值为8
var result2 = parseInt(x, 10); //表示原始数据为十进制，返回值为10
var result3 = parseInt(x, 8); //表示原始数据为八进制，返回值为8

var x = "hello3.14";
var result = parseFloat(x); //返回值是NaN，因为第一个字符h就不是有效数字，则停止检查

var x = "3.14hello";
var result = parseFloat(x); //返回值是3.14，因为h不是有效数字，则停止检查

var x = "3.14.15.926";
var result = parseFloat(x); //返回值是3.14，因为第二个小数点不是有效数字，则停止检查

var x = "010";
var result1 = parseInt(x); //默认为是八进制数，返回值为8
var result2 = parseFloat(x); //默认为是十进制数，返回值为10

var x = "A";
var result1 = parseInt(x, 16); //parseInt()允许十六进制数，返回值为10
var result2 = parseFloat(x); //parseFloat()不允许十六进制数，返回值为NaN

var x = Number("2"); //返回值为整数2
var y = Number("2.9"); //返回值为浮点数2.9

var x = Number(true); //返回值为整数1
var y = Number(false); //返回值为整数0

var x = "2.12.13"; 
var result3 = Number(x); //返回值为NaN

var x1 = null; //null值
var x2; //undefined值
var result1 = Number(x1); //返回整数0
var result2 = Number(x2); //返回NaN

var student = new Object();
var result = Number(student); //返回NaN

JS运算

基础

var s = "Hello";
var x = 2016;
var result = s+x;//结果会是Hello2016

var s = "2015";
var x = 2016;
var result = s+x;//结果会是20152016，而不是两个数字相加的和

在进行逻辑运算之前，JavaScript中自带的抽象操作ToBoolean会将运算条件转换为逻辑值。
在这里插入图片描述

当两个字符串进行比大小时，是按照从左往右的顺序依次比较相同位置上的字符，如果字符完全一样则继续比较下一个。
如果两个字符串在相同位置上都是数字则仍然按照数学上的大小进行比较。
大写字母的代码小于小写字母的代码。
如果大小写相同，则按照字母表的顺序进行比较，字母越往后越大

var x1 = "9";
var x2 = "10";
var result = x1 > x2; // 返回true

比较的数据存在其他数据类型（例如字符串、布尔值等），要先将运算符前后的内容尝试转换为数字再进行比较判断
在这里插入图片描述

//其中x是变量，每次循环将按照顺序获取对象中的一个属性或方法名；object指的是被遍历的对象。
for(x in object){
    代码块
}

操作DOM对象

document.getElementById("id名称");
document.getElementsByTagName("标签名称");
document. getElementsByClassName("类名称");

document.write("Hello 2016"); //换行符\n在这里是无效的,需要输出换行直接使用HTML换行标签<br>

//innerHTML属性获取或更改的元素内容可以包括HTML标签本身
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";