一.JS编写的位置
- 位置一：HTML代码行内（不推荐）
- image-20210510164843552
- 位置二：script标签中
- image-20210510164853197
- 位置三：单独的script文件
- image-20210510164902851
<body>
<!--
JS的编写位置
1.HTML代码里
2.script标签里
3.单独的JS文件里
-->
<div>div元素</div>
<!-- <a href="" onclick="alert('我是一个弹窗')">点我</a>
<a href="javascript:alert('我也是弹窗')">点我</a> -->
</body>
<script>
document.write('js文件');
</script>
<script src="./js/index.js"></script>
1.1 注意点
- script标签不能写成单标签：
- 在外联式引用js文件时，script标签中不可以写JavaScript代码，并且script标签不能写成单标签
- 即不能写成<script src="index.js"/>
- 省略type属性：
- 在以前的代码中，<script>标签中会使用 type="text/javascript"。
- 现在可不写这个代码了，因为JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。
- 加载顺序：
- 作为HTML文档内容的一部分，JavaScript默认遵循HTML文档的加载顺序，即自上而下的加载顺序
- ==推荐将JavaScript代码和编写位置放在body子元素的最后一行==
- ==JavaScript代码严格区分大小写==
- HTML元素和CSS属性不区分大小写，但是在JavaScript中严格区分大小写
==加载顺序的案例==
1.JS代码放在body后
GIF 2021-5-10 17-07-45.gif
2.JS代码放在body前
image-20210510170930948
<title>JS的代码放的位置</title>
<style>
.div {
width: 100px;
height: 100px;
background-color: pink;
transition: width 1s linear 0s, height 1s linear, background-color 1s linear 0s;
}
</style>
<!-- <script>
var div = document.querySelector(".div");
div.onclick = function () {
div.style.width = 300 + "px";
div.style.height = 300 + "px";
div.style.backgroundColor = "red"
}
</script> -->
<body>
<div class="div">div元素</div>
</body>
<script>
var div = document.querySelector(".div");
div.onclick = function () {
div.style.width = 300 + "px";
div.style.height = 300 + "px";
div.style.backgroundColor = "red"
}
</script>
二.JS注释
- 单行注释：
- image-20210510171408330
- 多行注释：
- image-20210510171418715
- 文档注释
- image-20210510171428473
三.JS与浏览器的交互方式
- 方式一：弹出弹窗显示内容
- alert函数：接受一个参数
- image-20210510172651870
- 方式二：在控制台打印（使用最多）
- console.log(内容1, 内容2)
- image-20210510172717522
- 方式三：将内容输入到界面显示
- 通过document.write(写入的内容)
- image-20210510172754621
- 方式四：接收用户输入的内容：
- image-20210510172831684
四.定义变量
==变量：一小块存储数据的内存空间==变量在运行期间是可以改变的
Java是强类型语言，JavaScript是弱语言类型。
- 强类型：在开辟存储空间时，定义了空间将来存储的数据的数据类型。只能存储固定类型的数据。
- 弱类型：在开辟存储空间时，不定义将来存储的数据的数据类型，可以存放任意类型的数据。
4.1 定义变量的方式
在JavaScript中如何命名一个变量呢？
var 变量名称=变量赋值;
var 变量名；变量名=初始化值；
- 变量的声明：在JavaScript中声明一个变量使用var关键字（后续学习ES6还有let、const声明方式）
- 变量的赋值：使用=给变量进行赋值；
4.1.1 方式一：声明并赋值
var age = 12;
4.1.2 方式二：先声明，后赋值，
var name;
name = "jason";
4.1.3 方式三：声明多个变量
var a, b, c;
a = 10;
b = 5;
c = 8;
4.2 变量名规范：
4.2.1 变量命名规范：必须遵守
- 1.变量名只能以数字，字母，下划线和$组成，不能以数字开头
- 2.变量名不能以JavaScript 关键字组成{if,int ,true,do ........}
- 3.变量名区分大小写
4.2.2 变量命名规范：建议遵守
- 多个单词使用驼峰标识
- 赋值=两边都加上一个空格
- 一条语句结束后加上分号;
image-20210510221325888
五.基本数据类型
目前，我们先掌握JavaScript基本的数据类型：
- – 数值型(数字类型/数值类型)（Number）
- – 字符串型（String）
- – 布尔型（Boolean）
- – 空类型（Null）
- – 未定义型（Undefined）
5.1 Number(数值型)
- Number类型也叫 数字类型或数值类型
- 数字的表示方法：十进制（掌握）、十六进制、二进制、八进制（了解）
- image-20210510231246351
- 数字表示的范围：
- ==最小值：Number.MIN_VALUE，这个值为： 5e-324==
- ==最大值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308==
- ==NaN，即非数值（Not a Number）是一个特殊的数值，JS中当对数值进行计算时没有结果返回，则返回NaN。==
- isNaN，用于判断是否不是一个数字。不是数字返回true，是数字返回false。
<script type="text/javascript">
/*
JS中的数值类型
1.整数型和浮点型都是Number类
2.JS中可以表示最大值
Number.MAX_VALUE 1.7976931348623157e+308
Number.MIN_VALUE 5e-324 大于零的最小值
3.如果数值大于最大值，则会返回
infinity 表示正无穷
-infinity 表示负无穷
3.1 如果使用typeof(infinity)会返回number
4. NaN 是一个特殊的数字，表示Not A Number,使用typeof检查一个NaN也会返回number
5.进制
5.1 16进制
0X10就是16
0X100就是256 16*16=256
5.2 8进制
0o10就是8
0o100就是64 8*8=64
5.3 2进制
0b10 就是2
0b100 就是4
*/
var num = 123;
console.log(num);
var num2 = Number.MAX_VALUE;
console.log(num2);
var num3 = Number.MIN_VALUE;
console.log(num3);
var num4 = Number.MAX_VALUE * Number.MAX_VALUE;
console.log(num4); //Infinity
console.log(typeof (num4)); //number
var num5 = NaN;
console.log(typeof (num5)); //number
var str1 = "hello";
var num6 = parseInt(str1);
console.log(num6); //NaN
console.log("-----------------------");
var num16 = 0X10;
console.log(num16); //16
var num8 = 0o100;
console.log(num8); //64
var num22 = 0b100;
console.log(num22); //4
</script>
5.2 String(字符串型)
-
字符串类型：****String
- 字符串类型，用于表示一段文字.
- 比如人的姓名：coderwhy。地址：广州市。简介：认真是一种可怕的力量。
字符串的表示可以使用单引号也可以使用双引号。
-
转义字符：掌握 ==\’ \” \t \n==四个的用法
-
转义字符 表示符号 ' 单引号 " 双引号 \ 反斜杠 \n 换行符 \r 回车符 \t 制表符 \b 退格符
-
获取字符串的长度：length属性
5.3 Boolean(布尔型)
- 布尔类型用于表示真假：
- 比如是否毕业. 是否有身份证. 是否购买车票. 是否成年人.
- 两个取值: true/false
5.4 Null(空值)
- Null类型也是只有一个值：null
- 通常当一个对象（Object类型）不再使用时，可以赋值为null
5.5.Undefined(未定义型)
- Undefined 类型只有一个值：undefined
- 在使用 var 声明变量但未对其加以初始化时，这个变量的值就是 undefined
- typeof对没有初始化和没有声明的变量都会返回undefined
- ==Null和Undefined的关系：==
- undefined值实际上是由null值衍生出来的，所以如果比较undefined和null是否相等，会返回true
- 但是转化成数字时，undefined为NaN，null为0
<script type="text/javascript">
/*
* Null（空值）类型的值只有一个，就是null
* null这个值专门用来表示一个为空的对象
* 使用typeof检查一个null值时，会返回object
*
* Undefined（未定义）类型的值只有一个，就undefind
* 当声明一个变量，但是并不给变量赋值时，它的值就是undefined
* 使用typeof检查一个undefined时也会返回undefined
*/
var a = null;
var b = undefined;
console.log(typeof a);//Object
console.log(typeof(b));//undefined;
var str;
console.log(str);//undefined;
</script>
六.打印数据类型
typeof:打印数据类型
七.栈空间和堆空间
内存的分类：栈空间和堆空间
image-20210510235352165
七.转换成数字类型
7.1 ==其它类型转换为数值类型==
7.1.1 Number(any)函数：将任意类型转成数字
1.字符串->数字
*1.1 如果是纯数字型字符串，会转换为数字*
*1.2 如果是不是数字型字符串，则会显示NaN*
*1.3 如果字符串是一个空串或者是一个全是空格的字符串，则转换为0*
*2.布尔->数字*
*2.1 true返回1；*
*2.2 false返回0；*
*3.null->数字：返回0*
*4.undifined->数字：返回NaN*
image-20210511181435903
/*
3.其它类型转换为数值
3.1 使用Number()函数
1.字符串->数字
1.1 如果是纯数字型字符串，会转换为数字
1.2 如果是不是数字型字符串，则会显示NaN
1.3 如果字符串是一个空串或者是一个全是空格的字符串，则转换为0
2.布尔->数字
2.1 true返回1；
2.2 false返回0；
3.null->数字：返回0
4.undifined->数字：返回NaN
3.2 使用专门的方式对付字符串
1.parseInt()和parseFloat()：
1.1 可以将一个字符串中的有效的整数内容去出来，然后转换为Number
1.2 如果对非String使用parseInt()或parseFloat()，它会先将其转换为String然后在操作
*/
var str = "abc";
var num1 = Number(str)
console.log(num1, typeof (num1)); //NaN number
var str2 = "123";
var num3 = Number(str3);
console.log(num3, typeof (num3)); //123 number
var str3 = "123abc";
var num4 = Number(str3);
console.log(num4, typeof (num4)); //NaN number
var str4 = '';
var num5 = Number(str4);
console.log(num5, typeof (num5)); //0 number
var bool = true;
var num2 = Number(bool);
console.log(num2, typeof (num2)); //1 number
var strNull = null;
var num6 = Number(strNull);
console.log(num6, typeof (num6)); //0 number
var strUndefined = undefined;
var num7 = Number(strUndefined);
console.log(num7, typeof (num7)); //NaN number
</script>
7.1.2 parseInt(string, radix)函数：将字符串转换成整数类型，radix表示基数，这里可以理解成进制
- 如果第一个字符是数字或运算符号，那么就开始解析，直到遇到非数字字符，停止解析并得到解析结果；
- 如果第一个字符是非数字且非运算符号，则不解析并得到结果 NaN。
image-20210511181614173
<script>
/*
使用专门的方式对付字符串:如果对非String使用parseInt()或parseFloat()，它会先将其转换为String然后在操作
1.parseInt(string, radix)：
1.1 可以将一个字符串中的有效的整数内容去出来，然后转换为Number
1.2 可以进行进制转换
2.parseFloat(string)
*/
console.log(parseInt('123')); //123
console.log(parseInt('123,1233')); //123
console.log(parseInt('123a')); //123
console.log(parseInt('a123')); //NaN
console.log(parseInt(null)); //NaN
console.log(parseInt(undefined)); //NaN
console.log(parseInt(true)); //NaN
console.log('------------------------')
console.log(parseInt("111", 2)); //7，转换为二进制7
console.log(parseInt('100', 8)); //64,转换为八进制64
console.log(parseInt('111', 16)); //16^2+16^1*1+16^0*1=273,转换为16进制273
console.log('------------------------')
console.log(parseFloat('123,1233')); //123
console.log(parseFloat(null)); //NaN
</script>
7.1.3 parseFloat(string)函数：将字符串转换成浮点类型(小数类型)
- 如果第一个字符是数字或运算符号，那么就开始解析，直到遇到非数字字符，停止解析并得到解析结果；
- 如果第一个字符是非数字且非运算符号，则不解析并得到结果 NaN。
image-20210511181625916
7.2==其它类型转换为字符串类型==
7.2.1 方式一: 调用toString()方法
image-20210511190359266
7.2.2 方式二: String(内容)
- toString()方法只能将数值类型和布尔类型转换成字符串类型，不能将Undefined和Null类型转成字符串类型；
- String()函数能将所有基本类型转成字符串类型；
image-20210511190432459
7.2.3 方式三:字符串拼接
image-20210511190442032
<script>
/*
其它类型转换字符串：
1 toString()方法：
1.1 该方法不会影响原变量，会生成新的数值变量
1.2 如果是null，undefined使用该方法,会报错
2 String()方法：
2.1 使用String()函数做强制类型转换时，对于Number和Boolean实际上就是调用的toString()方法
2.2 但是对于null和undefined，就不会调用toString()方法，
它会将 null 直接转换为 "null"，
将 undefined 直接转换为 "undefined"
3.字符串拼接
3.1 隐式转换：其它的数据类型和字符串通过运算符+进行拼接时，会自动转换为字符串类型
*/
var num = 123;
var bool = true;
var obj = null;
var message = undefined;
//toString()方法
console.log(num.toString()); //123
console.log(bool.toString()); //true
//console.log(obj.toString()); //报错
//console.log(message.toString()); //报错
//String()方法
console.log(String(num)); //123
console.log(String(bool)); //true
console.log(String(obj)); //null
console.log(String(message)); //undefined
//字符串拼接:隐式转换：其它的数据类型和字符串通过运算符+进行拼接时，会自动转换为字符串类型
console.log(num + ''); //123
console.log(bool + ''); //true
console.log(obj + ''); //null
console.log(message + ''); //undefined
</script>
7.3==其它类型转换为布尔类型==
- 通常使用Boolean()函数将其他类型转成布尔类型:
- 转换成false的五种特殊值：==""（空字符串）、0（包括 0、-0）、undefined、null、NaN==；
- 如果某个值为 ""（空字符串）、0（包括 0、-0）、undefined、null、NaN时，那么这个值转换成布尔类型之后的值为 false。
- 否则，其值为 true。（记住五种特殊值）
image-20210511190855280
<script>
/*
1. 如果某个值为 ""（空字符串）、0（包括 0、-0）、undefined、null、NaN时，那么这个值转换成布尔类型之后的值为 false。
2.否则，其值为 true。（记住五种特殊值）
*/
console.log(Boolean('')); //flase
console.log(Boolean(null)); //flase
console.log(Boolean(undefined)); //flase
console.log(Boolean(NaN)); //flase
console.log(Boolean(0)); //flase
</script>
