第十二篇 JavaScript(简称JS) 实现显示与隐藏

JavaScript

 
JavaScript简称JS。JS是脚本语言,它是一种轻量级的编程语言,是可以插入HTML页面的编程代码,几乎所有现代浏览器都是支持的。
理论老师不行,我就抄袭手册上的一些关键字段给大家,然后我们写代码来学习。
JS也和CSS一样,是可以外部引用的,但是CSS用的是link标签,而JS用的则是script标签,和CSS一样,要写在head标签里哦,引用文件都要写在这里的。
我们来写一个看看:
 
<head lang="en">
    <script src="../js/myjs.js"></script>
</head>
 
这样就是引用外部名为"myjs.js"的文件,就和css一样,在这个文件里编写JS代码就可以了。
它除了可以引用外部js,还可以写在body标签里,当然,直接在head里写也是可以的,不用引用外部,这样吧,老师这样说,有同学会不理解,我们就先写在body标签里,来,上代码:
 
<body>

<script>
    alert(1);
</script>
</body>
 
script标签写在body里,就不需要用src来指定文件路径,而是直接写,同学这样理解吧,script当做div,div里可以包含很多内容,而script里包含的内容,则是JS代码。
上面这个代码,alert的意思是警示框,页面会弹出一个提示框,内容则是老师输入的"1",它没太多的意思,同学们想在里面输入什么都可以,只是做成提示而已。这里说一下啊,JS跟HTML就不一样了,它的约束就会更强,假如你写一个乱的代码,错的代码,它会提示报错,代码将不会成功运行,可能还会影响到之后的程序运行。
 
错误提示在哪呢?我们写一个错的代码看一下:
 
<script>
    if;
</script>
 
if是判断语句,我们使用判断、循环、函数等方法,如果不遵循一些基础规则,就会出错。我们将这段代码运行,在页面上刷新,按下F12,大家会看见,右侧会有一个错误提示,一个红色的圆包含一个差,错误为1个。查看代码里,有很多操作,我们选"Concole"可以查看到错误,它的错误在第几行,是什么错误都能看到,不过基本上都是英文提示,看不懂就去翻译,关键看它出错是第几行,然后你再去看自己写的代码,这样也能很简单的发现错误。
 
JS能做什么呢?最简单的理解嘛,它可以页面动态,什么是动态?之前我们学的HTML+CSS都是静态模式对吧,我们用JS写一个东西,大家就能发现了,先将JS里的代码删除啊,错误的咱不要。我们先加一个div:
<div id="div1">我是div1</div>
页面上会出现以上div内容,那么我们用JS来做一下修改:
 
<script>
    //JS的注释,在前面打两个斜杠
    // var 创建变量 div1
    // document意思是文档对象
    //getElementById 简单理解为指定到这个id
    var div1 = document.getElementById("div1");
    //我们修改div1的内容
    //innerHTML 是页面文本内容,这里就是给它修改了
    div1.innerHTML = "我才不是div1嘞";
</script>
 
这样,我们再刷新页面,div的内容会改变成JS里面的“我才不是div1嘞”。这里老师的script标签是写在body里的,如果写在head呢?
div输出的结果则是“我是div1”,则不是JS里的“我才不是div1嘞”,为什么呢?是script在head里,无法这样用吗?不是的,是因为代码是从上往下运行的,下面的div则覆盖了上面JS里的div1内容。很简单的一个测试,大家在head里的script标签里再加一个alert做一个测试嘛,一样会弹出提示的。
 
初学的同学,可能不懂,那么老师就加快一下步伐,做一个简单的显示隐藏功能吧!看到效果,这样同学们就能懂一些了。但是这样的话,要额外学习一些重要的东西:“事件”!事件是很重要的,多的理论老师不说了,不懂去看看手册,老师先上代码,边做边解释:
 
<button onclick="yincang()">点击我,隐藏div1</button>
<button onclick="xianshi()">点击我,显示div1</button>
 
在body里,div下面加上这一段代码,button只是一个元素,同学们不用在意它,其他的元素也是可以做“事件”的。这里的事件,则是里的 onclick,它的意思是“点击事件”,就是我们用鼠标单击它,触发事件,运行属于它的代码,就是我们后面在JS里写的代码。onclick后面的值,则是一个函数,函数有一个特点,后面必须带一个"()"括号。
我们转手去JS,看看该怎么写:
 
//创建函数,需要用到关键字:function
function yincang(){
    //var创建变量,找到id为div1,然后传输给我的变量。
    //变量也不能随便取,它有规范的,数字和下划线不能开头基本就可以了
    var div1 = document.getElementById("div1");
    //给div1添加CSS样式,display=none 设置为隐藏。
    div1.style.display="none";
}
 
创建函数,yincang(),那么我们在button元素里启用事件指向的则是yincang(),所以JS就会运行函数里的代码,效果则会是id为div1的元素,被隐藏了。
那么显示的操作就很简单,复制隐藏的JS代码,将函数yincang改成xianshi,因为上面的botton里的事件就是xianshi。然后里面的代码就两行吧,不算注释,运行的代码就两行,就将最后的"none"值改成"block"就可以了。
那么我们能看见,JS除了能修改HTML,还能修改CSS样式。
 
老师的教学,是针对功能性的,理论废话太多,说多了也没用,老师把能说的说了,关键就是同学们的理解能力,重点还是,只要能做出来就是第一,会说不会做,废柴一个。
 
但是老师会保留一点,就比如上面的,如果我们是外部引用文件,引用的是myjs.js文件,那么在这个文件里,JS又怎么写呢?是一样,还是又是一套规范?老师不说,我希望同学们能主动去学它,被动的去学,是学不进去的,进度会特别慢,这样的话,实力不稳,找工作就会碰壁的。
 
原文地址:https://www.cnblogs.com/longfeng995/p/7590401.html