前端语法整理

前言

很久都没有更新随笔了，一方面这段时间自己确实有所懈怠，另一方面确实最近工作中的事情多而杂，没有好好沉下来专注一方面的成长。其实这段时间，也并不是毫无所获，还是发表了一些比较系统的文章（比如“大数据测试环境全量迁移docker之路”），在公司内部的论坛里，由于涉及一些关键技术和敏感信息，所以不便在此发表。另外，这段时间学习了spring-boot开发的一些知识，并将之前的关于java基础和设计模式、以及jvm虚拟机相关的内容做了整理，放到自己的个人github上：https://github.com/znifeng。

最近在负责开发组里的一个“大数据测试平台”，用的是spring-boot，由于经常性地要查一些前端语法，因此索性将前段时间学习的前端相关知识整理于此，同时想借此篇开启2018年的博客之旅。

一、HTML

参考地址：w3school_html

1.basic

<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

!DOCTYPE声明了doc type为HTML5
body中的内容才是可见的
h1～h6为标题，h1为最大

2.超链接

<a href="https://www.w3schools.com">This is a link</a>

3.图片

<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">

4.空行（不需要end tag）

<br>

5.attributes
属性提供了关于元素的额外信息，定义在start tag中，类似name="value"

href：链接地址
src：图片地址
图片宽度(pixel)
height: 图片高度(pixel)
alt: 图片显示不出时，显示的替代文本

6.水平线

<hr>

7.head元素
置于html和body元素之间，定义html文件的元数据（metadata）

<!DOCTYPE html>
<html>

<head>
  <title>My First HTML</title>
  <meta charset="UTF-8">
</head>

<body>

8.styles

定义元素的格式。基本格式:

<tagname style="property:value;">

其中property为CSS属性，value为CSS值。

<!--背景颜色-->
<body style="background-color:powderblue;"> 
<!--字体颜色-->
<p style="color:red;">I am red</p>
<p style="color:blue;">I am blue</p>
<!--字体大小-->
<p style="font-size:36px;">I am big</p>
<p style="font-size:160%;">I am big</p>
<!--字体格式-->
<p style="font-family:courier;">I am big</p>
<!--对齐方式-->
<p style="text-align:center;">Centered paragraph.</p>
</body>

9.formatting

<b> - Bold text
<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
<small> - Small text
<del> - Deleted text
<ins> - Inserted text （下划线）
<sub> - Subscript text（下标）
<sup> - Superscript text（上标）

10.quatation 引用

<!-- q -->
<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p>
<p>Here is a quote from WWF's website:</p>

<!-- blockquote -->
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature.
The world's leading conservation organization,
WWF works in 100 countries and is supported by
1.2 million members in the United States and
close to 5 million globally.
</blockquote>

11.Color
https://www.w3schools.com/html/html_colors.asp

<!--background -->
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:Tomato;">Tomato</h1>
<h1 style="background-color:Orange;">Orange</h1>
<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>
<h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>
<h1 style="background-color:Gray;">Gray</h1>
<h1 style="background-color:SlateBlue;">SlateBlue</h1>
<h1 style="background-color:Violet;">Violet</h1>
<h1 style="background-color:LightGray;">LightGray</h1>
</body>
</html>

<!--text -->
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>

<!--border -->
<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>

<!--using RGB, HEX, HSL, RGBA, HSLA-->
<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>

12.CSS

Inline CSS

<h1 style="color:blue;">This is a Blue Heading</h1>

Internal CSS

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Extennal CSS (recommend)

test.html:

<!DOCTYPE html>
<html>
<head>
<!-- 本地引入与website同目录的styles.css文件 -->
  <link rel="stylesheet" href="styles.css">
<!-- 本地引入与website目录相对路径的styles.css文件 -->  
  <link rel="stylesheet" href="/html/styles.css">
<!-- 外部引入css -->
  <link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

styles.css:

body {
    background-color: powderblue;
}
h1 {
    color: blue;
}
p {
    color: red;
}

/* for an element with id "p01" */
#p01 {
    color: blue;
}

/* for elements with class "error" */
p.error {
    color: red;
}

13.table

<table style="100%">
  <caption>User Info</caption>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>

tr: a table row
th: a table head
td: a table data/cell
caption：标题

14.javascript

example1: show date

<!DOCTYPE html>
<html>
<body>

<h1>My First JavaScript</h1>

<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.</button>

<p id="demo"></p>

</body>
</html>

example2: change style and content

<!DOCTYPE html>
<html>
<body>

<h1>My First JavaScript</h1>

<p>JavaScript can change the content of an HTML element:</p>

<button type="button" onclick="myFunction()">Click Me!</button>

<p id="demo">This is a demonstration.</p>

<script>
function myFunction() { 
    document.getElementById("demo").innerHTML = "Hello JavaScript!";
     document.getElementById("demo").style.fontSize = "25px"; 
    document.getElementById("demo").style.color = "red";
    document.getElementById("demo").style.backgroundColor = "yellow";
}
</script>

</body>
</html>

example3: change attribute

<!DOCTYPE html>
<html>
<body>
<script>
function light(sw) {
    var pic;
    if (sw == 0) {
        pic = "pic_bulboff.gif"
    } else {
        pic = "pic_bulbon.gif"
    }
    document.getElementById('myImage').src = pic;
}
</script>

<img id="myImage" src="pic_bulboff.gif" width="100" height="180">

<p>
<button type="button" onclick="light(1)">Light On</button>
<button type="button" onclick="light(0)">Light Off</button>
</p>

</body>
</html>

15.using bootstrap CSS

<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

16.form表单提交

Test input:

<form action="/action/api">
  First name:<br>
  <input type="text" name="firstname" value="Mickey">
  <br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse">
  <br><br>
  <input type="submit" value="Submit">
</form> 
<p>If you click the "Submit" button, the form-data will be sent to a page called "/action/api".</p>

Radio Button input:

<form>
  <input type="radio" name="gender" value="male" checked> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="radio" name="gender" value="other"> Other  
</form>

Select input:

<form action="/action_page.php">
  <select name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
  </select>
  <br><br>
  <input type="submit">
</form>

Multiple Select:

<select name="cars" size="4" multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

textarea:

<form action="/action_page.php" target="_blank" method="get">
  <textarea name="message" rows="10" cols="30">The cat was playing in the garden.</textarea>
  <br>
  <input type="submit">
</form>

target="_blank" ：默认会在当前窗口进行跳转。如果加上此属性，会打开一个新的空白窗口进行跳转。

method="get"或method="post"：限定http请求的方法

必须包含name属性，否则数据不会被发送

二、CSS

A CSS rule-set consists of a selector and a declaration block:

1.Selector

(1) element selector

p {
    text-align: center;
    color: red;
}

(2) id selector

#para1 {
    text-align: center;
    color: red;
}

(3) class selector

.center {
    text-align: center;
    color: red;
}
/* 只针对<p>生效 */
p.center {
    text-align: center;
    color: red;
}
/* group selectors */
h1, h2, p {
    text-align: center;
    color: red;
}

2.multiple stytle sheets

如果一个元素在多个css文件中被定义了属性，则会使用最后一个加载的css文件的值

三、JavaScript

1.在HTML中，JS代码插入在块中。可以插入多个js脚本，可以放在body中也可以放在head中，或者both。

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>

<button type="button" onclick="document.getElementById('demo').style.fontSize='35px'">Click Me!</button>

2.外部加载js代码的方式

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

外部的js脚本不能包含script tag：

function myFunction() {
   document.getElementById("demo").innerHTML = "Paragraph changed.";
}

外部脚本的引用可以使用完整的URL，或者一个相对路径。

<script src="https://www.w3schools.com/js/myScript1.js"></script>
<script src="/js/myScript1.js"></script>
<script src="myScript.js"></script>

3.display

Writing into an HTML element, using innerHTML.
Writing into the HTML output using document.write(). ——only for testing
Writing into an alert box, using window.alert().
Writing into the browser console, using console.log(). --for debugging purposes

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
<p>My First Paragraph</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>

<script>
document.write(5 + 6);
</script>

<script>
window.alert(5 + 6);
</script>

<script>
console.log(5 + 6);
</script>

</body>
</html>

4.在HTML中，JavaScript程序是由浏览器来执行。

JS Statements组成：

Values
Operators
Expressions
Keywords
Comments

4.1 Values

常量：

数字: 10.50、1001
字符："zni"、'zni'

变量：

//没有赋值的变量默认值为undefined
var x;
//赋值参数
x = 6;
//在一行中声明多个变量
var person = "John Doe", carName = "Volvo", price = 200;

4.2 Operators

( + - * / ) =

//x1="John Doe"
var x1 = "John" + " " + "Doe";
//x2=10
var x2 = 5 + 2 + 3;
//x3="523"
var x3 = "5" + 2 + 3;
//x4="55"
var x4 = 2 + 3 + "5";

Operator	Description
+	Addition
-	Subtraction
*	Multiplication
/	Division
%	Modulus (Remainder)
++	Increment
--	Decrement
==	equal to
===	equal value and equal type
!=	not equal
!==	not equal value or not equal type
>	greater than
<	less than
>=	greater than or equal to
<=	less than or equal to
?	ternary operator
&&	logical and
`\|\|`	logical or
!	logical not
typeof	Returns the type of a variable
instanceof	Returns true if an object is an instance of an object type

位操作：

4.3 Expressions

一条表达式由values和operators组成

4.4 Keywords

关键字，如var

4.5 Comments

注释

var x = 5;   // I will be executed
// var x = 6;   I will NOT be executed

4.6 Identifiers标识符

identifier: values（keywords、functions、labels）的命名

规则：

以字母或下划线或$开头
后面跟字母、数字、下划线或$
区分大小写
不允许出线中划线-，专门用作减法操作符

推荐写法：firstName，小写字母开头的驼峰式命名

5.关键字keywords

Keyword	Description
break	Terminates a switch or a loop
continue	Jumps out of a loop and starts at the top
debugger	Stops the execution of JavaScript, and calls (if available) the debugging function
do ... while	Executes a block of statements, and repeats the block, while a condition is true
for	Marks a block of statements to be executed, as long as a condition is true
function	Declares a function
if ... else	Marks a block of statements to be executed, depending on a condition
return	Exits a function
switch	Marks a block of statements to be executed, depending on different cases
try ... catch	Implements error handling to a block of statements
var	Declares a variable

6.注释

// Change heading:

/*
The code below will change
the heading with id = "myH"
and the paragraph with id = "myP"
in my web page:
*/

7.data types

var length = 16;                               // Number
var lastName = "Johnson";                      // String
//Object properties are written as name:value pairs, separated by commas.
var x = {firstName:"John", lastName:"Doe"};    // Object
//first item is [0], second is [1], and so on.
var cars = ["Saab", "Volvo", "BMW"];           // Arrays,

typeof操作符

typeof ""                  // Returns "string"
typeof "John"              // Returns "string"
typeof "John Doe"          // Returns "string"

undefined和 null的区别

typeof undefined           // undefined
typeof null                // object

null === undefined         // false
null == undefined          // true

8.function

function name(parameter1, parameter2, parameter3) {
    code to be executed
}

function toCelsius(f) {
    return (5/9) * (f-32);
}
//返回函数结果25
document.getElementById("demo").innerHTML = toCelsius(77);
//返回函数的object本身：function toCelsius(f) { return (5/9) * (f-32); }
//document.getElementById("demo").innerHTML = toCelsius;

9.object

var person = {
    firstName : "John",
    lastName  : "Doe",
    age       : 50,
    eyeColor  : "blue",
    //method
    fullName : function() {
       return this.firstName + " " + this.lastName;
    }
};

document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
//call method
document.getElementById("demo").innerHTML = person.fullName();

10.域：local 和 global

大部分同一般的变成语言
注意：没有用var声明的变量，如果被直接赋值，会自动成为全局变量

myFunction();

// code here can use carName as a global variable
document.getElementById("demo").innerHTML = "I can display " + carName;

function myFunction() {
    carName = "Volvo";
}

变量生命周期：

从变量声明开始，local变量会在函数完成时被删除，全局变量会在浏览器窗口关闭时被删除。

11.Events

An HTML web page has finished loading
An HTML input field was changed
An HTML button was clicked

<element event='some JavaScript'>
<element event="some JavaScript">

button


<! --change element content -->
<button onclick="this.innerHTML = Date()">The time is?</button>

<! -- change this -->
<button onclick="displayDate()">The time is?</button>

<! -- call function -->
<button onclick="displayDate()">The time is?</button>

<script>
function displayDate() {
    document.getElementById("demo").innerHTML = Date();
}
</script>

Event	Description
onchange	An HTML element has been changed
onclick	The user clicks an HTML element
onmouseover	The user moves the mouse over an HTML element
onmouseout	The user moves the mouse away from an HTML element
onkeydown	The user pushes a keyboard key
onload	The browser has finished loading the page

12.转义字符

Code	Outputs
'	single quote
"	double quote
	backslash
	Backspace
f	Form Feed
	New Line
	Carriage Return
	Horizontal Tabulator
v	Vertical Tabulator

13.String Methods

方法	作用
txt.length	返回长度
txt.indexOf("hello")	返回第一次出现hello的index（从0开始）。如果不存在，则返回-1
txt.lastIndexOf("hello")	同上，返回最后一次出现hello的index
txt.search("hello")	类似indexOf，区别是search可以接受正则，而且不支持第二个参数来定义查找的起始index
txt.slice(start,end)	提取字符串
txt.substring	同上，区别是不能接受负数
txt.substr(start，length)	同slice，区别是第二个参数规定长度
txt.replace("hello", "hi")	把hello替换成hi，默认只替换第一个hello。区分大小写
txt.replace(/HELLO/i, "hi")	同上，不区分大小写
txt.toUpperCase()	转为大写
txt.toLowerCase()	转为小写
txt.concat(a,b,c)	在txt字符后再连接多个字符，此处a，b，c都是变量
txt.charAt(i)	提取第i个字符，不推荐使用txt[i]的方式，unsafe
txt.charCodeAt(i)	提取第i个字符的unicode
txt.split(",")	以逗号分割字符串成array

14.RegExp 正则表达式

/pattern/modifiers

var str = "Visit Microsoft!";
var res = str.replace(/microsoft/i, "W3Schools");

Modifiers修饰符：

Modifier	Description
i	忽略大小写
g	全局匹配
m	多行匹配

Patterns模型

Patterns	Description
[abc]	匹配中括号中的任一字符
[0-9]	匹配任一数字
(x	y)
d	代表一个数字
s	代表一个空格字符
n+	代表至少一个n字符
n*	代表0或多个n
n?	代表0或1个n

test()：正则表达式方法

patt.test(str)：判断str字符串中是否包含正则表达式patt，返回true或false

exec()：正则表达式方法
patt.exec(str)：判断str字符串中是否包含正则表达式patt，如果存在，则返回patt，否则返回null

完整正则参考：https://www.w3schools.com/jsref/jsref_obj_regexp.asp

四、jQuery

1.jQuery: a JavaScript Library
2.Basic syntax：

 $(selector).action()

3.jQuery uses CSS syntax to select elements. Examples：

$(this).hide() - hides the current element.

$("p").hide() - hides all <p> elements.

$(".test").hide() - hides all elements with class="test".

$("#test").hide() - hides the element with id="test"

4.ready：等待document完全加载后，再进行jQuery代码的执行

$(document).ready(function(){

   // jQuery methods go here...

});

<!-- 为了简化写法，可以替换成下面的方式 -->
$(function(){

   // jQuery methods go here...

});

5.Selectors

6.functions in s separate file

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="my_jquery_functions.js"></script>
</head>

7.syntax for event methods:

click:

$("p").click(function(){
  // action goes here!!
});

double click:

$("p").dblclick(function(){
    $(this).hide();
});

mouse enter：鼠标移到某元素

$("#p1").mouseenter(function(){
    alert("You entered p1!");
});

mouse leave：鼠标离开

$("#p1").mouseleave(function(){
    alert("Bye! You now leave p1!");
});

mousedown()、mouseup()

hover()：combination of mouseenter() and mouseleave()

focus：表单的输入框正在输入时

$("input").focus(function(){
    $(this).css("background-color", "#cccccc");
});

blur：失去焦点时

8.effects

hide()
show()
toggle()：在hide和show之间切换

9.Callback

$("button").click(function(){
$("p").hide("slow", function(){
alert("The paragraph is now hidden");
});
});

例子中hide()方法传了两个额外参数，第一个“slow”规定了慢隐藏，第二个则是callback方法，该方法会在动作完全执行完成后被调用

10.chain链式调用

$("#p1").css("color", "red").slideUp(2000).slideDown(2000);

11.jQuery HTML

获取元素内容

<!--显示元素内容-->
$("#btn1").click(function(){
    alert("Text: " + $("#test").text());
});

<!--显示元素内容，包含html标签-->
$("#btn2").click(function(){
    alert("HTML: " + $("#test").html());
});


<!--显示表单元素的内容-->
$("button").click(function(){
    alert("Value: " + $("#test").val());
});

<p>Name: <input type="text" id="test" value="Mickey Mouse"></p>

获取属性attributes

$("button").click(function(){
    alert($("#w3s").attr("href"));
});

修改元素内容

$("#btn1").click(function(){
    $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
    $("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
    $("#test3").val("Dolly Duck");
});

$("button").click(function(){
    $("#w3s").attr({
        "href" : "https://www.w3schools.com/jquery",
        "title" : "W3Schools jQuery Tutorial"
    });
});

增加元素

append() - Inserts content at the end of the selected elements
prepend() - Inserts content at the beginning of the selected elements
after() - Inserts content after the selected elements
before() - Inserts content before the selected elements

删除元素

remove() - Removes the selected element (and its child elements)
empty() - Removes the child elements from the selected element

12.jQuery CSS

Methods	Description
addClass()	Adds one or more classes to the selected elements
removeClass()	Removes one or more classes from the selected elements
toggleClass()	Toggles between adding/removing classes from the selected elements
css()	Sets or returns the style attribute

<!-- 增加class -->
$("button").click(function(){
    $("h1, h2, p").addClass("blue");
    $("div").addClass("important");
});

<!-- 同时增加两个class：important 和 blue-->
$("button").click(function(){
    $("#div1").addClass("important blue");
});

<!-- 删除class -->
$("button").click(function(){
    $("h1, h2, p").removeClass("blue");
});

<!-- 获取css属性的值 -->
$("p").css("background-color");

<!-- 修改css属性的值 -->
$("p").css("background-color", "yellow");

<!-- 批量修改多个css属性的值 -->
$("p").css({"background-color": "yellow", "font-size": "200%"});

13.AJAX

参考：https://www.w3schools.com/jquery/jquery_ref_ajax.asp

AJAX = Asynchronous JavaScript and XML.

In short; AJAX is about loading data in the background and display it on the webpage, without reloading the whole page.

异步加载机制，使得浏览器可以在后端加载数据，然后更新部分页面，而不需要重新载入整个页面

load

$(selector).load(URL,data,callback);

$.get(URL,callback);

$("button").click(function(){
    $.get("demo_test.asp", function(data, status){
        alert("Data: " + data + "
Status: " + status);
    });
});

callback函数中的第一个参数是请求的内容，第二个参数是请求的状态。

post

$.post(URL,data,callback);

$("button").click(function(){
    $.post("demo_test_post.asp",
    {
        name: "Donald Duck",
        city: "Duckburg"
    },
    function(data, status){
        alert("Data: " + data + "
Status: " + status);
    });
});