通过javascript把标签换色_HTML（一）JavaScript篇

通过之前的两篇文章，我们可以大致的知道这个HTML和CSS是什么。而JavaScript，有个Java，但实际上与Java并没有半点关系。

如果你看过我之前的一些介绍脚本的文章，比如超星网课助手，自动登录校园网之类的，你大概就能明白JavaScript的神奇之处。在当前这个网站即应用的时代，掌握了JavaScript，就相当于你学会了开挂。

那么如果你对它感兴趣，就请继续看下去吧。

1. 对HTML的一点补充

HTML的加载方式是从上往下加载的，也就是先加载head再加载body之类的。这或许在纯HTML文档里面没有什么重要的，但是对于JavaScript来说，一段程序的执行时机是十分重要的。比如你将JavaScript代码放在了HTML文档的开头，而你要对下面的一些标签进行控制。可是这个时候这个标签还未被加载，那么JavaScript就无法对其进行处理。当然，解决的办法很多，在我们学习中就会慢慢的遇到。

2. JavaScript的使用

2.1 在HTML文档中使用

想要在HTML文档中使用JavaScript代码，需要使用标签。你可以随意的放置任意数量的JavaScript脚本，即可以无限使用标签。

2.2 引用外部js脚本文件

我们可以在外部编写js代码，使用的也是script标题。但是标签内不需要写代码，并且需要在标签的src属性设置代码的路径。参考css篇中的外部样式表的引入。

3. 来个Hello，world！

3.1 JavaScript的输出

JavaScript有很多种输出方式

3.1.1 控制台输出：

console.log("Hello world!")

3.1.2 输出在html页面上

document.write("Hello world!")

这种方法可以将文字输出到页面上。

注意！如果在文档加载完后使用，会覆盖掉文档所有的内容。所以这是一种不建议的写法

3. 1.3 innerHTML和innerText

在JavaScript中，可以通过document.getElementById(id)的方式获取到元素，进而对元素进行操控。

我们可以使用innerHTML和innerText改变其中内容。他们的区别是，innerHTML能够设置html标签，而innerText只能设置文字。

    document.getElementById(id).innerHTML = "Hello,world";

3.1.4 弹框

我们可以使用alert("内容")，制造一个弹框。

alert("Hello,world")

4. JavaScript语法

4.1 定义变量

JavaScript使用var来声明一个变量，这个变量不需要指定类型。

var a; // a是一个空的变量var b = 1; //b是一个数字变量var c = "abc"; //c是一个字符串var d = [1,2,3] //d是一个数组

4.2 函数

JavaScript定义函数有很多种方法

function method1(){    console.log("第一种");}var method2 = function(){    console.log("第二种");}//目前只需要学习这两种就差不多啦

4.3 其它

关于分号

JavaScript的分号不是必须的，但在每条语句结束后写一个分号，可以让你的代码更加规范。

关于为什么有其它

查阅了一大堆的资料，我发现HTML这部分的知识点多而杂，而且网上有很多现成的教程。我觉得如果再搬运到我的公众号，只是在做无用功。

接下来的这个系列会以实战为主，这样可能会比较有用一点。同时我在这里推荐一些教程给大家学习。B站的视频可能会过期，emmm可以根据教程名称搜索，看看有没有其他同款的视频。

学习教程

1. w3school和菜鸟教程

www.w3school.com.cn^[1]

www.runoob.com^[2]

这两个网站涵盖了很多编程语言的基础教学，几乎都是文字的形式，如果你是一个动手能力强的人，可以选择它，跟着它来做一做，很快就可以掌握这门语言了(大概。

2. 视频教程

不会过期的B站UP自制视频

www.bilibili.com/video/BV1ds411r7o7^[3]

这个教程好像是一个up的自制教程，除了用IDEA写网站不能理解，讲的内容就还好。而且比较简短，学太久的话可能会消磨掉你的耐心。适合快速入门！

【极客学院】HTML5基础教学

www.bilibili.com/video/BV1dx41127Qb^[4]

这个讲的会比较全一点，是培训公司的教程。而且涉及到了很多比较新的技术点，后面还有讲jquery，学完这个大概就算是基础扎实了。适合打好基础，全面学习！

Web前端/HTML5教程2019版 900集完全入门 达到前端工程师水平

www.bilibili.com/video/BV1FE411t7NY^[5]

这个就厉害了，如果你打算走前端方向(特别适合现在写代码写到头爆炸的计算机秃头朋友和数字媒体技术只会设计不会编程的同学)，可以选择这个耐心的学下去。我只是粗略的看一下，好像挺全面的。适合想要往前端方向发展的同学

References

[1] www.w3school.com.cn: http://www.w3school.com.cn[2] www.runoob.com: http://www.runoob.com[3] www.bilibili.com/video/BV1ds411r7o7: http://www.bilibili.com/video/BV1ds411r7o7[4] www.bilibili.com/video/BV1dx41127Qb: http://www.bilibili.com/video/BV1dx41127Qb[5] www.bilibili.com/video/BV1FE411t7NY: http://www.bilibili.com/video/BV1FE411t7NY

正文：Snoopy|精神支持：Jenny

扫码关注我们 公众号ID： TJMandZYZs扫码关注，我们一起学习鸭