前端开发入门 | TuringGu

写在前面

本文主要为前端开发做个引子，对常见的或者常用的知识做个简介，包括HTML、CSS、Javascript一些入门级知识

注：补充知识放在文末

HTML

简介

HTML不是一种编程语言，而是一种超文本标记语言

网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。

Form表单

输入框<input/>标签最常用
type="text"普通的文本输入框
type="password"带星号的密码输入框
type="radio"单选框，同一类型要有相同的name，表明是同一类
type="chechbox"复选框，添加checked属性会默认选中
type="file"文件上传选择
type="email"带简单验证的邮箱输入
<textarea>标签input只能单行输入，textarea可以多行输入

HTML元素属性

属性	值	描述
class	classname	规定元素的类名（classname）
id	id	规定元素的唯一id
title	text	规定元素的行内样式（inline style）
style	style_definition	规定元素的额外信息（可在工具提示中显示）

CSS

样式的引入

优先级：

行内式 > 内嵌式 > 外链式

行内样式：
<p style = "display:none"></p>

内嵌式
一般指<head>标签中的<style>样式

外链式
通过<link>标签引入外部的CSS文件

导入外部样式：
用@import在<head>与</head>间引入

CSS选择器

元素选择器：文档的元素就是最基本的选择器，如：p、h1、em、a
id选择器：配合元素的id属性，以‘#’ + id实现选择
类选择器：配合元素的class属性，以‘.’+className实现选择
属性选择器：对带有指定属性的HTML元素设置样式
派生选择器：通过依据元素在其位置的上下文关系来定义样式
自元素选择器：类似派生选择器，但是只能选择第一级子元素

CSS选择器权重计算

通常来说：

行内 > 内链 > 外部样式
ID > class > 元素

不同选择器有不同的权重：

第一等：代表内联样式，如：style=" "，权值为1000
第二等：代表ID选择器，如：#content，权值为0100
第三等：代表类、伪类和属性选择器，如：.content，权值为0010
第四等：代表类型选择器和伪元素选择器，如：div p，权值为0001
第五等：通配符、子选择器、相邻选择器等的，如：*、>、+，权值为0000
继承的样式没有权值
有时还会用到交集选择器

CSS属性

文字属性
符号属性
背景属性
连接属性
鼠标光标样式属性

CSS定位和浮动

定位通过使用position属性，可以选择4种不同类型的定位，这会影响元素框的生成的方式

positon属性值：
Static
Relative
Absolute
fixed

JavaScript

定义

JavaScript 是脚本语言，是一种轻量级的编程语言，时刻插入HTML的编程代码，插入HTML页面后，可由所有的现代浏览器执行，且很容易学习。

写入HTML输入

1 2	`document.write("<h1>This is a heading</h1>"); document.write("<p>This is a paragraph</p>");`

前端验证逻辑——事件

点击事件（onclick）调用js函数验证常用于点击提交按钮后，验证提交内容是否符合标准
离开输入框（onchange）调用js函数验证常用语注册页面，修改信息页面的固定格式
如：电话、身份证号、邮箱等有固定格式的内容。

对事件做出反应

1	`<button type="button" onclick="alert('Welcome!')" name="button">button</button>`

改变HTML内容

1
2
3

x=document.getElementById("demo");  // 找到元素
x.innerHTML="Hello javascript"; // 改变text内容
x.style.color="#ff0000";  //该百年样式

补充知识

isNaN

isNaN()函数用于检查其参数是否是非数字值。
eg: inNaN(x)

x is not a number: true
x in a number: false

利用JavaScript获取coockie

代码：

<script>
  function getCookie(name) {
    var arr,reg=new RegExp("(^|)"+name+"=([^;]*)(;|$");
    if(arr=document.cookie.match(reg))
      return unescape(arr[2]);
    else
      return null;
  }
  alert(getCookie("user"));
</script>

练习质数生成编写

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Print prime number</title>
  </head>
  <body>
    <script type="text/javascript">
      var flag=1;
      for(var i=1;i<=100;i++){
        flag=1; // Reset flag
        if(i>=2){
          for(var j=2;j<i;j++) {  // Judge weather a prime number
            if(i%j==0) {
              flag=0; break;
            }
          }
          if(flag==1){
            document.write("  "+i);
          }
        }
      }
    </script>
  </body>
</html>

练习斐波那契数列编写

代码执行结果

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Fibonacci</title>
  </head>
  <body>
    <h3>计算斐波那契数列第<a id="x">n</a>项</h3>
    第<a id="x">n</a>项为：<a id="result">无输出</a>
    <p><input type="text" id="input"></p><br>
    <script type="text/javascript">
      // 计算菲波纳数列的第n项：1,1,2,3,5,8,13,...,
      function Fibonacci() {
        var temp1=0;
        var temp2=0;
        var n=0;
        input = document.getElementById("input").value; // The number of the digit
        for(var i=0; i <= input; i++) {
          if(i==0){
            n=0;
          }else if(i==1) {
            n=1;
          }else if(i==2) {
            temp1=0;  temp2=1;
            n=temp1+temp2;
            temp1=temp2;
            temp2=n;
          }else if(i>2) {
            n=temp1+temp2;
            temp1=temp2;
            temp2=n;
          }
          document.getElementById("x").innerHTML=input;
          document.getElementById("result").innerHTML=n;
        }
      }
    </script>
    <button type="button" name="button" onclick="Fibonacci()">Calculate</button>
  </body>
</html>

学习平台链接

W3C官网