一、如何创建含有JS代码的HTML页面
在HTML代码中声明JS代码的三种方式
1.行内式。忽略不计，讲JS代码放在HTML元素的内部，非常影响美观和可读性。
2.嵌入式 （重点掌握）
3.外链式 （重点掌握）
嵌入式详解：
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
204
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
