35-41

HSdiana

2019-10-25

JS介绍

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        alert(123)
    </script>
</head>
<body>

</body>
</html>

代码：在head中使用script，表示其中的语法都是JavaScript。

35-41

上图：这是alert(123)的效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        alert(123)
    </script>
</head>
<body>

</body>
</html>

代码：
之所以可以被识别成JavaScript，是因为默认情况下在script中有个type="text/javascript"。
不进行配置的话默认就是type="text/javascript"。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js-01.js"></script>

</head>
<body>

</body>
</html>

代码：调用外部JS文件

35-41

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
    <div>123</div>
    <div>321</div>

    <script src="js-01.js"></script>
</body>
</html>

代码：当去打开一个网页，如果使用了JavaScript，则会先加载JavaScript的效果，才会去加载内容，如果有些JavaScript效果是需要人为主动触发的话（比如鼠标点击），可效果迟迟加载不出来，那么就一直也看不到内容；
所以最好是先加载内容后加载JavaScript的话，需要将JavaScript的内容放在body中的最下面，这样就会先看到内容，后看到JavaScript效果。

基础

变量

name = ‘test‘   全局变量
var name = ‘test‘   局部变量

基本数据类型

字符串

age = "18";
i = parseInt(age);  <!--将字符串转成整数-->
x = parseFloat(age);    <!--将字符串转成浮点数-->

35-41

上图：
在浏览器的console中直接定义变量和调用相关属性
字符串的几种属性；
charAt 获取指定下标对应的字符
substring 获取指定范围下标的字符
length 获取当前字符串的长度

定时器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        setInterval("alert(123);",5000)
    </script>

</body>
</html>

代码：5000是毫秒。

35-41

上图：每5秒就会弹出一次

函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>

        function f1(){
            console.log(123);
        }
        setInterval("f1()",2000)
    </script>

</body>
</html>

代码：每2秒调用一次f1函数，并且console.log(123)

35-41

上图：console.log就是在浏览器的console中输出内容，图中可以看到当前123已经被输出了12次。

实现内容滚动效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <div id="i1">欢迎大家光临北京</div>

    <script>

        function  func() {
            /*获取div标签及内容*/
            var tag = document.getElementById(‘i1‘);

            /*获取div标签中的内容*/
            var content = tag.innerText;

            /*获取整个内容的第1个下标内容，也就是：欢*/
            var f = content.charAt(0);

            /*获取整个内容的第2个内容到最后一个内容，也就是：迎大家光临北京*/
            var l = content.substring(1,content.length);

            /*l+f= 迎大家光临北京欢*/
            var new_content = l + f;

            /*这里全局变量，让其等于最新的内容，这样下次调用的函数时依照上面的操作就会实现内容滚动效果*/
            tag.innerText = new_content;

        }

        setInterval(‘func()‘,500);

    </script>

</body>
</html>

35-41

上2图：随意抓取的两个滚动中的内容

字符串常见功能

obj.length                           长度

obj.trim()                           移除空白
obj.trimLeft()
obj.trimRight)
obj.charAt(n)                        返回字符串中的第n个字符
obj.concat(value, ...)               拼接
obj.indexOf(substring,start)         子序列位置
obj.lastIndexOf(substring,start)     子序列位置
obj.substring(from, to)              根据索引获取子序列
obj.slice(start, end)                切片
obj.toLowerCase()                    大写
obj.toUpperCase()                    小写
obj.split(delimiter, limit)          分割
obj.search(regexp)                   从头开始匹配，返回匹配成功的第一个位置(g无效)
obj.match(regexp)                    全局搜索，如果正则中有g表示找到全部，否则只找到第一个。
obj.replace(regexp, replacement)     替换，正则中有g则替换所有，否则只替换第一个匹配项，
                                     $数字：匹配的第n个组内容；
                                     $&：当前匹配的内容；
                                     $`：位于匹配子串左侧的文本；
                                     $‘：位于匹配子串右侧的文本
                                     $$：直接量$符号

split分割

35-41

上图：分割的时候加数字，就是获取分割的几个数据。

布尔值

35-41

上图：在JS中，布尔值是小写

布尔类型仅包含真假，与Python不同的是其首字母小写。

== 比较值相等
!= 不等于
=== 比较值和类型相等
!=== 不等于
|| 或
&& 且

数组

JS中的数组与python中的列表格式一样

obj.length          数组的大小

obj.push(ele)       尾部追加元素
obj.pop()           尾部获取一个元素
obj.unshift(ele)    头部插入元素
obj.shift()         头部移除元素
obj.splice(start, deleteCount, value, ...)  插入、删除或替换数组的元素
                    obj.splice(n,0,val) 指定位置插入元素
                    obj.splice(n,1,val) 指定位置替换元素
                    obj.splice(n,1)     指定位置删除元素
obj.slice( )        切片
obj.reverse( )      反转
obj.join(sep)       将数组元素连接起来以构建一个字符串
obj.concat(val,..)  连接数组
obj.sort( )         对数组元素进行排序

obj.splice

35-41

上图：
a.splice(1,1,99) 第一个1表示其实位置（22）；第二个1表示对几个数据进行操作；最后一个值插入的数据，表示将22替换成99。

35-41

上图：第二个值是0，表示新值，可以看到在下标1的位置，插入了一个909的新值。

35-41

上图：这里没有第三个值，表示将下标1开始的第一个值删除后，不会再插入其他值。

字典

35-41

上图：在JS中字典的使用与Python中差不多

for 循环

JS中有两种for循环的方式

第一种for循环方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <script>

        a = [11,22,33,44];
        for (var item in a){
            console.log(item);
        }

    </script>

</body>
</html>

代码：进行for循环操作

35-41

上图：图中没有取到值，却取的是索引

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <script>

        a = [11,22,33,44];
        for (var item in a){
            console.log(a[item]);
        }

    </script>

</body>
</html>

代码：根据索引取a变量中的值

35-41

for 循环字典

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>

a = {‘k1‘:‘v1‘,‘k2‘:‘v2‘};
for (var item in a){
    console.log(item);
}

</script>

</body>
</html>

代码：这里打印item

![enter description here](https://www.github.com/aubreyzheng/python_learn/raw/master/小书匠/1565826884922.png)

上图：打印的是key

- 打印value
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>

    a = {‘k1‘:‘v1‘,‘k2‘:‘v2‘};
    for (var item in a){
        console.log(a[item]);
    }

</script>

</body>
</html>

代码：a[item]

35-41

上图：这里打印的是value

同时打印key和value

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>

    a = {‘k1‘:‘v1‘,‘k2‘:‘v2‘};
    for (var item in a){
        console.log(item,a[item]);
    }

</script>

</body>
</html>

35-41

第二种for循环方式

<!--  初始i等于0，当i小于10的时候会一直for循环；  -->
<!--  第一次循环i等于0，下一次循环时会i++，相当于i+=1  -->
for(var i=0; i<10; i++){

    }

这种for循环不支持字典

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>

    a = [11,22,33,44];

    for(var i=0; i<a.length; i++){
        console.log(a[i]);
    }

</script>

</body>
</html>

35-41

条件语句

<!--if else-->

if(条件){

}else if(条件){

}else if(条件){

}else{

}

等号

35-41

上图：==只判断值是否相等，不判断类型； === 即判断值又判断类型是否相等。

&&，||

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>

    if(1==1 && 2==2){
        console.log(true)
    }

</script>

</body>
</html>

代码：
&&相当于 and
||相当于 or

35-41

函数

function 函数名(参数){

}
函数名(参数)

html代码 charset html文件

安科网

35-41

HSdiana

基础

字符串

布尔值

数组

字典

for 循环

条件语句

函数

HSdiana

相关推荐

前端如何实现.md文件转换成.html文件

10个对Web开发人员有用的HTML文件上传技巧

在html页面中引入另一个html页面

Html常用代码

前端之HTML

webpack 之压缩js代码和html文件

Javascript 在html中的嵌入方式

如何让html引用公共布局（多个html文件公用一个header.html和footer.html）

前端开发-html

手把手教你搭建Vue服务端渲染项目

快速指南：如何创建基于Python的爬虫

HTML知识点（一）

再见HTML ! 用纯Python就能写一个漂亮的网页

用urllib库几行代码实现最简单爬虫

JavaScript HTML DOM 事件

HTML 语义

如何理解HTML语义化的？

python之发送邮件----html + 附件

css基础教程

C# 使用 WebBrowser 实现 HTML 转图片功能

HSdiana