一、如何创建含有JS代码的HTML页面
在HTML代码中声明JS代码的三种方式
1.行内式。忽略不计，讲JS代码放在HTML元素的内部，非常影响美观和可读性。
嵌入式
外链式
嵌入式详解：
1.将JS代码放在 “script标签内部即可”
2.再将script标签放在body标签的最底部(推荐做法)
外链式详解：
1.创建一个单独的js文件，一般将文件命名为 xxx.js
2.在这个js文件直接写JS代码，无需再写script标签了
3.在相对于的HTML代码中 引入这个外部JS，语法如下：
只需要在script标签中通过src属性引入外部js的路径即可。
注意事项：如果这个标签式外链式的标签，标签内部不能再写js代码了
如果JS的代码非常非常多，就推荐使用外链式，反之使用嵌入式。 行内式狗都不用。
二、异步加载的说明
由于HTML在浏览器的解析顺序式从上到下。
那么如果将大量的JS代码放在body上方，就会导致
浏览器再解析HTML网页的时候，将时间先花在加载JS代码上，
就会导致网页一片空白。
所以推荐将JS代码放在BODY下方。让浏览器先加载页面的内容，再加载JS代码。
那么这样子也有弊端。如果说很多内容都和JS挂钩。
所以就衍生出了异步加载JS代码：浏览器加载JS的同时不会影响HTML加载。
为了减小JavaScript阻塞问题对页面造成的影响，
可以使用HTML5为<script>标签新增的两个可选属性async和defer实现异步加载。
所谓异步加载，指的是浏览器在执行加载JavaScript文件时不阻塞页面的加载和渲染。
该知识点仅做了解。
原因1：浏览器和计算机的执行速度已经非常快了，人的肉眼区分不了一丢丢时间差异带来的视觉效果。
原因2：即使退一万步讲，真的影响到了，使用上述方法也无法得到有效解决。
我们常见的处理方式：生成一个加载页面，提示用户“正在加载中…”。
三、js的最基本的代码
第一行JS代码:alert("xxx").仅仅用于弹窗.起到一个警告作用
alert("密码错误!!");
第二行JS代码:prompt("xxx").弹出一个让用户可以输入的询问窗口
注意,这个方法可以获取到用户输入的值.如何获取将在今天的第二节课进行讲解.
prompt("请输入你的账号");
第三行JS代码:confirm("xxx").弹出一个询问框,用户可以选择确定或取消
注意,这个方法可以获取到用户选择的值.如何获取将在今天的第二节课进行讲解.
confirm("你确定要退出系统吗？");
第四行代码:console.log("xxx").主要用于将进行打印在控制台,方便程序员进行调试和BUG的检查
通过F12可以开启浏览器的调试模式,点击console看到控制台信息.
console.log("进入控制台");
第五行代码:document.write("xxx").用于将内容输出到html页面中
document.write("你好啊");
四、js中的变量讲解
什么是变量：经常改变的量。
变量是程序在内存中申请的一块用来存放数据的空间。
变量由变量名和变量值组成，通过变量名可以访问变量的值。
回顾：Java的变量名的命名规则：
1.不能以数字开头
2.不能使用关键字（Java或JavaScript中自带的相关属性或方法。）
3.严格区分大小写
4.只能够由 数字 字母 下划线 $ 符号组成
5.见名知意 例如age name 而不是 a b c d
6.推荐使用驼峰命名法，例如studentName
正课：JS的变量名的命名规则，和Java完全一致。
下面哪个变量名式合法的。
number 合法、
88shout 不合法，数字开头
myScore 合法
&num 不合法
var 不合法 关键字
it123 合法 但是不推荐
$tuition 合法
常见的关键字：
if else switch for class
do while case break contiue
return default new var void
预留关键字：现在还没有自带，但是未来有，已经提前预留了。
implements package public interface
五、js如何声明变量
1.先声明再赋值
例如:
var num ;
num = 10;
2.声明的同时也赋值
例如:
var age = 20;
六、交换两个变量值的案例
案例需要:自定义2个变量,要求让他们两个变量进行互换
//幻想成现实生活:张三和李四都拿了一个箱子,并且不能放在地上
//需要完成箱子的交换.
//做法:喊第三个人帮忙.把张三的箱子给第三个人,然后张三拿李四的箱子.,李四就拿第三个人箱子.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
var a1 = 100;
var a2 = "张三";
var a3 = a1;
a1 = a2;
a2 = a3;
console.log(a1);
console.log(a2);
</script>
</body>
</html>七、javascript中的数据类型
javascript中的数据类型分类:
A.基本数据类型
B.引用数据类型
JavaScript的基本数据类型：
number 注意：number是数据类型但不是关键字
string 注意：string在java是引用，在JS是基本
boolean
null
undefined
bigint
symbol
JavaScript的引用数据类型：
数组 Object 函数(方法) 等等
八、boolean和number和string讲解
boolean读布尔
//js的boolean和java的boolean完全一致
//体现在:都是基本数据类型 都只有true和false
//意义:用程序表示一件事成功或者失败，或表示一个条件成立或不成立。
//JavaScript中严格区分大小写，因此true和false值只有全部为小写时才表示布尔型。
//js中的number（读数值类型）讲解
//一句话总结:即可以存放小数,也可以存储整数
// var a = 123;
// var b = 12.5;
//a和b都是number类型.没有加引号
//js中的string（读字符类型）讲解
//这里要注意:
//js的String和java的String不同之处1:
// string在java是引用，在JS是基本
//js的String和java的String不同之处2:
// string在java中通过双引号声明
// string在js 中既可以通过双引号也可以通过单引号声明
//例如:
var str1 = "你好";
var str2 = '我好';
//以上都是string的写法
九、转义符的使用
我想在页面输出: 你好,我的外号是"大聪明";
// document.write("你好,我的外号是"大聪明";");写法是错误的.不能同时存在多个双引号
//做法1:我们需要知道 单引号里面可以包着双引号
// document.write('你好,我的外号是"大聪明";');
//做法2:通过转义符-- 反斜杠(enter上面的)：\ 斜杠：/ (shift左边的)
document.write("你好,我的外号是\"大聪明\";");
十、常见的转义符
十一、null和undefined数据类型解析
null 表示空的意思 例如:
var str = null;
null的注意事项:没有任何属性或方法可言
undefined 表示未定义的意思 只声明了变量但是未赋值 例如:
var str123 ;//这个str123就是undefined
十二、bigint和symbol讲解
bigint 翻译:大数值
//如果存在需求需要计算很大很大(不用去记，因为很大。)数字,那么number将无法实现
//例如:下面的number绰绰有余
// var num1 = 1111111;
// var num2 = 2222222;
// console.log(num1+num2);
// var num1 = 11111111111111111111;//number
// var num2 = 11111111111111111111;//number
// console.log(num1+num2);//计算结果出现了误差
//所以就需要借助于bigint
bigint类声明方法:
// var num3 = 1111111111111111111n;//只需要在最后加n即可
// var num4 = 1111111111111111111n;//只需要在最后加n即可
// console.log(num3+num4);symbol讲解:略 常用于独一无二的对象.
十三、数据类型检查
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
var num = 11;//number
var str = "11";//string类型
console.log(num);
console.log(str);
//以上写法:是我们可以看到的.所以可以知道是什么类型.
//但是缺点1:不方便在控制台得知是什么类型
//例如我们第一章节学习的prompt语法
// var money = prompt("请输入你的金额");//通过money变量接受用户在前台输入的值
// console.log(money);//所需我们就要学习如何识别xx变量是什么类型
//总结:prompt的返回值都是string
//如何判断一个变量是什么类型
//语法: typeof xxx 返回是一个数据类型
var str = 123;
console.log( typeof str);//number
str = "123";
console.log( typeof str);//string
</script>
</body>
</html>十四、掌握数据类型转换
为什么要学习数据类型转换？见一下例题:
// var num1 = prompt("请输入第一个数");
// var num2 = prompt("请输入第二个数");
// alert("两数之和为" + (num1 + num2));//这种写法是错误的
//原因:prompt返回的是一个string类型,两个string类型相加,是以拼接的形式
如何将字符串转成number类型.
//js提供了下面三个方法,各有区别,都要掌握
// parseInt()
// parseFloat()
// Number()
parseInt 将一个字符串类型的数字解析成整数
// alert( parseInt("11.12") );//11
// alert( parseInt("11.99") );//11 总结1小数后面直接省略,不会四舍五入
// alert( parseInt("11.a12") );//11 总结2小数后面直接省略
// alert( parseInt("11a.a12") );//11 总结3:解析顺序从左到右,解析到非数字就停止.
// alert( parseInt("1a1a.a12") );//1 总结4:只需要记住总结3
// alert( parseInt("a11a.a12") );//NaN NAN 翻译: not a numnber 不是一个数字
parseFloat()和上面的语法完全一致,唯一区别保留小数
// console.log( parseFloat("11.11") );//11.11
// console.log( parseFloat("11.11a") );//11.11
// console.log( parseFloat("11.1a1a") );//11.1
// console.log( parseFloat("11a.11") );//11
// console.log( parseFloat("a11.11") );//NAN
// console.log( parseFloat("11.a") );//11
Number()只能将真正的数字解析
// console.log( Number("11.11") );//11.11
// console.log( Number("11") );//11
// console.log( Number("11") );//NAN
