初识JS
1.JS介绍
1.1什么是JS
-
什么是JS？
是一种运行在客户端（浏览器）的编程语言，实现人机交互效果。
-
JS有什么作用？
- 网页特效 (监听用户的一些行为让网页作出对应的反馈)
- 表单验证 (针对表单数据的合法性进行判断)
- 数据交互 (获取后台的数据, 渲染到前端)
- 服务端编程 (node.js)
-
JS是由什么组成的呢？
- ECMAScript：规定了js基础语法核心知识。比如：变量、分支语句、循环语句、对象等等
- Web APIs :
- DOM 操作文档，比如对页面元素进行移动、大小、添加删除等操作
- BOM 操作浏览器，比如页面弹窗，检测窗口宽度、存储数据到浏览器等等
- 注意 DOM属于BOM
1.2JS的书写位置
-
内联 JavaScript
-
代码写在标签内部
-
这种用法不太推荐，了解即可
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>js书写位置</title> </head> <body> <button onclick="alert('hello girs')">点击 </button> <!-- <script> alert('hello world') </script> --> </body> </html>
-
-
内部 JavaScript
-
直接写在html文件里，用script标签包住
-
规范：script标签写在上面
-
tips：我们将 。 如果先加载的 JavaScript 期望修改其下方的 HTML，那么它可能由于 HTML 尚未被加载而失效。 因此，将 JavaScript 代码放在 HTML页面的底部附近通常是最好的策略。
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>js书写位置</title> </head> <body> <script> alert('hello world') </script> </body> </html>
-
-
外部 JavaScript
-
代码写在以.js结尾的文件里
-
语法：通过script标签，引入到html页面中。
-
tips：1. script标签中间无需写代码，否则会被忽略！
- 外部JavaScript会使代码更加有序，更易于复用，且没有了脚本的混合，HTML 也会更加易读，因此这是个好的习惯。
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>外部书写JS</title> </head> <body> <script src="./02-js外部文件.js"></script> </body> </html>
-
1.3JS注释
JS注释分为多行注释跟单行注释
-
多行注释：ctrl + /
-
单行注释：系统默认为 shift + alt + a
1.4结束符
-
作用：代表语句结束（英文分号";"）
-
可写可不写，都可以运行（现在不写结束符的程序员越来越多）
-
换行符（回车）会被识别成结束符 ,所以一个完整的语句，不要手动换行
-
是否要写结束符，根据团队的要求而定。
1.5JS的输入输出语法
学习目标：能写出常见 JavaScript 输入输出语法
-
什么是语法：
- 人和计算机打交道的规则约定
- 我们要按照这个规则去写
- 我们程序员需要操控计算机，需要计算机能看懂
-
常见的3种输出语法：
输出和输入也可理解为人和计算机的交互，用户通过键盘、鼠标等向计算机输入信息，计算机处理后再展示结果给用户，这便是一次输入和输出的过程。
- document.write('要输出的内容')
向body内输出内容
如果输出的内容写的是标签，也会被解析成网页元素
语法：
<body> <script> document.write('要输出的内容') </script> </body>- alert('要输出的内容')
页面弹出警告对话框
语法：
<body> <script> alert('要输出的内容') </script> </body>-
console.log('控制台打印')
控制台输出语法，程序员调试使用，这是我们开发人员最常用的
语法：
<body> <script> document.write('要输出的内容') </script> </body>
-
常见的输入方法：
- prompt('')：弹出一个对话框，收集用户输入的信息
2.变量
1.什么是变量
变量是计算机存储数据的“容器”，就是一个装东西的盒子。是计算机中用来存储数据的“容器”，它可以让计算机变得有记忆。
2.变量的作用
用来存放数据的。注意变量指的是容器而不是数据。
3.变量的基本使用
3.1 声明变量：要想使用变量，首先要创建变量（专业说法： 声明变量）
声明变量有两部分构成：声明关键字、变量名（标识）;
语法：
<script>
//定义变量
// let 变量名 = 数值
let myname = '阿良'
</script>
let 即关键字 (let: 允许、许可、让、要)，所谓关键字是系统提供 的专门用来声明（定义）变量的词语
3.2变量赋值：定义变量后，就可以给它进行赋值，在变量名之 后跟上一个“=”，然后是数值
<script>
let myname; // 声明变量 我的名字
myname = '阿良';//变量赋值
console.log(myname);//变量的使用
let height; // 声明变量 身高
height = '180';//变量赋值
console.log(height);//变量的使用
let weight; // 声明变量 我的名字
weight = '60kg';//变量赋值
console.log(weight);//变量的使用
</script>
</body>
3.3更新变量：变量赋值后，还可以通过简单地给它一个不同的 值来更新它。（之前的数据会被覆盖）
<script>
//定义变量
// let 变量名 = 数值
let age = 18
age = 17
console.log(age); // 输出age = 17
</script>
3.4 let不允许多次声明一个变量：会报错
<script>
//定义变量
// let 变量名 = 数值
let age = 18
let age = 17
console.log(age);
// 两次声明了同一个变量 系统直接报错
</script>
4.声明多个变量
语法：声明多个变量之时，使用“,” 隔开；输出的时候也使用“,”隔开即可
<script>
//声明多个变量
let myname = '阿良', age = 18, adress = '中华人民共和国'
console.log(myname, age, adress);
</script>
5.变量练习
语法：
<script>
let username = '张三', number = 20
console.log(username, number);
//输出：张三 20
</script>
练习2：变量练习进阶版：变量值的交换
语法：
<script>
// 交换变量的数值：相当于左手换右手
// 需要创建一个临时变量num0，作为中转站
//下先将num1 的值交换给num0，再将num2的值交换给num1，最终将临时变量num0中的值交还给num2
//感觉本质上还是可以看作是重新给变量进行赋值
let num1 = 10, num2 = 20, num0
num0 = num1, num1 = num2, num2 = num0
console.log(num1, num2);
</script>
6.变量的规则和规范
规则：必须遵守，不遵守报错
规范：建议，不遵守不会报错，但不符合业内通识
6.1规则
-
不能用关键字
关键字：有特殊含义的字符，JavaScript 内置的一些英语词汇。例如：let、var、if、for等
-
只能用下划线、字母、数字、$组成，且数字不能开头
-
字母严格区分大小写，如 Age 和 age 是不同的变量
<script>
// 1.建一个变量，名字为 let , var if for 等为内置关键词 都不能使用
// let for = 123 系统直接报错
// 2. 可以使用下划线，$符号 数字跟字母
let _str = '123' //下划线开头
console.log(_str);
let $str1 = '123' //$开头
console.log($str1);
let str = '123' //字母开头
console.log(str);
// let 123str = '123' //数字开头 会报错
// console.log(123str);
</script>
6.2规范
- 起名要有意义
- 遵守小驼峰命名法：第一个单词首字母小写，后面每个单词首字母大写。例：userName
<script>
let userName = '阿良'
</script>
6.3 命名规范练习
<script>
let userName = prompt('请输入您的姓名:')
let userAge = prompt('请输入您的年龄:')
let userSex = prompt('请输入您的性别:')
// document.write = userName
// document.write = userAge
// document.write = userSex
console.log(userName, userAge, userSex);
</script>
3.数据类型
为什么要给数据进行分类呢？
更加充分和高效的利用内存；也更加方便程序员的使用数据
3.1数据类型
3.1.1基本数据类型
控制台语句经常用于测试结果来使用。
可以看出数字型和布尔型颜色为蓝色，字符串和undefined颜色为灰色
<script>
// 1.数字类型运算
// 注意：数字添加了引号的就不是数字类型了，是字符串类型
let num1 = 22, num2 = '11'
console.log(num1 + num2); // 输出为2211,为字符串类型
let num = 22, num3 = 11
console.log(num + num3); // 输出为33
// 2.字符串拼接
let str = '迪迦超人', str1 = '是光的化身'
// 文字加文字
console.log(str + str1); //迪迦超人是光的化身
// 文字加数字
let num4 = 12
console.log(str + num4); //输出为 迪迦超人12 字符串
</script>
数字型number
-
什么是数值型?
即我们数学中学习到的数字，可以是整数、小数、正数、负数。JavaScript 中的正数、负数、小数等 统一称为 数字类型。
字符串型string
-
什么是字符串型?
通过单引号（ ''） 、双引号（ ""）或反引号( ` )包裹的数据都叫字符串，单引号和双引号没有本质上的区别，推荐使用单引号。
-
注意事项：
- 无论单引号或是双引号必须成对使用
- 单引号/双引号可以互相嵌套，但是不以自已嵌套自已（口诀：外双内单，或者外单内双）
- 必要时可以使用转义符 \，输出单引号或双引号
-
字符串拼接
-
作用：拼接字符串和变量，在没有它之前，要拼接变量比较麻烦
-
符号：``，变量用{变量名}
语法：
```js
<script>
// 首先要先声明变量
let myname = '阿良', age = 18
document.write(`大家好，我叫${myname},今年${age}岁了`)
//这种拼接方式相比之前的“+”要更利于阅读查看
</script>
```
布尔型boolean
- 示肯定或否定时在计算机中对应的是布尔类型数据。
- 它有两个固定的值 true 和 false，表示肯定的数据用 true（真），表示否定的数据用 false（假）。
未定义型undefined
-
未定义是比较特殊的类型，只有一个值 undefined。
-
什么情况出现未定义类型？
只声明变量，不赋值的情况下，变量的默认值为 undefined，一般很少【直接】为某个变量赋值为 undefined。
语法：
<script>
let age
console.log(age); //系统输出为undefined
</script>
-
工作中的使用场景:
我们开发中经常声明一个变量，等待传送过来的数据。
如果我们不知道这个数据是否传递过来，此时我们可以通过检测这个变量是不是undefined，就判断用户是否有数据传递过来。 -
总结
空类型null
-
null 表示 值为 空
-
null 和 undefined 区别：
- undefined 表示没有赋值
- null 表示赋值了，但是内容为空
-
null 开发中的使用场景：
将来有个变量里面存放的是一个对象，但是对象还没创建好，可以先给个null （知道这里是要放变量，但没准备好数值，先拿个空的占着位置）
3.1.2引用数据类型
暂不做过多介绍
3.2检测数据类型(typeof)
通过 typeof 关键字检测数据类型
语法：
<script>
//定义变量
let num = 123, str = 'aliang', num2 = '12', myname = true, num3 = 2.3213, str2
//控制台输出变量
console.log(typeof (num));
console.log(typeof str);
console.log(typeof num2);
console.log(typeof myname);
console.log(typeof num3);
console.log(typeof str2);
</script>
语法输出的结果：
4.数据类型转换
-
首先要知道我们为什么需要进行类型转换？
因为JavaScript是弱数据类型： JavaScript也不知道变量到底属于那种数据类型，只有赋值了才清楚。 使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算。
-
就是把一种数据类型的变量转换成我们需要的数据类型。
-
转换数据类型分为隐式转换跟显示转换
4.1隐式转换
-
什么是隐式转换呢？
某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换。
-
它有什么规则呢？
-
“+” 号两边只要有一个是字符串，都会把另外一个转成字符串
-
除了+以外的算术运算符 比如 - * / 等都会把数据转成数字类型
-
对应输出的类型：**蓝色的是数字型，黑色的是字符串型**
-
缺点：转换类型不明确，靠经验才能总结
-
小技巧：+号作为正号解析可以转换成Number
<script> //在字符前面加“+” 可以将数据类型转变成数字类型 console.log(typeof +'12'); </script> //文字也是一样，输出的数据类型为number <script> console.log(typeof +'abcd'); </script> -
工作中推荐的写法：
<script> let num1 = '12' let num2 = +num1 console.log(typeof num2); //控制台打印为number </script>
4.2简易计算器之隐式转换
使用隐式转换的“ + ”号巧妙地将字符串转换成数字类型。
要求：输入两个数字，最终打印出两个数字的和
其中使用的技巧为：+号作为正号解析可以转换成Number
语法：
<script>
// 先定义两个变量num1 跟 num2
// +号作为正号解析可以转换成Number,可以巧妙地将字符串转换成数字类型
var num1 = + prompt('请输入第一个数字')
// 直接在前面添加“+”
var num2 = + prompt('请输入第二个数字'), num3 = num1 + num2
alert(`两个数字的总和为：${num3}`) // 得到的数字为两个值之和
</script>
4.3显式转换
-
什么是显示转换：
自己写代码告诉系统该转成什么类型
-
为什么需要显示转换
编写程序时过度依靠系统内部的隐式转换是不严禁的，因为隐式转换规律并不清晰，大多是靠经验总结的规律。 为了避免因隐式转换带来的问题，通常根逻辑需要对数据进行显示转换。
4.4转化为字符型String
-
将数字型转化成字符串：、
前两种使用的较少，第三种方式也叫做隐式转换，是我们常用的。
语法：
<script>
// 第一种转换方法 变量.toString()
var num = 12
var str = num.toString()
console.log(str);
</script>
<script>
// 第二章转换方法 String（变量）
var age = 18
console.log(String(age));
</script>
<script>
// 第三种转换方法 + 字符拼接的方式 也叫隐式转换
console.log(12 + '');
</script>
4.5转化为数字型Number（重点）
转化为数值型的方式有四种，分别是
- parseInt('')————只保留整数
- parseFloat('')————可以保留小数
- 利用Number()进行转换 ————Number(变量)
- 隐式转换（- * /）————利用算数运算隐式转换成数值型（在变量的最前方添加“+” 可直接转换为数字型）
-
parseInt('')转换的方法：parseInt()
<script> // 1.age 是用户输入的年龄是字符串类型，通过parseInt()转换成数字型 var age = prompt('请输入您的年龄') console.log(parseInt(age)); // 2.parseInt()会将数字转换成整数，小数部分会被直接截除 console.log(parseInt('18')); console.log(parseInt('3.14')); </script> -
parseFloat('')转换的方法：(parseFloat('')
- 可以将字符转换成小数
- 遇到字母或者汉字时，会停止识别，只展示出前面的数字
<script> // 1.parseFloat() 可以将字符型转换成数字型 得到小数 console.log(parseFloat('3.14')); // 如果其中是整数，输出的任是整数，不会主动添加小数点 console.log(parseFloat('10')); // 2.(parseFloat('') 可以主动去掉最后方的单位，比如px console.log(parseFloat('120px')); // parseFloat()遇到字母或者是汉字的时候会停止识别后续的字符，只会显示前面的数字 console.log(parseFloat('12abc')); console.log(parseFloat('12汉字')); </script> -
Number转换：Number（）
语法：
<script> // 3.利用unmber进行转换 var str = '12' console.log(Number(str)); console.log(Number('32')); </script> -
js隐式转换（- * /）:
在我们进行数算运算的时候，JS自动转换了数据类型
实验代码：
<script> // 4.隐式转换（- * /） 进行算数运算时系统会自动转换成数字型 // 减号 console.log('121' - 120); //1 成功转换成数字型 console.log('12' - '11'); //1 成功转换成数字型 //加号 console.log('121' + 11); //12311 这个是属于字符串拼接，得到的是字符串 console.log('121' + '11'); //12311 //乘号 console.log('121' * 2); //242 成功转换成数字型 console.log('121' * '2'); //242 成功转换成数字型 // 除号 console.log('120' / 2); //60 成功转换成数字型 console.log('120' / '2'); //60 成功转换成数字型 //对中文或者字母进行运算。会得到NAN，不是数字的提示 console.log('120' / 'hello'); //NAN console.log('120' / '你好'); //NAN </script> -
如果字符串内容里有非数字，转换失败时结果为 NaN（Not a Number）即不是一个数字
<script> //对中文或者字母进行运算。会得到NAN，不是数字的提示 console.log('120' / 'hello'); //NAN console.log('120' / '你好'); //NAN </script> -
NaN也是number类型的数据，代表非数字
-
练习：输入2个数，计算两者的和，打印到页面中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>案例</title> </head> <body> <script> var number1 = prompt('请输入第一个数字') var number2 = prompt('请输入第二个数字') // 1.利用number(),强制将字符串转换成数字 // var sum = Number(number1) + Number(number2) // 2.使用parseFloat() 转换成数字类型 // var sum = parseFloat(number1) + parseFloat(number2) // 3.使用parseInt() 转换成数字类型 var sum = parseInt(number1) + parseInt(number2) alert('两数的总和为：' + sum) </script> </body> </html> -
总结：使用四种方式将数据类型转换为数字型
<script> let str = '123' // 1.使用Number() 的方式强势将字符转换成数字 let num1 = Number(str) console.log(typeof num1); // 如果不是数字，是文字或者字母，使用Number转换会如何呢？ let str1 = 'abc中文' console.log(Number(str1)); //控制中心打印出为：NaN 不是个数字 //2.使用parseInt() 转换为数字型 转换成整数 let age = '123', age1 = '3.14' console.log(parseInt(age)); //123 console.log(parseInt(age1)); //3 console.log(typeof parseInt(age)); //检测的数据类型为number //3.使用parseFloat()转换 let num4 = '3.1415' console.log(parseFloat(num4)); //3.1415 //4.使用“+”转换 let num5 = +str console.log(num5); //123 console.log(typeof num5); //number </script>
