贺佳磊_20210118贺佳磊
知识点总结
1、eg：九九乘法表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var i;
var j;
for(i=1;i<=9;i++){
for(j=1;j<i;j++){
document.write(j+"*"+i+"="+j*i+" ");
}
document.write("<br/>");
}
</script>
</body>
</html>
2、json
(1）概念：JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式。它基于ECMAScript的
一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON
成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效
率。
（2）语法格式：
| 类型 | 语法 | 解释 |
|---|---|---|
| 对象类型 | {name:value,name:value...} | 其中name是字符串类型，而value是任意类型 |
| 数组/集合类型 | [value,value,value...] | 其中value是任意类型 |
| 混合类型 | [{},{}... ...] 或 {name:[]... ...} | 合理包裹嵌套对象类型和数组类型 |
JSON.parse(jsonStr); // json字符串 --> json 对象
JSON.stringify(json); // json对象 --> json字符串
3、JavaScript中的概念
基本词法、区分大小写、直接量、转义序列、标识符、关键字、保留字、对象、属性和方法、空白符（分隔符）、注释、转义字符
4、变量
声明变量、局部变量、全局变量、生命周期、变量污染、let&const
5、数据类型
五种原始数据类型
| 类型 | 说明 |
|---|---|
| Number | 数值型：整数和浮点数 |
| Boolean | 布尔类型：true/false |
| String | 字符串类型：包含字符和字符串 |
| Null | 只有一个值null |
| Undefifined | 未定义/变量未初始化时的类型,只有一个值undefifined |
引用类型有：对象(Object)、数组(Array)、函数(Function)
6、常用运算符
算术运算符、赋值运算符、比较运算符、逻辑运算符
7、流程控制语句
if 判断、循环
8、在浏览器中的调试
设置断点、语法错误
9、函数
eg1:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="box" ">
<img src="img/1.jpg" id="img"/>
</div>
<script type="text/javascript">
var count=1;
function main(){
var change = setInterval(function(){
document.querySelector("img").src="img/"+count+".jpg";
count++;
if(count>3){
count=1;
}
} ,500);
document.querySelector("#box").onmouseover = function(){
clearInterval(change);
}
}
document.querySelector("#box").onmouseout = function(){
main();
}
</script>
</body>
</html>
eg2:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box {
width: 155px;
height: 155px;
overflow: hidden;
}
.flash {
position: relative;
top: 0px;
transition: all 1s linear;
}
img {
width: 100%;
float: left;
height: 155px;
}
</style>
</head>
<body>
<div class="box">
<div class="flash">
<img src="img/1.jpg" />
<img src="img/2.jpg" />
<img src="img/3.jpg" />
</div>
</div>
<script type="text/javascript">
var box = document.querySelector(".box");
var flash = document.querySelector(".flash");
var imgs = document.querySelectorAll(".flash img");
var t = 0;
var height = box.offsetHeight;
var max = height*imgs.length;
setInterval(function() {
t = t - height;
if (Math.abs(t) >= max) {
t = 0;
flash.style.transition = "0s";
}else{
flash.style.transition = "1s";
}
flash.style.top = t + "px";
}, 2000);
</script>
</body>
</html>
心得体会
新的一周开始了，休息了两天，今早上课很困很困，老师还讲的是知识点，就更困了，也没咋听，所以需要我下去把所有知识点看看，例题多练练。下午还来迟了，因为基础太差，下午讲的自己很难实现，还是要多敲代码呀!明天希望自己打起精神，认真听讲，不断地提升自己，加油！
近期评论