贺佳磊_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>

心得体会

新的一周开始了,休息了两天,今早上课很困很困,老师还讲的是知识点,就更困了,也没咋听,所以需要我下去把所有知识点看看,例题多练练。下午还来迟了,因为基础太差,下午讲的自己很难实现,还是要多敲代码呀!明天希望自己打起精神,认真听讲,不断地提升自己,加油!

标签

评论


© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1