Web1.0

静态页面 - 仅仅供用户浏览而没有跟服务器进行数据交互的页面

网页三剑客，指的是Dreamweaver、Fireworks和Flash 上一个互联网时代的产物

代码冗余、可读性差、维护困难等

网页制作

Web2.0

2005年开始

网页可以分为两种：一种是静态页面，另外一种是动态页面

HTML、CSS和JavaScript，也叫“新三剑客”

HTML 超文本标记语言描述性语言

CSS Cascading Style Sheet（层叠样式表）网页外观

JavaScript JS 脚本语言

把“前端开发”看成是“建房子”，做一个网页就像盖一栋房子。建房子的时候，我们都是先把结构建好（HTML）。建好之后，再给房子装修（CSS），例如给窗户装上窗帘、给地板铺上瓷砖等。最后装修好了，当夜幕降临之时，我们要开灯（JavaScript）才能把屋子照亮。

前端最核心的技术是HTML、CSS和JavaScript

jQuery、Vue.js、SEO、性能优化等

后端开发

PHP

JSP

ASP.NET

前端构建工具:webpack、gulp、babel、express

不少技术之间都有着交叉关系，只有“通”十行才可能做到“精”一行。

JavaScript

HTML 定义了网页的内容

CSS 描述了网页的布局

JavaScript 控制了网页的行为

轻量级

#　直接写入 HTML 输出流
document.write("<h1>这是一个标题</h1>");
#　对事件的反应
<button type="button" onclick="alert('欢迎!')">点我!</button>
# 改变 HTML 内容
x=document.getElementById("demo");  //查找元素
x.innerHTML="Hello JavaScript";    //改变内容
# 改变 HTML 图像
<script>
function changeImage()
{
    element=document.getElementById('myimage')
    if (element.src.match("bulbon"))
    {
        element.src="/images/pic_bulboff.gif";
    }
    else
    {
        element.src="/images/pic_bulbon.gif";
    }
}
</script>
<img loading="lazy" id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180">
# 改变 HTML 样式
x=document.getElementById("demo")  //找到元素 
x.style.color="#ff0000";           //改变样式
# 验证输入 

if(isNaN(x)||x.replace(/(^\s*)|(\s*$)/g,"")==""){
    alert("不是数字");
}

JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。

或者的JavaScript

外部的 JavaScript

<script src="myScript.js"></script>

调试代码

F12

Console 窗口调试 JavaScript 代码

console.log("runoob-1")

Chrome snippets 小脚本

JavaScript 输出

# 使用 window.alert() 弹出警告框。
<script>
window.alert(5 + 6);
</script>
# 使用 document.write() 方法将内容写到 HTML 文档中
<script>
document.getElementById("demo").innerHTML = "段落已修改。";
</script>
# 使用 innerHTML 写入到 HTML 元素。
<script>
document.getElementById("demo").innerHTML = "段落已修改。";
</script>
# 使用 console.log() 写入到浏览器的控制台
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>

字面量

数字（Number）字面量

字符串（String）字面量

数组（Array）字面量

对象（Object）字面量

函数（Function）字面量

var

操作符

JavaScript 语句

// 我不会执行注释

JavaScript 使用 Unicode 字符集。

数据类型

值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。

引用数据类型：对象(Object)、数组(Array)、函数(Function)。

访问对象属性

person.lastName;

person["lastName"];

<script>
var person = {
    firstName: "John",
    lastName : "Doe",
    id : 5566,
    fullName : function() 
	{
       return this.firstName + " " + this.lastName;
    }
};
document.getElementById("demo").innerHTML = person.fullName();
</script>

JavaScript 事件

<some-HTML-element some-event='JavaScript 代码'>

事件描述

onchange HTML 元素改变

onclick 用户点击 HTML 元素

onmouseover 用户在一个HTML元素上移动鼠标

onmouseout 用户从一个HTML元素上移开鼠标

onkeydown 用户按下键盘按键

onload 浏览器已完成页面的加载

JavaScript 字符串

单引号或双引号

转义字符 () 可以用于转义撇号，换行，引号，等其他特殊字符。

字符串可以是对象

=== 为绝对相等，即数据类型与值都必须相等。

JavaScript 运算符

算术运算符

赋值运算符

用于字符串的 + 运算符

比较运算符

逻辑运算符

条件运算符

条件语句

if 语句

switch 语句

JavaScript 循环

For 循环

while 循环

do/while 循环

typeof 操作符

JavaScript 数据类型

在 JavaScript 中有 6 种不同的数据类型：

string
number
boolean
object
function
symbol

3 种对象类型：

Object
Date
Array

2 个不包含任何值的数据类型：

null
undefined

constructor 属性

JavaScript 类型转换

String(x) toString()

JavaScript 正则表达式

/正则表达式主体/修饰符(可选)

search() 和 replace()

正则表达式模式

表达式

元字符

量词

exec()

test()

JavaScript 错误 - throw、try 和 catch

在程序代码中寻找错误叫做代码调试。

JavaScript 声明提升

JavaScript 严格模式(use strict)

服务端数据验证是在数据提交到服务器上后再验证。

客户端数据验证是在数据发送到服务器前，在浏览器上完成验证。

Web前端笔记