JavaScript语法

JavaScript语法

一、JavaScript的组成

完整的JavaScript是由ECMAScript(语法)、Browser
Objects(DOM、BOM)(特性)组成的。

JavaScript的组成.jpg

二、javaScript的语法规则

1.注释:

单行://
多行:/**/
语句停止使用分号,借使简单,则由解析器确定语句的结尾

注:ECMAScript中的一切(变量、函数和操作符)都分别轻重缓急写

2.标识符

变量、函数、属性的名字或者函数的参数即标识符

取名规则:
(1)由字母、数字、下划线(_)或英镑符号($)组成
(2)不可能以数字开始
(3)不可以运用主要字、保留字等作为标识符。

3.变量
ECMAScript的变量是满不在乎类型
麻痹大意类型:可以用来保存任何类型的数码
换句话说,每个变量仅仅是一个用以保存值的占位符而已。
1.变量声明:
变量的申明要选用var操作符,
语法:var 变量名

2.变量赋值:
评释的还要赋值:var 变量名=值
先表明后赋值: 变量名=值

五次表明多少个变量,用逗号隔开,如:var id,sex,age,name=“marry”;
不难易行var注明的变量是全局变量
不推荐省略var操作符来定义全局变量

<script>
    //声明保存用户名的变量
    var name;
    name="marry";
    //声明保存年龄的变量
    var age = 18;
    //声明保存邮箱的变量
    var email="marry@sina.com.cn";
    //一次声明多个变量
    var name_1="tom",age1=19,email1="tom@sohu.com",address;
</script>

4.JavaScript数据类型

ECMAScript中有5种简易数据类型(也称之为基本数据类型):
Undefined、Null、Boolean、Number和String。
还有1种复杂数据类型:Object。

JavaScript数据类型.jpg

typeof.jpg

<script>
    //声明保存用户名的变量
    var name;
    name="marry";
    //声明保存年龄的变量
    var age = 18;
    //声明保存邮箱的变量
    var email="marry@sina.com.cn";
    //一次声明多个变量
    var name_1="tom",age1=19,email1="tom@sohu.com",address;
    console.log(name)
    console.log(age)
    console.log(typeof name) //string
    console.log(typeof(age)) //number
</script>

(1)undefined
undefined类型只有一个值,即特殊的undefined。

评释:一般而言,不存在要求显式地把一个变量设置为undefined值的情形。

(2)null
1、null值表示一个空对象指针
2、若是定义的变量准备在前日用来保存对象,那么最好将改变量初步化为null而不是其余值。

注明:undefined值是派生自null值的,所以undefined==null
重回结果是true。

(3)Number
Number:表示整数和浮点数
NaN:即非数值(Not a Number)是一个非同平日的数值

说明:
1、任何关系NaN的操作(例如NaN/10)都会重临NaN。
2、NaN与任何值都不对等,包蕴NaN本身。

var age = 18;
console.log(age-3); //15
console.log(age-"abc") //NaN
console.log(typeof(age-"abc"));//number

isNaN():
语法:isNaN(n)
功能:检测n是否是“非数值”
返回值:boolean
参数:参数n可以是其他项目
证实:isNaN()在接到到一个值之后,会尝试将这一个值转换为数值。
或多或少不是数值的值会间接转换为数值。

var age = 18;
var email="marry@sina.com.cn";
var id = "16";
console.log(isNaN(age));//false
console.log(isNaN(email));//true
console.log(isNaN(id));//false

(4)String
String类型用于表示由零或多少个16位Unicode字符组成的字符系列,即字符串。字符串可以由双引号(”)或单引号(’)表示。

toString()与String():
语法:str.toString()
意义:将str转换为字符串
重回值:str的一个副本
参数:str是要转换的情节,可以是数值、布尔值、对象和字符串。

表明:
在不清楚要转移的值是否null或undefined的气象下,还足以选拔String()函数,它可以将其余类型的值转换为字符串。

var ids = 78965;
var idstr = ids.toString();
console.log(typeof idstr) //string 78965
console.log(String(ids)); //78965

var m;
console.log(String(m));//不清楚m为什么类型,尽量使用String();

(5)Boolean
用来表示真假的花色,即true表示真,false表示假

类型转换:
1、除0之外的兼具数字,转换为布尔型都为true
2、除””之外的所有字符,转换为布尔型都为true
3、null和undefined转换为布尔型为false

var isStudent=true;
var isChild=false;
console.log(typeof isStudent);//boolean

console.log(isChild.toString());//false 此时的false是一个字符串

var x=1;
console.log(Boolean(x));//true
var y=12343
console.log(Boolean(y));//true
var z=0;
console.log(Boolean(z));//false

var strings="welcome";
console.log(Boolean(strings));//true

var strings1="";
console.log(Boolean(strings1));//false

var strings2=" ";
console.log(Boolean(strings2));//true

var h;
console.log(Boolean(h));//false

var timer=null
console.log(Boolean(timer));//false

5.数值转换
有3个函数可以把非数值转换为数值:Number()、parseInt()和
parseFloat()。
里头Number()可以用于其余数据类型,而parseInt()和parseFloat()则专门用来把字符串转换成数值。

(1)parseInt():会忽视字符串前边的空格,直至找到第二个非空格字符。

说明:
1、parseInt():转换空字符串重临NaN。
2、parseInt()这些函数提供首个参数:转换时使用的基数(即多少进制)

var id = "16";
console.log(typeof id);//string
id=Number(id);
console.log(typeof id);//number

var name="tom"
name = Number(name);
console.log(name);//NaN

// var topVal="28px";
var topVal=parseInt("28px");
console.log(topVal);//28

var c="abc58"; //非数字开头
console.log(parseInt(c));//NaN  parseInt转换的必须以数字开头

console.log(parseInt("0xf"));//15  把0xf转化为16进制

(2)parseFloat:从第二个字符先导解析每个字符,直至遇见一个空头的浮点数字符截至

说明:
除去第二个小数点有效外,parseFloat()与parseInt()的第四个区分在于它平昔都会忽视前导的零。

var a = parseFloat("12.34px");
console.log(a);//12.34

var b = parseInt("12.34px");
console.log(b) //12

var c = parseFloat("12.34.56px");
console.log(c);//12.34 第二个小数点会忽略

var e = parseInt("0123");
console.log(e);//123

var f = parseFloat("0123");
console.log(f);//123

var g = parseFloat("0.123abc");
console.log(g);//0.123

三、JavaScript操作符

1.表达式

将同类其他数量(如常量、变量、函数等),用运算符号按一定的平整连接起来的、有意义的架势称为表达式。

2.JavaScript操作符分类

1、算数操作符

+ :加
- :减
* :乘
/ :除
%:取余

递增和递减
(1)递增
++a与a++都是对a举行递增的操作
区别:
++a先回到递增之后的a的值
a++先再次回到a的原值,再回来递增之后的值
(2)递减同理

var num1=10,num2="abc";
console.log(num1*num2); //NaN

var num1=10,num2="5";
console.log(num1*num2); //50 隐式类型转换


var a=10,b=5,
    c=++a+b;
console.log(a);//11
console.log(c);//16

var a=10,b=5,
    c=a++-b;
console.log(a);//11
console.log(c);//5

x1=20,
x2=30,
x3=--x1+x2--;
console.log(x1);//19
console.log(x2);//29
console.log(x3);//49

2、逻辑操作符
逻辑操作符:
①&&:与
&& 与 (只要有一个标准化不创设,重临false)

证实:在有一个操作数不是布尔值的场馆,逻辑与操作就不必然重返值,
此时它坚守下列规则:
1、如若首个操作数隐式类型转换后为true,则赶回第三个操作数
2、如若第四个操作数隐式类型转换后为false,则赶回第三个操作数
3、如若有一个操作数是null,则赶回null
4、即使有一个操作数是NaN,则赶回NaN
5、即使有一个操作数是undefined,则重返undefined

var num1=10,
    num2=20,
    num3=30,
    str="welcome",
    bool=true,
    n=null,
    m;
console.log(num1<num2 && num2<num3);//true
console.log(num1<num2 && num2==num3);//false
console.log(num1<num2 && num3>num1 && false);//false

console.log(str && num3);//30
console.log(80 && 50);//50
console.log("hello" && 65 && "abc");//abc 多个时返回最后一个操作数的值

console.log(0 && 88);//0
console.log("" && 0 && 30>20);//空

console.log(n && num3);//null  操作数中只要有一个是null 结果就是null
console.log(33*"abc" && 55);//NaN
console.log(m && true); //undefined

②||:或
|| 或 (只要有一个尺度建立,再次来到true)

表达:在有一个操作数不是布尔值的情事,逻辑与操作就不必然重回
值,此时它遵守下列规则:
1、若是第三个操作数隐式类型转换后为true,则赶回第四个操作数
2、假若第三个操作数隐式类型转换后为false,则赶回第三个操作数
3、如若五个操作数是null,则赶回null
4、假使七个操作数是NaN,则赶回NaN
5、即使八个操作数是undefined,则再次来到undefined

console.log(55>88 || 33<66);//true
console.log(55!="55" || 88==="88");//false
console.log("hello" || 0);//hello
console.log(99 || 0 || "abc");//99
console.log("" || 88 || true);//88
console.log("" || 0 || "abc");//abc
console.log("" || 0 || null);//null
console.log("" || 0 || null || "hello");//hello
var m;
console.log(m || NaN);//NaN
console.log(m || NaN || 99);//99
console.log("" || m);//undefined
console.log(30*"abc" || 55-"def");//NaN

③!:非
! 非

说明:
1、无论操作数是何许数据类型,逻辑非都会再次回到一个布尔值
2、 ! ! 同时接纳七个逻辑非操作符时:
率先个逻辑非操作会基于无论怎么操作数重回一个布尔值,
首个逻辑非则对该布尔值求反。

console.log(!false);//true
console.log(!88);//false
console.log(!0);//true
console.log(!"red");//false
console.log(!NaN);//true
console.log(!null);//true

console.log(!!"");//false
console.log(!!"blue");//true

3、赋值操作符
简言之赋值:=
复合赋值:+=、-=、*=、/=、%=

var a=10;
var b=20;
a+=5;
b%=4;
console.log(a);//15
console.log(b);//0

var str="hello ";
str+="world"//连接符 str=str+"world";
console.log(str); //hello world

4、相比操作符

>、<、>=、<=、==、===、!=、!==
==:相等,只比较值是否相等
===:相等,比较值的同时比较数据类型是否相等
!=:不相等,比较值是否不相等
!==:不相等,比较值的同时比较数据类型是否不相等
返回值:boolean型

例:

var x=10,
    y="10",
    c=x==y;//值是否相等
console.log(c);//true

z=x===y;//全等
console.log(z);//false

var m=15,
    n=y!=m;
console.log(n);//true
k=x!=y;
console.log(k);//false
j=x!==y;
console.log(j);//true

console.log(null==undefined);//true
console.log(null===undefined);//false

5、雅士利操作符
语法:
基准 ? 执行代码1:执行代码2

表达:可替代简单的if语句,若是基准建立,执行代码1,否则执行代码2

var score=85;
var result=(score>=60)?"及格":"不及格";
console.log(result);//及格