从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（JS）
复习：从零开始学前端：中括号代替点操作，获取对象，自定义标签属性 — 今天你学习了吗？（JS：Day3）
文章目录
前言
啊~ 把两节课的整混了，下节课内容讲解本节课习题，勤加练习~
第四节课：json对象，数据类型if，swich，三目运算
一、json对象
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，采用完全独立于语言的文本格式，是理想的数据交换格式。同时，JSON是 JavaScript 原生格式，这意味着在 JavaScript 中处理 JSON数据不须要任何特殊的 API 或工具包。
存储格式是键（name）值（coisini）对形式存在的
对象：
var json = {
"name": "coisini",
"user": "admin",
"1": "number",
1: "sum"
};
取值：
console.log(json.name)
console.log(json['name'])
// 当键为数字，或者"数字"的时候下面的可用
// 并且两个1会覆盖
console.log(json[1])
二、ES5的数据类型/六大假值
- number类型
- String类型
- 布尔（boolean）类型
- 未定义（undefined）类型
- 空（null）类型
- object类型
- function类型
注意：
- typeof可以判断数据类型
- null的数据理性是object类型，即typeof null 结果是object类型
- function类型是object类型的分支
- (“”)：空字符串
- (" ")：空格字符串
- (“string”)：字符串
JavaScript数字：
JavaScript只有一种数字类型。数字可以带小数点，有也可以不带：
var num = 1;
var num1 = 0.1;
JavaScript字符串：
字符串是存储字符的变量。
字符串可以是引号中的任意文本。您可以使用单引号或双引号：
var name = "This is Mr.Zhang";
var name1 = 'This is Mrs.Zhang';
JavaScript布尔：
布尔（逻辑）只能有两个值：true或false
var bool = true;
var bool = false;
undefined 未定义
var a;
console.log( a ); //未定义；
//具体的值：由于它本身没有给值，默认会被赋值。系统默认会赋值为undefined；
null 空
获取不到对象，所以为空。
document.getElementById('box');//有时写的是box1，但是拿的是box；取不到值，所以为空。
null是一种独立的数据类型。
var a = document.getElementById('div');
console.log( a );
console.log( typeof a );//object;
//检测值的时候返回object;
object:对象
var a = []; //按照顺序来存储数据；
console.log( typeof a ); //object
console.log( a.length ); //长度为零，表示里面没有内容。
//代表： [],{} 按照顺序来存储数据；
var b = function{};
console.log( b ); //typeof 返回 function ;
六大假值
- false
- 0
- “” ------空字符串是假，空格字符串是真
- undefined
- null
- NaN -------俗称假值，坏值，（Not a number），但是注意，他的数据类型是number
三、比较符
| 符号 | 名称 |
|---|---|
| < | 小于 |
| > | 大于 |
| == | 等于 |
| <= | 小于等于 |
| >= | 大于等于 |
| != | 不等于 |
| === | 全等，除了值的判断，还会进行unicode编码的对比 |
| !== | 不全等 |
比较符返回的值，通常有两种结果，要么真，要么假！ true/false！
直接在控制台进行打印
这里重点讲解一下===与==的区别：
“ == ”不能区分数据类型，但是 “ ===”可以区分数据类型，同理“!=”与“!==”也是一样的。
输出结果：
四、if判断流程
if判断流程
if进行判断根据情况不同，选择不同的方向：
if (条件判断) {
// 这是条件满足时的代码
code
} else {
// 这是条件不满足时的代码
code
}
只走真而不走假
if(条件判断){
// 这是条件满足时执行的代码
code
}
// 不写进行假的判断
多层判断:
var a=10,
b=10;
if(a>b){
console.log('a大于b');
}else if(a < b){
console.log('a小于c');
}else{
console.log('a等于c')
}
五、switch
当if的判断条件是一个变量来跟其它的数据作比较的时候（全等于比较时），if可以改写成switch.
//if的变种写法：优点：相比于if判断，可读性更强；但是前提必须在全等于的情况下进行判断。
var num = 1;
switch (num) {
case 1:
console.log("1");
break;
case 2:
console.log("2");
break;
case 3:
console.log("3");
break;
case 4:
console.log("4");
break;
// 默认值都是卸载最后一个的。最好把break写上
default:
console.log("都不等于")
break;
}
五、三目运算
if判断：只有真和只有假的时候，并且真的语句只有一条且假的语句只有一条的时候。可以使用三目运算。
语法：
判断 ？ 判断为真执行 ：判断为假执行
typeof num === 'number' ? console.log('数据类型是number！') : console.log('非数字！');
六、点击连续输出div
效果：
代码：
<!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>Document</title>
<style>
div span {
float: left;
width: 50px;
height: 50px;
background-color: #acb;
margin: 5px;
}
</style>
</head>
<body>
<button>
点击输出10个div
</button>
<div>
</div>
<script>
const btn = document.getElementsByTagName('button')[0]
const div = document.getElementsByTagName('div')[0]
var str = ''
btn.onclick = function () {
for (var i = 0; i < 10; i++) {
str += '<span></span>'
}
console.log(str)
div.innerHTML = str
}
</script>
</body>
</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>Document</title>
<style>
div {
margin: 100px auto;
width: 250px;
height: 450px;
background-color: #abb;
position: relative;
}
div>span {
position: absolute;
display: block;
background-color: skyblue;
height: 50px;
width: 50px;
font-size: 30px;
line-height: 50px;
text-align: center;
}
</style>
</head>
<body>
<div>
<!-- <span></span> -->
</div>
<script>
const mydiv = document.getElementsByTagName('div')[0]
var num = 9
var mid = (num - 1) / 2
var str = ""
for (var i = 0; i < num; i++) {
if (i < mid) {
str += "<span style='top:" + i * 50 + "px;left:" + i * 50 + "px;'>" + (i + 1) + "</span>"
} else {
str += "<span style='top:" + i * 50 + "px;left:" + (num - i - 1) * 50 + "px;'>" + (i + 1) + "</span>"
}
}
console.log(str)
mydiv.innerHTML = str
</script>
</body>
</html>
八、正向遍历、反向遍历
正向遍历：
// 正向遍历
for (var i = 0; i < 10; i++) {
console.log(i)
}
结果：
反向遍历：
// 反向遍历
for (var i = 10; i > 0; i--) {
console.log(i)
}
结果：
九、练习
-
聊天发表
-
js轮播图
扫一扫
1527
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
