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做域用户验证登录

    安装包 ldap3 代码: from ldap3 import Server, Connection, ALL, NTLM # 连接 server = Server('public.ad.com', ...

  2. java用Annotation注入到成员Bean对象

    java用Annotation注入到成员Bean对象 在使用一些java框架的时候,经常看到一些注解,而且使用注解之后就可以免去一些xml的繁琐配置,本文记录如何通过注解获得成员Bean对象. 一.首 ...

  3. Cortex-M3 在C中上报入栈的寄存器和各fault状态寄存器

    因为在标准C语音中是不能获取SP指针的.因而,如果想通过C代码来获取入栈的寄存器值,需要配合一小段汇编代码来获取当前的SP值,然后再把这个SP值以参数形式传送给C代码,最后以指针的形式把栈中的各寄存器 ...

  4. View的事件机制

    为了更好的研究View的事件转发,我们自定以一个MyButton继承Button,然后把跟事件传播有关的方法进行复写,然后添加上日志. import android.content.Context; ...

  5. JS方法调用jQuery内部方法

    转载于:https://blog.csdn.net/tsoTeo/article/details/77848932 已经测试过,可以正常调用!!以下为原文: JS方法能不能调用JQuery里面的方法  ...

  6. css3图片变灰

    html{ filter:grayscale(100%); -webkit-filter:grayscale(100%); -moz-filter:grayscale(100%); -ms-filte ...

  7. pyqt5的QCompleter自动补全 使用模板

    相关说明 使用QCompleter类,就可以实现自动补全功能,效果图如下: 对应的代码很简单 def init_lineedit(self): # 增加自动补全 self.completer = QC ...

  8. Memtest86+ 5.0.1系统设置

    Settings: (1) Test Selection (测试选择) > (1) Default Tests (2) Skip Current Test (3) Select Test (4) ...

  9. C# Timespan Tostring 时分秒格式

    timeSpan.ToString(@"hh\:mm\:ss");

  10. （“(null)” is of a model that is not supported by this version of Xcode. Please...）

    真机测试遇到以下问题: (还以为手机不支持Xcode的版本呢) 解决方法: 发现只要将XCode重启后就可以真机运行了,碰见这个问题的朋友可以试下,我反正是被坑了半小时...