JavaScript

Posted 2020-11-27 oeasys

一、javascript基础

JavaScript 书写用法

行内式的js直接写道元素的内部

1 <inout typer="button" value="唐伯虎" onclick="alert(‘秋香‘)">

 

内嵌式的js

 

1 <script>
2     alert("你好");
3 </script>

 

外部的js

1 <script src="my.js"></script>

 

JavaScript输入和输出语句

alert(msg)：浏览器弹出警示框

console.log(msg)：浏览器控制台打印输出信息

prompt(info)：浏览器弹出输入框，用户可以输入

 

变量

1、声明变量

 

//声明了一个age的变量
var age;
//赋值 把值存入这个变量中
age = 20;
//输出结果
console.log(age);

 

//声明并赋值，我们称为变量的初始化
var age = 20; //生命变量同时赋值为20

 

//声明多个变量
var age = 18,
    gz = 10000;

 

2、命名规范

 

 

 3、数据类型

//js的变量数据类型是只有程序运行过程中，根据等号右边的值来确定的
var length = 7;                             // 数字
var lastName = "Gates";                      // 字符串
var cars = ["Porsche", "Volvo", "BMW"];         // 数组
var x = {firstName:"Bill", lastName:"Gates"};    // 对象 

 

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

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

 

 

二、JavaScript运算符

JavaScript 算数运算符

运算符	描述	例子	x 运算结果	y 运算结果	在线实例
+	加法	x=y+2	7	5	实例 »
-	减法	x=y-2	3	5	实例 »
*	乘法	x=y*2	10	5	实例 »
/	除法	x=y/2	2.5	5	实例 »
%	取模（余数）	x=y%2	1	5	实例 »
++	自增	x=++y	6	6	实例 »
		x=y++	5	6	实例 »
--	自减	x=--y	4	4	实例 »
		x=y--	5	4	实例 »

JavaScript 赋值运算符

运算符	例子	等同于	运算结果	在线实例
=	x=y		x=5	实例 »
+=	x+=y	x=x+y	x=15	实例 »
-=	x-=y	x=x-y	x=5	实例 »
*=	x*=y	x=x*y	x=50	实例 »
/=	x/=y	x=x/y	x=2	实例 »
%=	x%=y	x=x%y	x=0	实例 »

JavaScript比较运算符

运算符	描述	比较	返回值	实例
==	等于	x==8	false	实例 »
		x==5	true	实例 »
===	绝对等于（值和类型均相等）	x==="5"	false	实例 »
		x===5	true	实例 »
!=	不等于	x!=8	true	实例 »
!==	不绝对等于（值和类型有一个不相等，或两个都不相等）	x!=="5"	true	实例 »
		x!==5	false	实例 »
>	大于	x>8	false	实例 »
<	小于	x<8	true	实例 »
>=	大于或等于	x>=8	false	实例 »
<=	小于或等于	x<=8	true	实例 »

JavaScript逻辑运算符

运算符	描述	例子
&&	and	(x < 10 && y > 1) 为 true
||	or	(x==5 || y==5) 为 false
!	not	!(x==y) 为 true

JavaScript类型运算符

运算符	描述
typeof	返回变量的类型。
instanceof	返回 true，如果对象是对象类型的实例。

JavaScript 位运算符

运算符	描述	例子	等同于	结果	十进制
&	与	5 & 1	0101 & 0001	0001	1
|	或	5 | 1	0101 | 0001	0101	5
~	非	~ 5	~0101	1010	10
^	异或	5 ^ 1	0101 ^ 0001	0100	4
<<	零填充左位移	5 << 1	0101 << 1	1010	10
>>	有符号右位移	5 >> 1	0101 >> 1	0010	2
>>>	零填充右位移	5 >>> 1	0101 >>> 1	0010	2

JavaScript条件运算符

语法

variable name=(condition)?value1:value2 

//如果变量 age 中的值小于 18，则向变量 voteable 赋值 "年龄太小"，否则赋值 "年龄已达到"。
voteable=(age<18)?"年龄太小":"年龄已达到";

 

 

三、JavaScript流程控制

JavaScript 分支

1 if (条件表达式)
2 {
3     //如果if条件为 true 时执行的代码
4     //如果if条件为false时则不执行大括号里面的语句
5 }

if 语句

 

if (条件) {
    //条件为 true 时执行的代码块
} else { 
    //条件为 false 时执行的代码块
}

else 语句

 

if (条件 1) {
    //条件 1 为 true 时执行的代码块
} else if (条件 2) {
    //条件 1 为 false 而条件 2 为 true 时执行的代码块
 } else {
    //条件 1 和条件 2 同时为 false 时执行的代码块
}

else if 语句

 

var name=(条件表达式) ? 表达式1 : 表达式2
//如果条件表达式结果为真，则返回表达式1的值
//如果条件表达式结果为假，则返回表达式2的值

三元运算符

 

switch(表达式n)
{
    case 1: //如果与表达式n成立，执行case 1，否则不执行case 1
        //执行代码块 1
        break;
    case 2: // //如果与表达式n成立，执行case 2，否则不执行case 2
        //执行代码块 2
        break;
    default:
        //如果表达式n与 case 1 和 case 2 都不成立时执行的代码
}
//如果 JavaScript 遇到 break 关键词，它会跳出 switch 代码块。
//default 关键词规定不存在 case 匹配时所运行的代码

Switch 语句

 

JavaScript 循环

for (i = 0; i < cars.length; i++) { 
    text += cars[i] + "<br>";
 }

/*
for (语句 1; 语句 2; 语句 3)
{
    被执行的代码块
}

语句 1 （代码块）开始前执行
语句 2 定义运行循环（代码块）的条件
语句 3 在循环（代码块）已被执行之后执行
**/

for 循环

 

while (条件)
{
    需要执行的代码
}

while 循环

 

do
{
    需要执行的代码
}
while (条件);

do/while 循环

 

 

break 语句“跳出”循环，循环结束

continue 退出本次循环，继续执行剩余次数循环

 

四、JavaScript数组

1、创建数组

1 //利用new创建数组
2 var arr = new Array(); //创建了一个空数组
3 
4 //利用数组字面量创建数组(数组字面量用方括号表示)
5 var arr = []; //创建了一个空数组
6 
7 var arr = [1,2,3,‘数组‘,1,true]; //声明数组并赋值成为数组的初始化
8 
9 //数组可以存放任意类型的数组

2、获取数组元素

索引（下标）：用来访问数组元素的序号（数组下标从0开始）

获取数组元素格式：数组名[索引号]

3、遍历数组

数组的长度：使用“数组名.length”可以访问数组元素的数量

1 var arr =[1,2,3,4,5,6,7];
2 for(var i = 0; i < arr.length; i++){
3   console.log(arr[i]);  
4 }

 

 

五、JavaScript函数

1、JavaScript 函数语法

function 函数名()
{
    // 函数体
}

 

var 变量名 = function(){};

//函数表达式（匿名函数）
var fun = function(){

}
//调用
fun();

 

调用函数：函数名();  通过调用函数名来执行函数体代码

1 function 函数名(形参1,形参2，。。。){    //在声明函数的小括号里面是形参（形式上的参数）
2     
3 }
4 
5 函数名(实参1,实参2,。。。)    //在函数调用的小括号里面是实参（实际参数）

带参数的函数

 

2、函数的返回值return

function 函数名(){
    return 需要返回的结果;
}

函数名();

/*
    1.函数通常会计算出返回值。这个返回值会返回给调用者：
    2.只要函数遇到return 就把计算的结果返回给函数的调用者
**/

 

 

六、JavaScript对象

1、什么是对象

对象是由属性和方法组成：

• 属性：事物的特征，在对象中用属性来表示（常用名词）
• 方法：事物的行为，在对象中用方法来表示（常用动词）

2.创建对象

 1 var obj = {}; //创建了一个空的对象
 2 
 3 
 4 //一、创建对象
 5 var obj = {
 6     name:‘王‘,
 7     age:18,
 8     sex:‘男‘,
 9     sayHi:function(){
10         console.log(‘hi~‘);
11         }
12 }
13 /*
14     1.里面的属性或者方法我们采取键值对的形式：键（属性名）:值（属性值）
15     2.多个属性或方法中间用逗号隔开
16     3.方法冒号后面跟的是一个匿名函数
17 **/
18 
19 //二、使用对象
20 
21 //调用方法1
22 console.log(obj,name); //调用对象的属性我们采取：对象名.属性名   (. 我们理解为 的)
23 
24 //调用方法2
25 console.log(obj[‘age‘]); //调用属性另一种方法：对象名[‘属性名‘]
26 
27 //调用函数对象的方法：对象名.方法名();
28 obj.sayHi();

利用字面量创建对象

 

 

 

 

 1 function Star(name,age,sex){
 2     this.name = name;
 3     this,age = age;
 4     this.arx = sex;
 5 }
 6 
 7 new Star(‘博客园‘,20,‘男‘)
 8 
 9 //1.构造函数名字首字母要大写
10 //2.构造函数不需要return就可以返回结果

构造函数

 

 

3.遍历对象属性

 1 //语法
 2 for (变量 in 对象)
 3 {
 4     执行的代码……
 5 }
 6 
 7 var obj={name:"博客园",age:20,sex:‘男‘}; 
 8  
 9 for (x in obj)
10 {
11     console.log(x); //x是变量，输出得到的是属性名
12     console.log(obj[x]); //obj[x] 得到的是 属性值
13 }

for...in 循环

 

 

七、JavaScript内置对象

查文档 MDN

Math对象

日期对象

数组对象

字符串对象