码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript

时间:2020-03-02 14:48:27      阅读:152      评论:0      收藏:0      [点我收藏+]

标签:否则   需要   执行函数   dev   case   有一个   函数名   用户   sla   

一、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对象

日期对象

数组对象

字符串对象

 

JavaScript

标签:否则   需要   执行函数   dev   case   有一个   函数名   用户   sla   

原文地址:https://www.cnblogs.com/oeasys/p/12394282.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!