HTML第二课开讲

HTML第2课

在上一课中，我已经给大家讲了HTML的一些基础，今天我们就来开始做第一个项目——登录页面。

先上源代码：

DOCTYPE html>

      登陆。


      function CheckElementInList(TheElement,TheList){
         for(var i = 0;i < TheList.length;i++){
            if(TheList == TheElement){
                  return true;
            }
         }
         return false;
      }
      function get(ID,typeOfGet="entry"){
         if(typeOfGet == "entry"){
            return document.getElementById(ID).value;
         }
         if(typeOfGet == "check"){
            return document.getElementById(ID).checked;
         }
         else{
            throw "Cannot getthis type!";
            return "Error:Cannot get this type!";
         }
      }
      function checkInput(){
         var passwordList = ["password"];
         var usernameList = ["username"];
         var password = get("E2","entry");
         username = get("E1","entry");
         if(CheckElementInList(password,passwordList) && CheckElementInList(username,usernameList)){
            alert("Logged in");
            document.cookie = "logged in";
         }
         else{
            alert("IncorrentUsername or Password!");
         }
      }
      function Hello(){
         var cookie = document.cookie;
         if(cookie != "loggedin"){
            alert("Please login!");
         }
         if(cookie == "loggedin"){
            alert("Welcome,"+username);
         }
      }
      Hello();


      body{
         background-color:blueviolet;
         font-family:'Lucida Sans', 'Lucida SansRegular', 'Lucida Grande', 'Lucida SansUnicode', Geneva, Verdana, sans-serif;
         font-size:30px;
      }


      This is a loginpage.
      Username.

      Password.



1
这次的代码比上一次长了很多，但是不用担心，我们会把这个项目拆成好几天来学，下面先来讲一讲我们遇到的一个新标签：。

这个标签正如它的名字，写入的是脚本。

在HTML网页编程中，我们如果不借助一些框架，比如Python的Django等等，就只能用JavaScript来写动态的交互式网页。

在HTML语言中，想要插入一段JavaScript代码，就必须使用这个标签，否则浏览器会试图把它当成HTML语言的代码来处理，进而引发一系列错误。

2

那么到这里，有些人可能会纳闷，为什么做个网页，得学三种语言：JavaScript、CSS和HTML？

这是因为在HTML的语法标准刚刚建立的时候，声明一个标签可以带样式，让HTML的代码可读性大大降低，变得十分混乱。

后来，Web协会重新制定了HTML标准，把脚本和样式都统一放在一个独立标签里。像这样，代码就变得整洁多了。

3

为了做出我们的这个登录页面，首先我们要学习JavaScript中函数的概念。

在编程语言中的函数和数学中的函数很像，给函数一个或多个值，它就会返回一个或多个值。

在JavaScript中，可以用以下方法定义一个函数：function 函数名(接收值)：代码块

通过以上的伪代码，我们可以大致明白声明一个函数的方法。在写函数的接受值时，如果有多个值，则在值和值之间用逗号隔开。

下面让我们来看一个例子：
function sum(num1,num2){
      return num1 + num2;
}
这就是一个最简单的函数。现在让我们写一段代码调用这个函数：
console.log(sum(1,2));
console.log(num(2,3));
你应该能在浏览器的cosnole中看到一下输出：
3
5

END
大功告成！你已经创建了自己的第一个JavaScript函数！
在下一课中，你将学习怎么获取控件的值以及封装一些函数来让自己的编程更轻松。