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. selenium_java

    等待 页面全加载 ChromeOptions options=new ChromeOptions(); /** *(1) NONE: 当html下载完成之后,不等待解析完成,selenium会直接返回 ...

  2. 理解JVM

    1.JVM运行时数据区 2.方法区 方法区垃圾回收的条件:该类的所有实例(堆内存中)被回收:加载该类字节码的类加载器被回收:所有的类对象(如Student.class)的引用被回收 一般采用可达性分析 ...

  3. Session案例-用户登录场景

    package com.loaderman.demo; import java.io.IOException; import java.io.PrintWriter; import javax.ser ...

  4. NavMenu 导航菜单

    顶栏 适用广泛的基础用法. 导航菜单默认为垂直模式,通过mode属性可以使导航菜单变更为水平模式.另外,在菜单中通过submenu组件可以生成二级菜单.Menu 还提供了background-colo ...

  5. 在发布ASP.NET网站的时候，出现state server错误

    错误信息如下: 在发布ASP.NET网站的时候,出现state server错误: Server Error in '/' Application. ------------------------- ...

  6. 《Improving Deep Neural Networks:Hyperparameter tuning, Regularization and Optimization》课堂笔记

    Lesson 2 Improving Deep Neural Networks:Hyperparameter tuning, Regularization and Optimization 这篇文章其 ...

  7. html to pdf 把HTML转换为PDF

    http://www.evopdf.com/userguide/userguide.htm

  8. Caused by: com.rabbitmq.client.AuthenticationFailureException: ACCESS_REFUSED - Login was refused using authentication mechanism PLAIN. For details see the broker logfile.的几种原因

    环境:centos 7+ 1.查看用户是否存在 进入安装目录使用./sbin/rabbitmqctl list_users查看是否存在用户 比如:./usr/local/rabbitmq/rabbit ...

  9. TensorFlow实战第六课（过拟合）

    本节讲的是机器学习中出现的过拟合(overfitting)现象,以及解决过拟合的一些方法. 机器学习模型的自负又表现在哪些方面呢. 这里是一些数据. 如果要你画一条线来描述这些数据, 大多数人都会这么 ...

  10. 4 基于优化的攻击——CW

    CW攻击原论文地址——https://arxiv.org/pdf/1608.04644.pdf 1.CW攻击的原理 CW攻击是一种基于优化的攻击,攻击的名称是两个作者的首字母.首先还是贴出攻击算法的公 ...