张宇_20210118张宇
知识点总结
1、JavaScript
1.1转义字符
转义字符是一种间接表示字符的方式，JavaScript定义反斜杠加上字符可以表示字符自身。
alert("子曰：\"学\而\不\思\则\罔\, \思\而\不\学\则\殆\。\"");
或者
alert("子曰：\"学而不思则罔，思而不学则殆。\"");
1.2变量
1.2.1let&const
let 声明的变量只在 let 命令所在的代码块内有效。 const 声明一个只读的常量，一旦声明，常量的值就不能改变。const 用于声明一个或多个常量，声明时必须进行初始化，且初始化后值不可再修改常量。但let定义的变量值可以修改。
<script>
var b = 2;
// let b = 1; // Identifier 'b' has already been declared
var c = 1;
var c = 2;
// 代码块
{
let a = 1;
}
// console.log(a); //a is not defined
const PI = 3.14;
// PI ++;
</script>
1.3typeof操作符
用来判断指定的变量数据类型。
<script type="text/javascript">
var i = 5;
document.write("整数：" + typeof(i) + "<br/>");
var f = 3.14;
document.write("浮点数：" + typeof(f) + "<br/>");
var str = "abc";
document.write("字符串：" + typeof(str) + "<br/>");
var c = 'a';
document.write("字符：" + typeof(c) + "<br/>");
var b = true;
document.write("布尔类型：" + typeof(b) + "<br/>");
var u;
document.write("未定义的类型：" + typeof(u) + "<br/>");
var n = null;
document.write("null：" + typeof(n) + "<br/>");
var fun = function(){}
document.write("fun：" + typeof(fun) + "<br/>");
</script>
1.4实例1
乘法表
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
for(var i=1;i<=9;i++){
for(j=1;j<i;j++){
document.write(i + "*" + j + "=" + i*j + " ");
}
document.write("<br>");
}
</script>
</body>
</html>
1.5函数
<script>
console.log(square(5));
function square(number) {
return number * number;
}
var num = 10;
var r1 = square(10); // 调用函数
num = 11;
console.log(r1);
function demo(n){
n = 200;
}
var a = 666;
demo(a);
console.log(a); // 666
function demo(o){
o.name = "zhangsan";
}
var p = {
"name": "lisi",
"age" : 18
}
demo(p);
console.log(p.name); // zhangsan
</script>
1.6字符串对象（string）
用户在表单中输入的数据默认都是String类型。并且在JavaScript中，单引号和双引号引起来的都是字符串。
<script type="text/javascript">
let str = "I Like That Girl !!!";
// charAt(n) 寻找字符串中下标为 n 的字符
// 如果n 小于0 或 大于 字符串的长度，返回空串
let c = str.charAt(5);
// indexOf() 寻找字符串第一次出现的位置,对大小写敏感
// 如果没有找到，返回 -1
let pos = str.indexOf("i");
// split() 将字符串分隔成字符串数组
let arr = str.split(" ");
// substr(n) 从 n 开始截取字符串，包含 n
// 如果 n 大于字符串的长度，返回空串
// 如果 n 小于 0，反向截取字符
let sub = str.substr(6);
// substring(s, e) 从字符串下标 s 开始截取到下标 e
// 包含下标为 s 的字符，不包含下标为 e 的字符（包左不包右）
let sub1 = str.substring(0, 6);
// 易错点
// 反斜杠\表示转义, 如 \n 表示换行 \t 制表符
let s = "a\\b\\c\\e\\f";
let warn = s.split("\\");
console.log(warn);
</script>
1.6实例2
图片的轮播
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box{
width: 450px;
height: 600px;
overflow: hidden;
}
#box img{
width: 100%;
height: 600px;
float: left;
}
#content{
transition: all 1s linear;
}
</style>
</head>
<body>
<div id="box">
<div id="content">
<img src="img/1.png" />
<img src="img/2.png" />
<img src="img/3.png" />
</div>
</div>
<button id="shang" onclick="shang">上一张</button>
<button id="next" onclick="next">下一张</button>
<script type="text/javascript">
var box=document.querySelector("#box");
var content=document.querySelector("#content");
var imgs=document.querySelectorAll("#content img");
content.style = "position:relative;top:0px;";
var t=0;
var height=box.offsetHeight;
var max= height * imgs.length;
content.style.height=max+"px";
setInterval(function(){
t -=height;
if(Math.abs(t) >= max){
t=0;
}
content.style.top = t + "px";
},3000);
</script>
</body>
</html>
2、json
json是一种数据交换格式，采用完全独立于编程语言的文本格式来存储和表示数据。
<script type="text/javascript">
//json 对象
var json = {
"count": 1,
"person": [{
"name": "张三",
"age": 18
},
{
"name": "李四",
"age": 19
}
]
};
console.log(json.person[0].name);
//json 字符串
var json1 = '{"count":1,"person":[{"name":"张三","age":18},{"name":"李四","age":19}]}';
// json 对象
console.log(json);
// json 字符串
console.log(json1);
// 将 json 字符串转换成 json 对象
console.log(JSON.parse(json1));
// 将 json 对象转换成 json 字符串
console.log(JSON.stringify(json));
心得体会
今天学的东西挺多的，JavaScript部分有关于变量的知识，比如const声明变量后是不可以修改的，还有typeof可以用来显示变量值的数据类型，还做了乘法表这个例子知道了document.write("<br>");可以用来换行，还做了切换图片的例子。json部分做了了解包括语法格式，以及JSON对象及JSON字符串之间的转换。
近期评论