01-JavaScript书写方式+变量
JavaScript基本概念
-
脚本语言，运行在浏览器端，用来实现网页交互效果的一种编程语言。
-
网页交互效果：网页中能够捕获用户的各种行为动作，并作出对应的相应。
JavaScript书写方式
内嵌式
写法
在网页中任何一个位置（不挑位置），添加一组script标签，在script标签之间写上对应的js代码。
注意
-
一个网页中可以添加多个script标签，script标签是一组双标签
-
将js代码写在标签之间
-
script标签可以在网页中的任意的一个位置
代码演示
<title>Document</title>
<!-- js内嵌式写法 -->
<script>
// js代码
alert(123);
</script>
外联式
写法
将js代码单独写在一个js文件中，然后通过script标签将该js文件引入到对应的html页面中。
注意
-
js文件中只能写js代码，不能写任何的html标签或者css代码
-
外联式写法不能跟内嵌式混着用（不能合写）
-
外联式写法，可以在网页中任何一个位置处引入，不挑网页位置，推荐将外联式写在body标签的末尾处。
代码示例
<body>
<!-- 外联式写法 -->
<script src="../js/02.js"></script>
</body>
行内式（了解）
特点
-
将js代码写在标签内部，代码量比较多，不利于代码维护
-
行内式写法用在webAPI中的事件知识点
代码示例
<style>
.box {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<!--行内式写法 -->
<div class="box" onclick="altert(123)"></div>
</body>
通过js输出消息
alert()
特点：直接在网页中以弹窗的形式输出
代码示例
<script>
alert(“abc123”)；
</script>
console.log()
特点：在浏览器控制台中输入（将信息在console选项卡中显示）
代码示例
<script>
console.log("百度隐藏招聘，欢迎加入我们");
</script>
document.write
特点：在网页body标签中输出；通过document.write()在网页中输出html标签；
代码示例
<script>
document.write("请看这里，文字从网页左上角开始显示");
</script>
注意事项
-
如果输出的内容是非数字，都要加引号（单引号 或者 双引号都可以）
-
js中是严格区分字母大小写（如：不要写成Alert）
-
js代码执行顺序：从上往下依次执行
-
js结束时候的分号是可以省略
-
通过document.write()方式，在网页中输出对应的html标签。(建表格、表单等等)
<script>
document.write("<h1>我是一号标题<h1/>");
</script>
同js获取用户输入消息
prompt() -提示用户输入
注意
1.prompt()在网页中以弹窗的形式，用来获取用户输入内容；
2.如果希望通过prompt()获取用户输入内容，并提示用户输入哪些信息，则可以直接在prompt("提示信息")
代码示例
<script>
prompt("请输入用户名（你需要自己输入）")
</script>
confirm()-确认用户选择
注意
confirm()也可以设置相关提示信息
代码示例
<script>
confirm("你确定要好好学前端吗？")
</script>
变量
概念（作用）
变量在程序中就是用来保存数据的一个容器。
使用（三步骤）
第一步：定义变量
先定义（申明）一个变量（好比购买一个水杯容器， 语法：let 自定义变量名；）
第二步：变量赋值（好比水）
语法：变量名 = 值; （userName="张三"；）
第三步：将变量中的值输出
语法：alert（变量）
代码演示
<script>
// 代码演示：
let userName；
userName = "张三"；
document.write(userName);
</script>
注意事项
变量命名规范注意
-
变量名唯一，不能重复定义。
-
变量名中间不能出现空格
-
变量名不能使用数字或者特殊符号开头（下划线除外）如：let $userName
-
变量名不能是js中的关键字（let，for，if，while……）
-
变量名推荐遵守驼峰命名法（单词首字母小写，后面单词首字母大写--userName）
-
变量名在规则中可以使用汉字，实际开发中不能使用
变量使用规范
-
在程序中只有变量不用加引号，其他任何的非数字都要加引号
-
在程序中定义变量必须加 let 关键字。（什么叫关键字？在程序中具有特殊含义的单词。）
变量赋值注意事项
-
一个变量一次只能保存一个值，且是最后一次赋值结果 【见演示1】
-
给变量赋值的时候必须是 符合运算符 = ，作用就是给变量赋值的
-
当给变量赋值的时候，先执行赋值运算符右侧的代码，然后再执行左侧的结果
-
没有给变量赋值，变量的默认值是undefined
-
定义变量和给变量赋值可以一行书写：let 变量 = 值 【见演示2】
【演示1】
<script>
// 显示最后一次赋值结果
let a;
a = 1;
a = 123;
alert(a); //a=123
</script>
【演示2】
<script>
// 定义变量和赋值一行完成
let a = "goodboy";
alert(a);
</script>
代码演示-姓名输出到控制台
【需求】
将用户输入的姓名输出到控制台console
【分析】
| 步骤 | 执行语法 |
|---|---|
| 1.先来一个容器 | let userName; |
| 2.定义一个变量 | userName = prompt("请输入用户名"); |
| 3.将它输出到控制台 | console.log(userName); |
【代码】
<script>
let userName;
userName = prompt("请输入用户名");
console.log(userName);
</script>
<script>
// 【方法二：连写】
let userName = prompt("请输入用户名");
console.log(userName);
</script>
代码演示-a跟b的值交换
【需求】
a=1,b=2,如何输出a=2，b=1
【分析】
程序只有一只手，一次只能接一个，所以需要引入第3个变量
<script>
// a=1,b=2,如何输出a=2，b=1
let a = 1;
let b = 2;
let c = a;
a = b;
b =c;
console.log(a);
console.log(b);
</script>
数据类型
数据类型：在程序中只要是一个具体的变量，则变量就必须有明确的数据类型。（好比，人必须分男女）
数据类型分类
js程序中变量的类型分为：简单类型+复杂类型
简单类型：
数字类型（number），字符串类型（string），布尔类型（boolean），undefined类型（undefined）
复杂类型：
统称对象（数组，函数，对象）
简单类型
数字类型（number）：
如果一个变量的值是纯数字，那么该变量就是数字类型，如： let a =1.23; let a =-1.23;
字符串类型（string）：
当一个变量的值使用了单引号或者双引号，该变量就是字符串类型； let a ="呵呵"; let a ="abcdefg";
布尔类型（boolean）:
当一个变量的值是true 或者false的时候，并且没有引号，该变量就是布尔类型。
-
true:在分支语句中,循环语句中,表示正确的(条件成立)
-
false:在分支语句中,循环语句中,表示错误的(条件不成立)
let a ="true";
undefined类型（undefined）:
如果一个变量的值是undefined,那么该变量的数据类型就是undefined类型 let a =undefined;
复杂类型
数组
函数
对象
<body>
<script>
let num = null; //object类型，复杂类型
console.log(typeof (null))
</script>
</body>
数据类型转换
应用场景：当计算机的结果是由数据类型导致的问题，需要数据类型准换。
转换方式：强制类型转换+隐式类型转换
强制类型转换
强制类型转换：在程序中由程序员手动转换的数据类型（推荐使用）
转数字类型
语法
Number() parseInt() parseFloat()
| 方法 | 释义 | 特点 |
|---|---|---|
| Number() | 数字 | 如果变量原来的值是整数，则通过Number()转化后得到的结果还是一个整数；如果是小数，就还是一个小数。 |
| parseInt() | 将字符串转换成整数 | 通过parseInt()转换后，只能得到一个整数。 |
| parseFloat() | 转换字符串成为浮点数 | parseFloat()特点与Number()一样。 |
代码演示
<body>
<script>
let a = "123";
// console.log(typeof Number(a));
// console.log(typeof parseInt(a));
console.log(typeof parseFloat());
</script>
</body>
转字符串类型：
语法
变量.toString() String(变量);
| 释义 | 特点 |
|---|---|
| 变量.toString() | 无法将undefined类型转化为字符串 |
| String(变量) | 可以将任何的一种数据类型都能转化为字符串类型（更高级，更全面） |
代码演示- 转字符串类型
<body>
<script>
// 【方法一】 转字符串类型：变量.toString()
// 代码演示：
let a = 123;
let b = true;
a.toString();
b.toString();
console.log(typeof a);
console.log(typeof b);
</script>
</body>
代码演示- 转字符串类型
<body>
<script>
// 【方法二】转字符串类型：String(变量);
// 代码演示：
let a = 123;
let b = true;
a = toString(a);
b = toString(b);
console.log(typeof a);
console.log(typeof b);
</script>
</body>
转布尔类型
语法
Boolean(变量)
####代码演示
// 转布尔类型: Boolean(变量)
<body>
<script>
let a = 123;
a = Boolean(a);
console.log(typeof a);
console.log(a);
</script>
</body>
//总结：
// 1.在转化布尔类型的时候，一般会转化为true；
// 2.如果遇到如下特殊值则会转化为false：空字符串，数字0, undefined , null (会转化为false)
// let a = "";
// let a = 0;
隐式类型转换
隐式类型转换：程序自己在计算过程中发生的数据类型转换（偷偷的转换）
<body>
<script>
// 算数运算符可以实现隐式类型转换，比较运算符实现隐式类型转换(加减乘除协助偷偷摸摸将"1"转换)
// let a = "1"; // 除非加一行代码 a = Number(a)
// let b = "1"; // 除非加一行代码 b = Number(b)
// console.log(a + b); //11
let a = "1";
let b = "1";
let sum = a - b;
console.log(sum); //0
</script>
</body>
type of获取数据类型
语法
typeof 变量
代码演示
<body>
<script>
// 通过typeof获取变量的数据类型
// let a = 123;
let a = "312";
console.log(typeof a);
// 第一行会输出number，第二行会输出string
</script>
</body>
代码演示-求任意两数之和
【需求】
通过js求两个数字的和(数字是需要用户输入)
【分析】
-
求两个数字的和,必须将两个数字保存下来,所以第一步需要先定义两个变量,用于保存用户输入结果；
-
转换数据类型为数值；
-
计算；
【代码】
<script>
let num1 = prompt("请输入第一个数字");
num1 = Number(num1)
let num2 = prompt("请输入第二个数字");
num2 = Number(num2)
let sum = num1 + num2;
console.log(sum);
</script>
【总结】
-
通过prompt得到的结果是一个字符串；
-
字符串相加的过程其实就是将字符串拼接到一块（拼接字符串）；
数组
数组：在程序中用来保存一组数据容器。
特点：数组容器一次可以保存多条数据；变量容器一次只能保存一条数据；
作用：保存多条数据
使用：定义数组+数组赋值+数组取值
###
定义数组
语法
自定义数组名 = []; 如：let ary = [];
let 自定义数组名 = []; 如：let ary = [];
代码演示
<script>
//字面量：表面上的一个具体的直接的值，如console.log(123)里面的123
// 定义数组：通过字面量方式定义的数组
let num = []; //[]也是一个字面量
//定义数组：本质上通过构造函数定义的
let ary = new Array();
</script>
数组赋值
定义数组直接赋值
语法
直接在 [] 中给出数组赋值，值与值之间必须使用逗号隔开,如：console.log(ary);
#### 代码演示
<body>
<script>
// 直接在 [] 中给出数组赋值
let ary = [1, 2, "张三", "哈哈"];
console.log(ary);
</script>
</body>
通过索引赋值
索引：在数组中每一个值对应一个编号，编号就是数组中的索引，数组中索引号是从0开始的。
语法
数组名[索引] = 值;
代码演示
<body>
<script>
// 通过数组索引的方式给数组赋值
let grade = [];
grade[0] = 100;
grade[1] = 88;
grade[2] = 95;
grade[3] = "满分";
console.log(grade);
</script>
</body>
数组取值
语法
数组名[索引]
代码演示
<body>
<script>
// 从数组中取值--取出前三个值
let ary = [99, 85, 78, 88];
console.log(ary[0]);
console.log(ary[1]);
console.log(ary[2]);
</script>
</body>
拼接字符串
使用加号拼接字符串
代码演示
【需求】
在控制台输出格式： 姓名：XXX 年龄：XX 爱好：xxx
【分析】
-
使用字符串把它们连起来；
-
需要先定义三个变量,用于保存用户输入结果。
-
姓名：/年龄：/爱好： 这三个要想输出为字符串，需要将它们放在引号里，输出为字符串格式；
-
uName/age/hobby，为变量，因此不需要放在引号里；
-
用+将字符串穿起来，可以加空格，控制其中的间隔。
<body>
<script>
let uName = prompt("请输入姓名");
let age = prompt("请输入年龄");
let hobby = prompt("请输入爱好");
console.log("姓名:" + uName + "年龄:" + age + "爱好:" + hobby)
</script>
</body>
通过模板字符串拼接字符串
-
模板字符串：字符串使用 反引号 就是模板字符串；
-
模板字符串利用 ${变量} 直接拼接字符串；
<body>
<script>
let uName = prompt("请输入姓名");
let age = prompt("请输入年龄");
let hobby = prompt("请输入爱好");
let str = `姓名:${uName}年龄:${age} 爱好:${hobby}`;
console.log(str);
</script>
</body>
综合作业-将用户输入写入表格
【效果图】
【需求】
将用户的内容显示到表格中
【分析】
第一步：列举用到的知识点
-
获取用户输入内容--prompt()
-
获取内容一定要保存--变量
-
在网页输出表格--document.write
-
表格用到内容，内容需要拼接到表格中--拼接字符串
第二步：实现步骤（做填空题，翻译代码）
-
写用户输入部分
-
将用户的内容显示到表格中，首先你得在网页中输出一个表格
document.write()；表格标签中有很多内容，所以用模板字符串反引号（可以换行），拼接内容。 -
网页中出线表格，把用户输入的结果，写入表格。在模板字符串中写的数据，如何引入呢?---
${} -
如何计算余额呢？（公式）
let remaining_sum = money_total-water_rate-lectric_charge-internet_charge;(隐式类型转换)
【代码-强制类型转化】
<script>
//强制类型转化：
let money_total = prompt("请输入总额");
money_total = Number(money_total);
let water_rate = prompt("请输入水费金额");
water_rate = Number(water_rate);
let lectric_charge = prompt("请输入电费");
lectric_charge = Number(lectric_charge);
let internet_charge = prompt("请输入网费");
internet_charge = Number(internet_charge);
</script>
【完整代码】
<style>
/* 最后一步：写表格样式 */
table {
width: 700px;
}
table,
td,
th {
border: 1px solid #ccc;
/* 合并表格边框 */
border-collapse: collapse;
/* 表格居中 */
margin: 0 auto;
/* 内容居中 */
text-align: center;
}
</style>
<body>
<script>
// 实现步骤：
// 第一步：写用户输入部分
let money_total = prompt("请输入总额");
let water_rate = prompt("请输入水费金额");
let lectric_charge = prompt("请输入电费");
let internet_charge = prompt("请输入网费");
// 第二步：将用户的内容显示到表格中，首先你得在网页中输出一个表格document.write()；表格标签中有很多内容，所以用模板字符串反引号（可以换行），拼接内容。
document.write(`
<table>
<tr >
<th > 银行卡余额</th>
<th> 水费</th>
<th> 电费</th>
<th> 网费</th>
<th> 余额</th>
</tr>
<tr>
<td>${money_total}</td>
<td>${water_rate}</td>
<td>${lectric_charge}</td>
<td>${internet_charge}</td>
<td>${money_total-water_rate-lectric_charge-internet_charge}</td>
</tr>
</table>
`);
// 第三步：网页中出线表格，把用户输入的结果，写入表格。在模板字符串中写的数据，如何引入呢?---${}
// 第四步：如何计算余额呢？（公式）
// 也可以先定义一个变量：let remaining_sum = money_total-water_rate-lectric_charge-internet_charge;(隐式类型转换)
// 强制类型转化：
</script>
</body>