• 第十二篇 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又怎么写呢?是一样,还是又是一套规范?老师不说,我希望同学们能主动去学它,被动的去学,是学不进去的,进度会特别慢,这样的话,实力不稳,找工作就会碰壁的。
     
  • 相关阅读:
    webpack 命令行 传入自定义变量
    PHP 装饰器模式
    php图片合成【png图片】
    Sublime Text 3.1 3170 / 3176 注册码(附降级与禁止更新方法)
    菜鸟教程jsonp基础知识讲解
    CentOS7用yum安装软件提示 cannot find a valid baseurl for repobase7x86_64
    PHP的parse_ini_file()函数,解释结构类型php.ini格式的文件
    scp命令详解
    php常用错误码的意思
    php模式设计之 适配器模式
  • 原文地址:https://www.cnblogs.com/longfeng995/p/7590401.html
Copyright © 2020-2023  润新知