电工基地软件组前端培训1

回到主页

因为期末考试原因，教程搁置了挺久，实在不好意思，不知道这么久大家对于HTML和CSS的内容是否还记得，HTML是超文本标记语言，其中的标签用来构建网页的整个框架，CSS是样式层叠表，用来美化页面。HTML和CSS纯粹是需要孰能生巧的，需要大量的练习才能灵活运用。今天接着介绍剩下的JS。

1.JS简介

JS是一种基于面向对象的脚本语言。一般用于与用户交互做出反应，请求服务器获取信息。例如：用户提交表单上传到服务器之前的验证操作，对用户的操作（输入，点击）的回应，读写HTML元素等等。

JS分为三个部分：ECMAScript，DOM，BOM。

ECMAScript：描述了该语言的语法和基本对象。

DOM（文档对象模型）：描述处理网页内容的方法与接口，在单页面中的那些HTML标签都可以称为DOM节点，用JS可以查找这些节点中的内容，或者是在两个节点中插入一个节点等一系列操作。还分子节点，父节点等等。

BOM（浏览器对象模型）：描述与浏览器进行交互的方法与接口。

JS需要写在<script>标签中，类似于CSS的<style>标签。

JS，CSS，HTML可以写在一个HTML文件中，就是大家目前写的这种形式，也可以分别写在不同的文件中，例如JS可以专门写在一个后缀名为.js的文件中，CSS写在后缀名为.css的文件中，这样的好处是在写大型网站中，将不同的样式部分，不同的逻辑部分区分开来，方便维护。

写好的.js和.css文件需要链接到HTML文件中才能生效。链接方式如下：

<link rel="stylesheet" type="text/css" href="xx/xx/xx.css">//外部css引入
<script type="text/javascript" src="xx/xx.js"></script> //外部js引入

2.控制台的使用

写JS其实与写C语言的感受是一样的，我们进行C语言程序调试的时候会用print把一些关键信息打印出来，从而来验证程序逻辑的正确性。JS也是一样的，在验证交互逻辑是否正确的时候或者Debug的时候，也需要“打印”一些关键的数据来辅助验证。在JS中就可以使用类似print的语法：

console.log();//可以log中文信息来进行提示，也可以log程序中的一些变量

那么在哪可以看到log的信息呢？

在任意一个浏览器中（这里以谷歌浏览器为例，这里推荐大家使用谷歌浏览器），按F12可以打开浏览器控制台：

点击上面一排按钮中的console：

我们在JS中的打印的内容就会被打印在这里，可以看到百度网站打印了一则招聘广告在这里。

此外控制台还可以看当前网页的DOM结构，比如说你看到一个很牛逼的网站，你想模仿他，你就可以打开控制台，选择Elements：

这里你可以看到百度首页的DOM结构，你就可以点击相应的标签查看内容以及其样式：

但是有时候网站布局比较复杂你在Elements中找不到你想看的那个部分，你就可以点击这个按钮：

点击过后，可以在网页内选中任意部分并点击，右边会自动跳转到相应的部分：

控制台还可以切换手机，电脑视图：

还有一个是Network，用来显示浏览器与服务器之间的请求。

200是状态码，表示请求成功，这里就涉及到了前端请求数据的问题了，如果你发现你向服务器请求数据结果不对或者没有显示，你就应该来这里检查一下，请求是否成功，点击相应的请求可以查看详细信息，这在以后的课程中会详细讲到。

控制台是你测试网页逻辑，对页面进行响应式设计（就是同一个网页在电脑和手机上呈现不同的布局）必不可少的工具，所以熟练运用这个工具对你理解网页架构，Debug都非常有用的。

3.DOM操作

每一个标签可以看做是一个节点。

所谓DOM操作就是通过JS来获取元素的值，属性等信息，一般我们会给元素一个id来方便操作。

这是常用的操作DOM的语法，是获取id为“xx”的值：

document.getElementById("xx").value

图中这个输入框我给了一个id=“input”，现在我想获取这个输入框中的值的话，我可以：

document.getElementById("input").value

当然我这是在控制台里面直接输入js代码，你们需要在自己的.js文件中输入相关代码，所获取的值可以用一个变量来储存，例如：

var inputValue=document.getElementById("input").value;

除此之外还有其他操作的方法：

4.JS函数

定义一个JS函数和C语言差不多，语法如下：

function myFunction(param1, param2){
    var a = param1;
    var b = param2;
    return a*b;
}

var result = myFunction(1,2);//result=2

我们可以指定特殊的事件来触发相应的函数：

<button id="button" onclick="myFunction(1,2)"></button>

这个就是一个按钮，当我按下按钮（onclick）的时候执行myFunction(1,2)函数，还要一些其他的事件：

5.总结

在本次培训中，我并不打算讲一些基础语法什么的，因为我希望每一个人能够自己独立去W3C上自主学习，因为这个是一个积累的过程，看官方文档远比我讲的要详细的多，有助于你深刻理解，我想传授的是一种经验，而不是单纯的copy教程，关于在看官方文档中有任何问题可以随时私聊我。

作业

对于第一次作业点评中所点出的问题，继续完善改正你们的博客，采用外链式的js和css。此外做一个登录界面，要求：

  1. 输入账号和密码（用JS做个假的验证），然后一个登录按钮，账号都设为HUST-SEEE，密码设为123456

  2. 尽可能人性化，即你要想到用户所会遇见的所有问题，并给出提示。例如账号或密码没填，你要提示他，再或者是账号密码不对，你也要给出相应的提示。

  3. 尽你可能的完善这个登录系统，自由发挥，提示下：想想一个登录系统还应该有什么东西（选做）

    周日前交

提交改正的博客与这个登录系统