js 介绍、变量、字符串、数据类型
js 介绍、变量、字符串、数据类型
一、JavaScript介绍
1.1 初识js
js是一种运行在客户端（浏览器）的编程语言，实现人机交互效果。
- 作用
- 网页特效 (监听用户的一些行为让网页作出对应的反馈)
- 表单验证 (针对表单数据的合法性进行判断)
- 数据交互 (获取后台的数据, 渲染到前端)
服务端编程 (node.js)
1.2js的组成
- ECMAScript(基础语法）:
规定了js基础语法核心知识。
比如：变量、分支语句、循环语句、对象等等 - Web APIs :
-
DOM: 操作文档，比如对页面元素进行移动、大小、添加删除等操作
-
BOM: 操作浏览器，比如页面弹窗，检测窗口宽度、存储数据到浏览器等等
-
注意:DOM属于BOM
-
权威网站： MDN
-
插件：
-
作用：选中变量名，然后按快捷键，能够让变量快速生成对应的输出
-
快捷：ctrl+shift+L
1.3 js的引用
1.3.1 内联js（了解）
写在开始标签中
<body>
<!-- 内联js -->
<p style="color:red" onclick='alert("我点击了你")'>我是p元素</p>
</body>
- 效果图
1.3.2内部js（重点）
- 写在html文件里，用script标签包住
- 规范：script标签写在</ body>前面，这是因为浏览器是由上解析代码的）（只有在当前页面中可以使用
- 拓展： alert(‘你好，js’) 页面弹出警告对话框
- 注意事项：
- 将 script标签放在HTML文件的底部附近，是因为浏览器会按照代码在文件中的顺序加载 HTML。
- 如果先加载的 JavaScript 期望修改其下方的 HTML，那么它可能由于 HTML 尚未被加载而失效。所以将 JavaScript 代码放在 HTML页面的底部附近通常是最好的策略。
<body>
<p>我是一个p标签</p>
<!-- 内部js 写在</body>的上面-->
<script>
// 添加js
alert('开始学习js')
</script>
</body>
- 效果图：弹出弹框
1.3.3 外部js（常用）
单独写在一个.js的文件,然后引入
<p>我是一个p标签</p>
<!-- 外部js -->
<!-- src:指定想引入的js文件的目录路径，路径可以是相对路径，也可以是绝对路径 -->
<script src="./1.js">
// 在引入外部js的同时，如果在script标签中还写了其它的代码，代码会被忽略
alert('我开始学习js了')
</script>
</body>
- 效果图
1.4 JavaScript 的注释
- 单行注释：
1.快捷：ctrl+/
2.// 注释内容 - 多行注释：
- 快捷：alt+shift+a
- 用处：文档注释-块注释
- /* 注释内容 */
1.5 输入和输出语法
1.5.1 输入
- 属性名：prompt
可以接收用户的输入，输入的内容是字符串
1.5.2 输出
-
console.log():在浏览器控制台中输出
1.影响页面效果
2.不会阻止浏览器执行 -
document.write():
1.在页面中输出
2.会影响页面效果3.原理：在拼接 文档流
-
alert():
1.在页面上弹出框
2.会阻止浏览器执行，一般慎用 -
prompt():
1.显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字，获取的输入内容是字符串
2.语法：
<body> <script> document.write(prompt("请输入您的名字")) // alert("大胆") </script>- 效果图：弹出对话框，输入原地返回值
1.5.3 案例
<body> <script> // - 输出方式： // 1.alert(要弹出的内容) alert("我是云南的") // 缺点：会阻塞文档的解析 // 2.document.write("要输出的内容") // 追加到</body>之前 document.write("我是广西的"); // 会解析html标签 document.write("<br>广西贵港的"); // 3. console控制台.log日志方法("要输出的内容") // - 输入方式： console.log(8989) // prompt提示("提示文字") // 。。。。。。。 </script> </body> - 效果图：弹出对话框，输入原地返回值
-
效果图：处在一直解析的状态，会阻塞文档的解
1.6 结束符
- 描述：表述语句结束
- 英文分号 ;分号 ; 可写可不写
- 换行符（回车）会被识别成结束符 ,所以一个完整的语句，不要手动换行
二、变量
-
描述：变量是计算机存储数据的“容器”
-
本质：是程序在内存中申请的一块用来存放数据的小空间
-
内存：计算机中存储数据的地方，相当于一个大空间
-
演示：let age = 18 的内部流程：
-
let age被提升，在内存中得到一个空间，也可以说是age变量指向了这个空间的地址；
-
age = 18 ; 访问 age，根据这个地址，找到这个空间； 再往空间里存值 18；
-
2.1 声明
使用let 关键字声明变量
let 变量名称
同时声明多个变量： let 变量1，变量2
let age;
2.2 赋值
如果声明的变量没有赋值，默认值为undefined
使用 = 为变量赋值
变量名 = 值
可以声明时直接赋值： let 变量名 = 值
age = 18;
2.3 修改
修改就是指重新赋值，下面的覆盖上面的
age = 18;
age =20;
- 效果图
2.4 使用
变量可以直接输出，操作
<script>
let name = "薇薇";
bzr = "美女"
document.write(name);
console.log(bzr);
</script>
- 效果图
2.4.1 案例：输入一次，打印两次
<body>
<!-- 输两次 -->
<script>
let name = prompt("请输入你的名字")
// prompt(name)
document.write(name + "<br>")
document.write(name)
console.log(name)
</script>
</body>
-
效果
2.4.2 案例：数据交换
<body> <script> let num1 = 10, num2 = 20, temp = num1; num1 = num2; num2 = temp; console.log('num1:', num1) console.log('num2:', num2) </script> </body> -
效果
<body>
<script>
let name = prompt("请输入你的名字");
let age = prompt("请输入你的年龄");
let gender = prompt("请输入你的性别");
document.write('请输入你的名字:' + name + '<br>' , '请输入你的年龄:' + age + '<br>' , '请输入你的性别:' + gender + '<br>' )
</script>
- 效果
2.5 命名规则和规范
2.5.1 规范
- 命名要语义化：通过变量名称可以猜测出变量的作用
- 驼峰命名：除了第一个单词之外的其它单词的首字母大写
2.5.2 规则
- 不要使用关键字做为变量名称
- 不要以数字开头
- 变量名称中不要包含特殊符号
- 除了 _ 数字 字母 $ 之外的都是特殊字符
- 严格区分大小写
2.6 扩展
- let age = 18 ; 实际的执行顺序：
- 刚进入js环境（还未开始执行js代码），浏览器会扫描整个顶层，收集所有的 变量声明；
- 将收集到的变量声明，提升到最上行，开始执行声明 let age ；（注意还未初始化值）
- 然后才开始从上到下逐行执行js代码；
- 再次遇到 let age = 18; 实际的执行效果为 age = 18;
- 引出知识点：
运行到let age = 18;这一行之前，如果去使用 age ； 会报错
解锁var语法的缺点1： var未赋值之前也能访问；
三、字符串
带引号的都是字符串
+：在字符串场景中是字符串连接符
模板字符串
简化拼接字符串
可以创建多行文本
标记： ``
变量替换： ${变量}
模板字符串可以创建多行文本，而单引号和双引号只能创建单行文本
四、数据类型
4.1 数据类型
- JS 数据类型整体分为两大类：
- 基本数据类型（简单数据类型）(值类型)
- number 数字型
- string 字符串型
- boolean 布尔型
- undefined 未定义型
- null 空类型
- 引用数据类型（复杂数据类型）
- object 对象
- function 函数
- array 数组
- 基本数据类型（简单数据类型）(值类型)
4.1.1数字型（ number ）
-
案例1
//1. 0开头的数字 // 8进制 逢8进1 输出1 let number = 01;
let number = 010;
console.log('number: ', number);
- 效果图
4.1.2字符串型（string）
-
注意：
1.引号必须成对使用
let name ='于晏';2.单双引号嵌套使用： 必须交替使用
let name ='我叫"于晏"'; console.log('name: ', name);3.\ 进行转义
let name ="我叫\"于晏\""; console.log('name: ', name); -
// \n newLine:换行
-
注意：只能log使用，document不能使用，它使用的是html语法
console.log("我的年纪是\n19");
- 效果
字符串拼接
-
案例1
- 用+号连接
<body> <script> // 拼接字符串： 字符串 + 字符串 let name = prompt("请输入你的名字") let age= prompt("请输入你的年龄") document.write('大家好，我叫：' + name + "<br>", '今年:' + age + "岁") </script> </body> -
效果图
-
案例2
- 用反引号``拼接（常用）
- 用${}来优化，使用变量
- 反引号的换行可以直接用enter回车
// 使用 反引号，来优化
// ${变量名}
let name = prompt("请输入你的名字")
let age= prompt("请输入你的年龄")
document.write('大家好，我叫：' + name + "<br>", '今年:' + age + "岁" + "<br>")
// 模板字符串
document.write(`大家好，我叫${name},今年${age}岁`)
</script>
</body>
- 效果
4.1.3布尔类型（boolean）
表示肯定或否定时在计算机中对应的是布尔类型数据。
它有两个固定的值 true 和 false，表示肯定的数据用 true（真），表示否定的数据用 false（假）
- 使用场景：
后面会学到判断语句： if(answer){ alert(“你答对了”) }
4.1.4未定义类型（undefined）
未定义是比较特殊的类型，只有一个值 undefined。
- 场景
只声明变量，不赋值的情况下，变量的默认值为 undefined，一般很少【直接】为某个变量赋值为 undefined。
4.1.5null（空类型）
-
null 和 undefined 区别：
undefined 表示没有赋值
null 表示赋值了，但是内容为空 -
变量有赋值，只不过值为 "空
-
注意事项
<body> <script> // 直接输出一个， 未声明，未赋值的变量 // 错误： notDefined is not defined // 不声明, 只赋值 // 一定不要这么写 // 剧透原理：相当于 window.z3 = 123; // 给全局对象window添加了一个属性 // 1.声明变量 let age; // 2. 赋值：= 右边赋值给左边 age = 18; age =20; // 3. 使用 document.write(prompt("请输入你的年龄")) console.log(age) // 4.连写 // let age = 18; </script> </body>
4.2 数据类型的检测
4.2.1 检测类型 typeof
- typeof 123：number
- typeof ‘123’：string
- typeod true：boolean
- typeof undefined：undefined
- typeof null：object
4.2.2 通过控制台的 字体颜色检测
-
蓝色：布尔、数字
-
灰色：字符串、未定义、空
4.2.3 使用 typeof 关键字，来检测变量类型
let age = 18;
console.log(' age: ', age);
let userName = "陈";
console.log('userName: ', userName);
let money = null;
console.log('money: ', typeof money);
let color
console.log('color: ', color);
</script>
</body>
- 效果图
4.3 数据转换
4.3.1 隐式转换
-
描述：某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换。
-
规则：
- 号两边只要有一个是字符串，都会把另外一个转成字符串
- 除了+以外的算术运算符 比如 - * / 等都会把数据转成数字类型
-
缺点：转换类型不明确，靠经验才能总结
-
优点：代码简洁
-
技巧：+号作为正号解析可以转换成Number
console.log(+"11" + 11); -
字符串转换为数值
+num
-num
num * 1 -
数值转换为字符串
(num + ‘’)
String(num)
num.toString()
<script>
// 隐式转化： 系统内部自动的进行类型转化
// 1. 加号（+） 左右，只要有一个字符串，就吧另外一个值转化为字符串
console.log("123" + 1)
console.log(1 + "123")
// 2. 除了+号之外的，算数运算符；会吧数据转化为数字
console.log('4' - 2)
console.log('4' * 2)
console.log('4' / 2)
// 3. +号 可以作为正号解析转化成数字
console.log(+'123')
</script>
- 效果图
4.3.1 显式转换
- Number(变量)：将变量转换为数值
如果有非数值，返回NaN - String(变量)：将变量转换为字符串
- parseInt(变量)：将变量转换为整数
1.如果有非数值就进行转换，直到碰到非数值为止
2.如果第一个就是非数值，就返回NaN - parseFloat(变量)：
将数值字符串转换为数值，保留小数 - 案例
- Number(数据)
- 注意：是大写开头
- Number(数据)
console.log(Number("2334"));
// 1.1 当数据不能转化为数字的时候，会返回 NaN
// 1.2 NaN 是一个数字类型
console.log(Number("fffffff"));
- parseInt(数据)
- 作用： 解析为 整数
- 不会 四舍五入
console.log(parseInt("1.53"));
console.log(parseInt("(1.53f"));
// 解析为NaN
console.log(parseInt("(fsf1"));
- parseFloat(数据)
- 作用： 可以保留小数
- 不会 四舍五入
console.log(parseInt("(1.53f"));
console.log(parseInt("(1.53fa"));
// NaN
console.log(parseInt("(f1.3424"));
-
效果图
-
变量.toString(进制)
<script>
// String(数据)
// 变量.toString(进制)
// 2. 变量.toString(进制) ； 进制不写，默认为十进制
// 需要一个变量
// 数字.toString() 会报错
console.log("----------- String(数据)-----------------");
console.log(String(123));
console.log(String(true));
console.log(String("str"));
console.log(String(undefined));
console.log(String(null));
console.log("-------------变量.toString(进制)---------------");
let a = 123;
console.log(a.toString());
a = true;
console.log(a.toString());
a = undefined;
console.log(a.toString());
a = null;
console.log(a.toString());
</script>
- 效果
五、实战案例
<style>
table {
border: 1px solid #222;
width: 800px;
margin: 100px auto;
border-collapse: collapse;
}
table > caption {
font-weight: 700;
padding: 5px;
}
table td,
th {
border: 1px solid #222;
text-align: center;
padding: 10px 5px;
font-size: 12px;
}
</style>
</head>
<body>
<script>
// 1. 输入4个数据
let name1 = prompt("请输入第一个商品")
let price1 = prompt("请输入第一个商品价格")
let name2 = prompt("请输入第二个商品")
let price2 = prompt("请输入第二个商品价格")
// document.write()只能将字符串拼接到 </body> 之前；
// 目前我们还没学习，如何在任意html标签位置中插入新html；
// 所以只能打印完整的html字符串；
// 2.根据数据生成对应的表格结构
let tableStr = `<table>
<caption>
订单付款确认界面
</caption>
<thead>
<tr>
<th>商品1名称</th>
<th>商品1价格</th>
<th>商品2名称</th>
<th>商品2价格</th>
<th>总价</th>
</tr>
</thead>
<tbody>
<tr>
<td>${name1}</td>
<td>${price1}</td>
<td>${name2}</td>
<td>${price2}</td>
<td>${+price1 + +price2}</td>
</tr>
</tbody>
</table>`;
// 打印表格
document.write(tableStr)
</script>
</body>
- 效果图
扫一扫
479
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
