JavaScript front-end basis of (a)

I. Introduction

JavaScript concept

JavaScript is a lightweight programming language that can be inserted into an HTML page, the code is transmitted to the browser execution.

JavaScript action:

1. Fill or modify content in HTML
2. Modify the style HTML content
3. The web browser in response to events occurring

JavaScript references

If the JavaScript code in an HTML document, you must write between <script> and </ script> tag

<script>
  // 在这里写你的JS代码
</script>

Can also be written as a separate js file, then there is referenced in HTML documents

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

Two. JavaScript syntax foundation

The results output

1. Use window.alert () pop-up warning box.
2. Using document.write () method to write the contents of an HTML document.
3. Using innerHTML to write HTML elements.
4. Use console.log () is written to the browser console.

window.alert()
Pop-up alert box displays the contents

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

document.write()

<script>
document.write(Date());
</script>

innerHTML

<p id="demo">我的第一个段落</p>
<script>
document.getElementById("demo").innerHTML = "段落已修改。";
</script>

document.getElementById ( "demo") is used to find the id attribute HTML elements;
the innerHTML =. "Paragraph modified" HTML element is used to modify the contents of the element

console.log()

<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>

Language Specification

Notes
JavaScript does not execute comments.
We can add comments to explain to JavaScript, or improve code readability.

Single-line comments begin with //
multi-line comments begin with / * to * / end

Clause
in JavaScript statements to a semicolon (;) as a terminator.

Variable declaration

var keyword to declare a variable, you can declare many variables in a statement. The statement starts with var, and you can use a comma-separated variable:

var lastname="Doe", age=30, job="carpenter";

Variable naming convention:

• Variables must begin with a letter
• Variables can also start with $ and _ symbols (though we do not recommend it)
• Variable names are case sensitive (y and Y are different variables)

JavaScript variables can be used to store a value (for example, x = 5) and the expression (such as z = x + y)

注意Variable declared but not assigned in JavaScript, the value of all its variables are "undefined"

type of data

Like the python are dynamic JavaScript language, variables can change the type of its value at any time.

Numerical

JavaScript does not distinguish between integer and floating-point type, there is only one digital type.

String

String representation in quotation marks, it is recommended to use double quotes.

Common method

method	Explanation
.length	Returns the length
.trim()	Remove blank
.trimLeft()	Remove the white space on the left
.trimRight()	Remove the white space on the right
.charAt(n)	Returns n characters
.concat(value, …)	splice
.indexOf(substring, start)	Subsequence position
.substring(from, to)	The acquisition sequence index
.slice(start, end)	slice
.toLowerCase()	lower case
.toUpperCase()	capital
.split(delimiter, limit)	Split

You can keep up with the string method name, such as

"panks".length

The string can also be assigned to variables, the method name followed by variables such as

var name="panks"
name.length

In order to facilitate verification method, directly open the browser developer console window for editing
concat concatenate strings

note
string.slice (start, stop) and string.substring (start, stop):

两者的相同点：
如果start等于end，返回空字符串
如果stop参数省略，则取到字符串末
如果某个参数超过string的长度，这个参数会被替换为string的长度

substirng()的特点：
如果 start > stop ，start和stop将被交换
如果参数是负数或者不是数字，将会被0替换

silce()的特点：
如果 start > stop 不会交换两者,直接显示空
如果start小于0，则切割从字符串末尾往前数的第(start)个的字符开始(包括该位置的字符),且stop只能表示为末尾往前数第(start)个后的字符
如果stop小于0，则切割在从字符串末尾往前数的第abs(stop)个字符结束(不包含该位置字符)且start只能表示为末尾往前数第(st)个前的字符

布尔值

区别于Python，true和false都是小写。
var a = true;
var b = false;

""(空字符串)、0、null、undefined、NaN都表示false

数组

数组对象的作用是：使用单独的变量名来存储一系列的值。类似于Python中的列表。

var a = [123, "ABC"];
console.log(a[1]);  // 输出"ABC"

常用方法：

方法	说明
.length	数组的大小
.push(ele)	尾部追加元素
.pop()	获取尾部的元素
.unshift(ele)	头部插入元素
.shift()	头部移除元素
.slice(start, end)	切片
.reverse()	反转
.join(seq)	将数组元素连接成字符串
.concat(val, …)	连接数组
.sort()	排序
.forEach()	将数组的每个元素传递给回调函数
.splice()	删除元素，并向数组添加新元素。
.map()	返回一个数组元素调用函数处理后的值的新数组

Through the elements of the array, may be used in the following manner:

var a = [10, 20, 30, 40];
for (var i=0;i<a.length;i++) {
  console.log(a[i]);
}

Objects

Objects are represented by braces, brackets in the form of an internal attribute of the object in the key (name: value) is defined for each attribute separated by commas:

var person={firstname:"John", lastname:"Doe", id:5566};

Object Properties There are two addressing modes:

name=person.lastname;
name=person["lastname"];
#也可以将字符串赋值给变量,变量在[]中无需引号

Operators

Arithmetic operators

+ - * / % ++ --

Comparison Operators

> >= < <= != == === !==

注意:
1 == “1” // true
1 === “1” // false

Logical Operators

&& || !

Assignment Operators

= += -= *= /=

Process Control

Analyzing single if-else

var a = 10;
if (a > 5){
  console.log("yes");
}else {
  console.log("no");
}

The multilayer determined if-else if-else

var a = 10;
if (a > 5){
  console.log("a > 5");
}else if (a < 5) {
  console.log("a < 5");
}else {
  console.log("a = 5");
}

Analyzing multilayer switch

var day = new Date().getDay();
switch (day) {
  case 0:
  console.log("Sunday");
  break;
  case 1:
  console.log("Monday");
  break;
default:
  console.log("...")
}

switch in the case clause usually add a break statement, otherwise the program will continue in subsequent case statements.

for loop

for (var i=0;i<10;i++) {
  console.log(i);
}

while loop

var i = 0;
while (i < 10) {
  console.log(i);
  i++;
}

Ternary operator

var a = 1;
var b = 2;
var c = a > b ? a : b

function

Function definition

JavaScript Functions and Python is very similar, but somewhat different definition of the way.

// 普通函数定义
function f1() {
  console.log("Hello world!");
}

// 带参数的函数
function f2(a, b) {
  console.log(arguments);  // 内置的arguments对象
  console.log(arguments.length);
  console.log(a, b);
}

// 带返回值的函数
function sum(a, b){
  return a + b;
}
sum(1, 2);  // 调用函数

// 匿名函数方式
var sum = function(a, b){
  return a + b;
}
sum(1, 2);

// 立即执行函数
(function(a, b){
  return a + b;
})(1, 2);

Global and local variables

Local variables:
variable declared inside a JavaScript function (using var) is a local variable, so it can only be accessed inside the function (the scope of the variable is the internal function). As long as the function is completed, the variable will be deleted.

Global variables:
Variables declared outside a function are global variables, all scripts and functions can access it on the page, the page is closed, with a variable will be deleted

注意
First, look for variables inside a function when the function is executed, the outer function can not find it to look, and gradually find the outermost layer.