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又怎么写呢？是一样，还是又是一套规范？老师不说，我希望同学们能主动去学它，被动的去学，是学不进去的，进度会特别慢，这样的话，实力不稳，找工作就会碰壁的。
 

第十二篇 JavaScript(简称JS) 实现显示与隐藏的更多相关文章

  1. 【Python之路】第十二篇--JavaScript

    JavaScript 历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEase.(客户端执行的语言) Net ...

  2. Python开发【第二十二篇】：Web框架之Django【进阶】

    Python开发[第二十二篇]:Web框架之Django[进阶]   猛击这里:http://www.cnblogs.com/wupeiqi/articles/5246483.html 博客园 首页 ...

  3. 13. 第十二篇 二进制安装kubelet

    文章转载自:https://mp.weixin.qq.com/s?__biz=MzI1MDgwNzQ1MQ==&mid=2247483842&idx=1&sn=1ef1cb06 ...

  4. 解剖SQLSERVER 第十二篇 OrcaMDF 行压缩支持（译）

    解剖SQLSERVER 第十二篇   OrcaMDF 行压缩支持(译) http://improve.dk/orcamdf-row-compression-support/ 在这两个月的断断续续的开发 ...

  5. 第十二篇 SQL Server代理多服务器管理

    本篇文章是SQL Server代理系列的第十二篇,详细内容请参考原文 在这一系列的上一篇,我们查看了维护计划,一个维护计划可能会创建多个作业,多个计划.你还简单地看了SSIS子系统,并查看了维护计划作 ...

  6. 第十二篇 Integration Services：高级日志记录

    本篇文章是Integration Services系列的第十二篇,详细内容请参考原文. 简介在前一篇文章我们配置了SSIS内置日志记录,演示了简单和高级日志配置,保存并查看日志配置,生成自定义日志消息 ...

  7. Python之路【第十二篇】：JavaScrpt -暂无内容-待更新

    Python之路[第十二篇]:JavaScrpt -暂无内容-待更新

  8. 【译】第十二篇 Integration Services：高级日志记录

    本篇文章是Integration Services系列的第十二篇,详细内容请参考原文. 简介在前一篇文章我们配置了SSIS内置日志记录,演示了简单和高级日志配置,保存并查看日志配置,生成自定义日志消息 ...

  9. 【译】第十二篇 SQL Server代理多服务器管理

    本篇文章是SQL Server代理系列的第十二篇,详细内容请参考原文 在这一系列的上一篇,我们查看了维护计划,一个维护计划可能会创建多个作业,多个计划.你还简单地看了SSIS子系统,并查看了维护计划作 ...

随机推荐

  1. Python中循环及判断语句

    循环判断条件是编程语言中一个很重要的部分,python也不例外,循环判断条件一般结合continue,return,break关键字来判断,这些关键字用法与java中基本一致 一.if判断语句 判断条 ...

  2. java实现几种常用排序:选择排序

    一.选择排序介绍 选择排序,顾名思义就是用逐个选择的方式来进行排序,逐个选择出数组中的最大(或最小)的元素,直到选择至最后一个元素.此时数组完成了排序. 二.选择排序原理分析 三.选择排序代码实现 / ...

  3. Centos 安装freesurfer fsl matlab 等软件---转自网络

    freesurfer: freesurfer好安装,只需要下载官网源码包,如freesurfer5.3.tar.gz 下载至本地,解压: tar zxvf freesurfer5.3.tar.gz - ...

  4. Cookie实战案例代码

    import java.io.IOException; import java.text.SimpleDateFormat; import java.util.Date; import javax.s ...

  5. 详解nohup和& 区别

    nohup 一.[解释] 不挂断地运行命令.no hangup的缩写,意即“不挂断”.一般理解&记住一个命令最简单的方法是记住它是什么缩写,就自然理解了这个命令.nohup运行由 Comman ...

  6. springboot2.0---控制台打印Mybatis的SQL记录

    题记:每次使用mybatis出错,都不知道sql原因,debug也不出结果,索性将其打印出来,更加容易排错. 亲测有效,只需要将下面的logback.xml放置在resource目录下即可打印. 方式 ...

  7. awk中begin/end的含义

    BEGIN中的内容是在awk开始扫描输入之前执行,一般用来初始化或设置全局变量: 而END之后的操作将在扫描完全部的输入之后执行.

  8. windows安装python flask虚拟环境

    安装pipenv的虚拟环境主要是为了防止不同python版本之间冲突的问题,虚拟环境安装的包包不会对外部真实环境产生任何作用,只会作用于虚拟环境.这样,一个flask框架应用对应一个pipenv虚拟环 ...

  9. freetye2使用

    使用环境和版本:qt ubuntu 16.04   freetype-2.10.0 1.下载 https://sourceforge.net/projects/freetype/files/freet ...

  10. finereport 通过条件弹出 alert进行提示

    function convertDateFromString(dateString) { if (dateString) { var date = new Date(dateString.replac ...