JavaScript是前端编辑的一种编程语言(不同于html,html是一种标记语言),所以和其他的编程语言一样,我们将会从下面几点学习
- 基础语法
- 数据类型
- 函数
- 面向对象
JavaScript的组成
实际上一个完整的JavaScript是由下面三个不同的部分组成的
- 核心(ECMAScript)
- 文档对象模型(DOM),Document object model,整合了JS,CSS及Html
- 浏览器对象模型(BOM),Broswer object model,整合了JS和浏览器
简单的说,ESMAScript描述了JavaScript语言本身的相关内容,它有着下面一些特点:
- JavaScript是脚本语言
- JavaScript是一种轻量级的编程语言
- JavaScript是可以插入Html内的编程代码
- JavaScript插入浏览器以后,可以由所有的现代浏览器来执行
JavaScript的引入方式
写在script标签内部
<!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(‘弹个窗口出来‘) </script> </body> </html>
单独写在JS文件中并导入在html内
先写一个1.js文件
##########1.js########## alert(‘弹出个窗口‘)
然后可以把这个文件导入在html文件中
<!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>
JavaScript的基本语法
注释
//单行注释 /* 多行注释 */
结束符
JavaScript中的语句要以分号(;)结束,但这个C语言不同,这个结束符不是必须的,但是建议还是加上,因为有些时候会出问题。
变量声明
JavaScript的变量名可以使用下划线_,数字,字幕和$符组成,但不能以数字开头。
变量声明的时候要用var来声明
var name=‘字符串‘; var value=123;
还有一点要注意的是变量名是要区分大小写的。这里建议使用驼峰式的命名规则。
还有JavaScript里的变量是动态类型,也就是说同一个变量名可以存储不同类型是的数据
JavaScript的数据类型
就像前面说的,JavaScript是可以拥有动态类型的
var x; //x是underfined var x = 1; //x是数字 var x = ‘abc‘ //x是字符串
数字类型
JavaScript里是部分int和float的,只有一种数字类型。
var a = 1 var b = 12.34 var c = 123e4 var d = 123e-4
还有一种数据是NaN,表示不是一个数字(Not a Number)
字符串及其常用方法
方法 | 说明 |
.length | 返回字符串长度值 |
.trim() | 移除空白 |
.trimLeft() | 移除左边的空白 |
.trimRight() | 移除右边的空白 |
.charAt(n) | 返回第n个字符 |
.concat(value,...) | 拼接 |
.indexOf(substring,start) | 子序列位置 |
.substring(start,end) | 根据索引获取子序列 |
.slice(start,end) | 切片 |
.toLowerCase() | 转换为小写 |
.toUpperCase() | 转换为大写 |
.split(delimiter,limt) | 分割 |
这里要注意的就是切片(slice)和返回子序列(substring)的区别
先看看两者的相同点:
如果start和end相等,则返回空字符串
如果stop参数省略,则返回到字符串末尾的字符串
如果某个参数超出字符串的长度,这个参数会被替换为字符串的长度
那么再看看两者的不同
substring的特点:
如果start>end则start和end两个值会被交换
如果某个参数为负数,则会被0替换(切片是允许使用-1来表示末尾最后一个字符的)
silce的特点:
如果start>end时二者不会被交换(会返回一个空字符串)
如果start小于0,则切片从字符串末尾往前数的低start个字符串开始(包括该位置)
如果end小于0,则从自佛成末尾往前数的第end个字符结束(不包括该位置)
分割的特点
按照delimiter分割字符串,返回一个列表,列表的长度为limit的值。
布尔类型
布尔值和Python不太一样,true和false都是小写
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
原文地址:https://www.cnblogs.com/yinsedeyinse/p/12076907.html