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. [go]net/http

    常用方法 r.Method == "GET" time.Now().Format("2006-01-02 15:04:05") //文件操作 os.Create ...

  2. RNN 与 LSTM 的原理详解

    原文地址:https://blog.csdn.net/happyrocking/article/details/83657993 RNN(Recurrent Neural Network)是一类用于处 ...

  3. 小D课堂 - 新版本微服务springcloud+Docker教程_2_03常见的微服务框架

    笔记 3.常见的微服务框架     简介:讲解常用的微服务框架 consumer: 调用方         provider: 被调用方         一个接口一般都会充当两个角色(不是同时充当) ...

  4. hibernate之inverse=true相关配置讲解

      首先inverse=”true”是在双向关联里面使用单向关联没有这个配置 inverse – 标记由哪一方来维护关联关系(双向关联中会用到) inverse默认值为false 如果inverse设 ...

  5. 【经验分享】Mongodb操作类实现CRUD

    一.背景 公司项目中在做数据存储时使用到Mongodb,所以想着将Mongodb的操作封装后可供项目中其他成员方便使用. 附上Mongodb的下载地址: 下载 1.Mongodb类 此类主要是用来构造 ...

  6. Python学习之初识

    第一章 1.1 typora 的安装与使用 1.1.1 标题的创建: 方法一:用 ###+空格 表示标题,几个#就是几级标题 方法二:菜单栏-->段落-->选择标题 1.1.2 有序列表与 ...

  7. UOJ#495晒被子

    #include<iostream> #include<cstdio> #include<cstring> #include<cstdlib> #inc ...

  8. 3 Java Web 入门 1 Servlet 入门

    1 Tomcat 1.1 安装 JDK Oracle 官网 1.2 安装 Tomcat

  9. amh 操作

    挂在分区到/home 迁移数据库/usr/local/mysql/data 到/home/data目录 504 卡死 进入kangle后台,选扩展,再选中扩展里的命令选项,修改PHP-NTS的协议为f ...

  10. 关于Linux文本处理“三剑客”的一些小操作。

    Linux文本处理“三剑客”,即grep.sed.awk,这是Linux中最核心 的3个命令. 一.首先做个简单的介绍: 1.awk:linux三剑客老大,过滤,输出内容,一门语言.NR代表行号. 2 ...