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. GitHub：Alibaba

    ylbtech-GitHub:Alibaba 1.返回顶部   2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部 1. https://github.com/alibaba 2.   ...

  2. 【React自制全家桶】六、React性能优化（持续更新总结）

    一.通过虚拟DOM来提升性能(自动) 底层讲解见[React自制全家桶]二.分析React的虚拟DOM和Diff算法   二.将多次setState合并为一次执行(自动) 底层讲解见[React自制全 ...

  3. Linux版本

    1.内核:Linux内核Kernel目前最新稳定版 3.4  http://www.kernel.org/ 2.发行版本:是一些厂商将Linux系统内核与应用软件和文档包装起来,并提供一些安装界面和系 ...

  4. javascript之Prototype属性

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. ABAP Field+offset字符串截取

    *删除字符串末尾的字符 DATA:str TYPE string VALUE 'abc,defg,', sub_str TYPE string, num TYPE i. WRITE:/ str. nu ...

  6. MUT值设置、top等命令无法执行、ssh无法登陆、vim命令卡住

    [root@host---- ~]# ifconfig eth0: flags=<UP,BROADCAST,RUNNING,MULTICAST> mtu inet 10.1.1.204 n ...

  7. Day05:集合操作——线性表(二) / 查找表 / 文件操作——File(一)

    文件操作:https://www.cnblogs.com/wsnb8/p/11403626.html

  8. Nginx动态添加模块 平滑升级

    已经安装好的Nginx动态添加模块 说明: 已经安装好的Nginx,需要添加一个未被编译安装的模块,需要怎么弄呢? 这里已安装第三方nginx-rtmp-module模块为例 nginx的模块是需要重 ...

  9. BP原理 - 前向计算与反向传播实例

    Outline 前向计算 反向传播 很多事情不是需要聪明一点,而是需要耐心一点,踏下心来认真看真的很简单的. 假设有这样一个网络层: 第一层是输入层,包含两个神经元i1 i2和截距b1: 第二层是隐含 ...

  10. windows10专业版激活

    [1]右击我的电脑->属性,查看激活情况 [2]管理员身份打开CMD [2.1]如果不知道CMD是什么东西 [2.2]如果上面那个也找不到,直接按windows键(就是ctrl和alt中间那个键 ...