One of JavaScript study entry - primary grammar

JavaScript is a programming language front-end editing (different from html, html is a markup language), so other programming languages, we will learn from the following points

  • Basic grammar
  • type of data
  • function
  • Object-Oriented
JavaScript composition

In fact, a complete JavaScript is comprised of three distinct parts of

  • Core (ECMAScript)
  • Document Object Model (DOM), Document object model, the integration of JS, CSS and Html
  • Browser Object Model (BOM), Broswer object model, integrated browser and JS

Simply put, ESMAScript describes the JavaScript language itself relevant content, it has the following features:

  • JavaScript is a scripting language
  • JavaScript is a lightweight programming language
  • JavaScript is a programming code may be inserted in the Html
  • JavaScript into a browser in the future, may be performed by all modern browsers
JavaScript manner of introduction

Written inside the script tag

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        alert(' Playing out window ' )
     </ Script > 
</ body > 
</ HTML >

JS wrote in a separate file and import in html

The first to write a file 1.js

##########1.js##########
Alert ( 'pop-up window')

You can then import this file in html file

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
    <script src="1.js"></script>
<body>
</body>
</html>
The basic syntax of JavaScript

Note

// a single line comment 
/ *
Multi-line comments
*/

Terminator

JavaScript statements to a semicolon (;) end, but the C language different, the terminator is not necessary, but the proposal is still together, because sometimes go wrong.

Variable declaration

JavaScript variable names can use an underscore _, numbers, titles, and $ specifier, but can not start with a number.

When variable declaration to use var to declare

var name = 'string' ;
 var value = 123;

Another point to note is that variable names are to be case sensitive. It is recommended to use camel naming conventions.

There are variables in JavaScript is dynamically typed, which means you can store the same variable names are different types of data

JavaScript data types

As I said earlier, JavaScript is dynamically typed can have

var X;           // X is underfined 
var X =. 1;       // X is a number 
var X = 'ABC'    // X is a string

Digital Type

JavaScript is in part int and float only a digital type.

There are a = 1
 has B = 12:34
 has c = 123e4
 has d = 123e4

Another data is NaN, represents not a number (Not a Number)

Its common method string

method Explanation
.length Returns a string length value
.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(start,end) The acquisition sequence index
.slice(start,end) slice
.toLowerCase() Converted to lowercase
.toUpperCase() Converted to uppercase
.split (delimiter, bonded) Split

It should be noted here that slice (slice) and the difference between the return sequences (substring) of

Take a look at the similarities between the two:

If the start and end equal to empty string is returned

If the stop parameter is omitted, the string is returned to the end of the string

If a parameter exceeds the length of the string, this parameter is replaced by the length of the string

Then look at the difference between the two

substring features:

If start> end of the two start and end values ​​are swapped

If a parameter is negative, it will be replaced with 0 (-1 slice is permitted at the end of the last character)

silce features:

If start> end when both are not exchanged (returns an empty string)

If the start is less than 0, then the string of the slice started forward low start number (including the location) from the end of the string

If the end is less than 0, Buddha's self from the forward end of the end character number of ends (not including this position)

Segmentation features

Divided according to the length delimiter string, it returns a list, which is the value of the limit.

Boolean

Boolean and Python are not the same, true and false are lowercase

var a = true;
var b = false;

空字符串(‘’,不是‘ ’)、0、null、underfined、NaN都是false。

数组及其常用方法

数组和Python中的list列表相似,

var a = [0,1,2,3];

看看数组的常用方法

方法 说明
.length 数组大小
.push(ele) 尾部追加元素
.pop() 删除末尾元素并返回该值
.unshift(ele) 头部插入元素
.shift 删除第一个元素并返回该值
.slice(start,end) 切片
.reverse() 反转
.join(seq) 连接
.concat(val,...) 将数组元素连接成字符串
.sort() 排序

要注意的是几点:

1.不能想Python中的列表一样直接切片

a = [1,2,3,4,5]
//注意下面的方法是错误的
a[2:3]

2.join的时候和Python里是反的,先看看Python里的方法

>>> a = ['a','b','c']
>>> '+'.join(a)
'a+b+c'

再看看JS里的方法

a = ['a','b','c']
(3) ["a", "b", "c"]
a.join('+')
"a+b+c"

3.sort方法的使用事项

如果sort在调用的时候没有参数传入,则会按数组中元素的字符编码的顺序进行排序。

如果想按照其他的标准来进行排序,就需要提供比较函数,该函数要比较两个值,然后返回一个用于说明这两个值,然后返回一个用于说明这两个值相对顺序的数字,比较函数应该具有两个参数a和b,其返回值如下:

若a小于b,在排序后的数组中a应该出现在b之前,则返回一个小于0的值。

若a等于b,则返回0.

若a大于b,则返回一个大于0的值。

>function sortNumber(a,b){
    return a-b
}
<undefined
>var a = [1,3,2,4]
<undefined
>a.sort(sortNumber)
<(4) [1, 2, 3, 4]

4.数组的遍历

可以用for循环来对数组进行遍历

>var a = [1,2,3,4]
<undefined
>for (var i=0;i<a.length;i++){
    console.log(i);
}
VM1843:2 0
VM1843:2 1
VM1843:2 2
VM1843:2 3
undefined

null和underfined

null表示值是空,一般在需要指定或清空一个变量时候才会使用,比方下面的

>name = null
<null
>name
<"null"

而underfined表示当一个变量被声明但没初始化的时候,改变量的默认值为underfined,还有就是函数无明确的返回值时(var一个值但是没有赋值操作),返回的也是underfined。

类型查询

类型查询可以用下面的方式进行

typeof 'abc'
typeof 123
typeof null
typeof true

typeof是一个一元运算符,就像++,!,--一样,不是一个函数,也不是一个语句

有些变量或值调用typeof运算后会有下面的返回值

数组、null的返回值是object

undefined的返回值是undefined

运算符

算数运算符

+
-
*
%
++
--

比较运算符

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

这里可能对==和===有些疑问,我们看看下面的代码

>1=='1'
<true
>1==='1'
<false

也就是说==是不考虑数据类型的,而===是强等,会对数据类型一同进行比较

逻辑运算符

&&      //
||      //
!       //

赋值运算符

=
+=
-=
*=
/=
流程控制

if-else

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

switch判断

switch (day){
    case 0:
        console.log('Sunday');
        break;
    case 1:
        console.log('Monday');
        break;
    default:
        console.log('...');
}

通常switch里的case后都会加上break,否则会执行后续case里的语句。

for循环

>var a = [1,2,3,4]
<undefined
>for (var i=0;i<a.length;i++){
    console.log(i);
}

这个for循环的结构和C语言中类似。

while循环

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

和for循环一样,while循环和C语言中的while循环结构一样。

三元运算

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

Guess you like

Origin www.cnblogs.com/yinsedeyinse/p/12076907.html