JS基本语法+运算
JS基础语法和配置
JS 基本输出语句
-
alert() 作用:
控制浏览器弹出一个警告框 -
decument.write() 作用:让计算机在页面中输出内容
-
console.log() 作用:向控制台输出一个内容
-
前两个用户能直接看见,在控制台中显示的内容需要在开发者工具中才能被看见
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>联系 JS 的 Hello World</title>
<script>
/*
script 多行和单行注释都可以用
*/
// 控制浏览器弹出一个警告框
alert("时代少年团好帅")
alert("不是吗????")
alert("那必须是啊!")
// 让计算机在页面中输出一个内容
// document.write()可以向body中输出一个内容
document.write("马嘉琪 丁程鑫 宋亚轩 刘耀文 张真源 严浩翔 贺峻霖")
// 向控制台输出一个内容
// console.log()的作用是向控制台输出一个内容
console.log("我是谁????爆米花!!!")
</script>
</head>
<body>
</body>
</html>
JS 编写位置
-
JS代码编写到 script 标签中(如:CSS的style标签那样)
-
可以将JS代码编写到标签内部的onclick属性中,
-
或者写在超链接的href属性中
-
可以将 js 代码编写到外部 js 文件中,然后通过 script 标签引入
注:script标签 一旦用于引入外部文件了,就不能在里面编写代码了,即使编写了浏览器也会忽略
如果需要如果需要则可以在创建-一个 新的script标签用于编写内部代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 四: 可以将 js 代码编写到外部js文件中,然后通过 script 标签引入 --> <script src="./script.js"></script> <!-- 一: 可以将js代码编写到script标签中 <script> alert("我时script标签中的代码!!!") </script> --> </head> <body> <!-- 二: 可以将js代码编写到标签的onclick属性中 可当我们点击按钮时,js代码才会执行 虽然可以写在标签的属性中,但是他们属于结构与行为耦合,不方便维护,不推荐使用 --> <!-- <button onclick="alert('干啥点我??')">点我一下</button> --> <!-- 三: 可以将js代码写在超链接的 href 属性中,这样当点击超链接时,会执行js代码 --> <!-- <a href="javascript:alert('让你点你就点!!')">你也点我一下</a> --> </body> </html>
alert("我是外部引入进来的代码")
JS基本语法
-
JS中严格区分大小写
-
JS中每一.条语句以分号(;)结尾
-
如果不写分号,浏览器会自动添加,但是会消耗一些系统资源,
-
而且有些时候,浏览器会加错分号,所以在开发中分号必须写
-
-
JS中会忽略多个空格和换行,所以我们可以利用空格和换行对代码进行格式化
数据、变量
字面量和变量
-
字面量
-
都是一些不可改变的值 例如:1 2 3 4 5
-
可以直接使用的,但是我们一般不会直接使用字面量
-
-
变量
-
变量可以用来保存字面量,而且变量的值是可以任意改变的
-
变量更加方便我们使用,所以在开发中都是通过变量去保存一个字面量,而很少直接使用字面量
-
-
声明变量
-
在 JS 中使用 var 关键字来声明一个变量
-
var a;
-
-
为变量赋值
-
a=123;
标识符
-
在 JS 中所有的可以由我们自主命名的都可以称为是标识符
-
例如:变量名、函数名、属性名都属于标识符
-
命名一个标识符时需要遵守如下的规则:
-
标识符中可以含有字母、数字、_、 $。
-
标识符不能以数字开头
-
标识符不能是ES中的关键字或保留字
-
标识符一般都采用驼峰命名法
-
首字母小写,每个单词的开头字母大写,其余字母小写 helloWorld xxxYyyZzz
-
-
-
JS底层保存标识符时实际上是采用的Unicode编码,
所以理论上讲,所有的utf-8中含有的内容都可以作为标识符
数据类型
-
数据类型指的就是字面量的类型
-
在IS中一共有六种数据类型
-
String 字符串
-
Number 数值
-
Boolean 布尔值
-
Null 值
-
Undefined 未定义
-
object 对象
-
其中前 5 种属于基本数据类型
-
而Object 属于引用数据类型
-
字符串
-
String字符串
-
在JS中字符串需要使用引号引起来
-
使用双引号或单引号都可以, 但是不要混着用
-
引号不能嵌套,双引号里不能放双引号,单引号里不能放单引号
-
所以如果一定要使用嵌套,可以考虑在单引号里面放双引号,或者在字符串中我们可以(使用 \) 作为转义字符, 当表示一些特殊符号时可以使用\进行转义
-
\n表示换行 \t制表符
-
-
Number
-
在JS中所有的数值都是Number类型, 包括整数和浮点数(小数)
-
判断输出的数值是字符串的形式还是Number形式的数据
-
可以使用一个运算符
typeof
来检查一个变量的类型语法:
typeof 变量
检查字符串时,会返回string 检查数值时,会返回number
-
-
JS中可以表示的数字的最大值
-
Number.MAX_VALUE
-
-
JS中可以表示的数字的最小值
-
Number.MIN_VALUE
-
-
如果使用Number表示的数字超过了最大值,
-
则会返回一个
Infinity
表示正无穷(Infinity是个字面量)
-
-
NaN
是一个特殊的数字,表示Not A Number (NAN也是一个字面量直接a=NAN; ) -
在JS中整数的运算基本可以保证精确
-
如果使用JS进行浮点元素,可能得到一个不精确的结果
-
布尔值
-
Boolean布尔值(布尔值是字面量)
-
布尔值只有两个,主要用来做逻辑判断
-
true
表示真 -
false
表示假
-
Null
-
Null(空值)类型的值只有一个,就是null
-
null这个值专门用来表示一个为空的对象
-
用typeof检查一个null值时会返回object,因为它本身就是用来表示一个为空的对象的
-
Undefined
-
Undefined (未定义)类型的值只有一个,就 undefined 当声明一个变量,但是并不给变量赋值时,它的值就是undefined
强制类型转换
-
指将一个数据类型强制转换为其他的数据类型
-
类型转换主要指,将其他的数据类型,转换为
-
String Number Boolean
-
String
-
方式一:
-
调用被转换数据类型的
toString()
方法 -
该方法不会影响到原变量,它会将转换的结果返回
-
但是注意: null和undefined这两个值没有
toString( )
方法,调用会报错var a=123; //调用 a 的 toString 方法 //调用XXX的YYY方法,就是XXX.YYY() /*a.toString();*/ //转换过类型后a的数据类型不变,变化的是a.toString() //所以我们需要将a.toString() 赋值给一个新的变量,或者直接赋值给a改变a的数据类型 var b=a.String(); a=a.String();
-
-
方式二:
-
调用
String()
函数,并将被转换的数据作为参数传递给函数var a=123; a=String(a);
-
使用
String()
函数做强制类型转换时,-
对于Number 和 Boolean 实际上就是调用的
toString()
方法 -
但是对于null和undefined,就不会调用
toString()
方法 它会将null直接转换为"null" 将undefined直接转换为"undefined"
-
-
Number
-
方式一:
-
调用
Number()
函数,方法与String()
函数类似 -
字符串-->数字
-
如果是纯数字的字符串,则直接将其转换为数字
-
如果字符串中有非数字的内容,则转换为NaN
-
如果字符串是一个空串或者是一个全是空格的字符串,则转换为0
-
-
布尔-->数字
-
true转成1
-
false转成0
-
-
Null -->数字 0
-
undefined -->数字NaN
-
-
方式二:
-
这种方式专门用来对付字符串
-
parseInt()
,把一个字符串转换成一个整数-
parseInt( )可以将-一个字符串中的有效的整数内容取出来,然后转换为Number
-
-
parseFloat()
, 把一个字符串转换成一个浮点数-
parseFloat( )作用和parseInt( )类似,不同的是它可以获得有效的小数
-
-
其他进制的数字
-
在js中,如果需要表示16进制的数字,则需要以0x开头
-
如果需要表示8进制的数字,则需要以0开头
-
如果要表示2禁止的数字,则需要以 0b 开头
-
但不是所有浏览器都支持这种方式
-
-
我们可以在
parseInt()
中传递一个第二个参数,来指定数字的进制a="070"; a=parseInt(a,10);
-
Boolean
-
将其他数据类型转换为Boolean
-
使用Boolean() 函数
-
数字---->布尔
-
除了0和 NaN ,其余的都是true
-
-
字符串------>布尔
-
除了空串,其余的都是true
-
-
null 和 undefined 都会转换为false
-
对象也会转换为true
-
-
-
方式二(隐式类型转换):
-
为任意的数据类型做两次运算,即可将其转换为布尔值
-
例子:
var a="hello"; a=!!a;
-
运算和运算符
运算符也叫操作符
-
通过运算符可以对一个或多个值进行运算,并获取运算结果
-
比如: typeof就是运算符,可以来获得-一个值的类型
-
它会将该值的类型以字符串的形式返回
number string boolean undefined object
-
算数运算符
-
当对非Number类型的值进行运算时,会将这些值转换为Number,然后运算
-
任何值和NaN 做运算都得NaN
-
-
+ (加)
-
+可以对两个值进行加法运算,并将结果返回
-
如果对两个字符串进行加法运算,则会做拼串
-
会将两个字符串拼接为一个字符串,并返回
-
-
任何的值和字符串做加法运算,都会先转换为字符串,然后再和字符串做拼串的操作
-
任何值和字符串相加都会转换为字符串,并做拼串操作
-
我们可以利用这一特点, 来将一个任意的数据类型转换为String
-
我们只需要为任意的数据类型+ 一个 "” 即可将其转 换为String
-
这是一种隐式的类型转换,由浏览器自动完成,实际上它也是调用String()函数
-
-
-
-(减)
-
可以对两个值进行减法运算,并将结果返回
-
-
* (乘)
-
可以对两个值进行乘法运算
-
-
/ (除)
-
可以对两个值进行减法运算
-
(任何值做 - * /运算时都会自动转换为Number
-
我们可以利用这一特点做隐式的类型转换
-
-
可以通过为一个值-0 *1 /1来将转换为Number
-
原理和Number( )函数-样,使用起来更加简单)
-
-
该除法有小数
-
-
% (取模)
- 取模运算(取余数)
一元运算符
-
一元运算符,只需要一个操作数
-
+(正号)
-
正号不会对数字产生任何影响
-
对于非Number类型的值,
-
它会将先转换为Number,然后在运算
-
可以对一个其他的数据类型使用+ ,来将其转换为number
-
它的原理和Number( )函数一样
-
-
-
- (负号)
-
负号可以对数字进行负号的取反
-
自增和自减
-
自增 ++
-
通过自增可以使变量在自身的基础上增加1
-
-
对于一个变量自增以后,原变量的值会立即自增1
-
自增分两种,后++ (a++) 和 前++ (++a)
-
无论是a++ 还是 ++a,都会立即使原变量的值自增1
-
不同的是 a++ 和 ++a 本身的值不同
-
a++ 的值等于原变量的值(自增前的值)
console.log(a++);//也算调用a++
-
++a 的值等于原变量的新值(自增后的值)
-
-
逻辑运算符
-
!非
-
!可以用来对一个值进行非运算
-
所谓非运算就是值对一个布尔值进行取反操作,
-
true变false,false变true
-
-
如果对一个值进行两次取反,它不会变化
-
如果对非布尔值进行取反,则会将其转换为布尔值,然后再取反
-
所以我们可以利用该特点,来将一个其他的数据类型转换为布尔值
-
可以为一个任意数据类型取两次反,来将其转换为布尔值
-
原理和Boolean( )函数一样
-
-
-
&& 与
-
|| 或
-
&& || 之间非布尔值的情况
-
对于非布尔值进行与或运算时,
-
会先将其转换成布尔值,然后再运算,并且返回原值
-
true &&true
-
与运算:
-
如果两个值都为true,则返回后边的
-
var result = 5 && 6;
result = 0;
console.log("result="+result); /* 结果为"result=6" */
-
-
与运算,两个都是false,则选择靠前的false
-
result=0&&2;
console.log("result="+result); /* 结果为:"result=0" */
-
- 与运算。如果有false就返回false。false && true
-
总结:
-
如果第一个值为true,则必然返回第二个值
-
如果第一个值为false,则直接返回第-一个值
-
-
-
或运算
-
总结:
-
如果第一个值为true,则必然返回第一个值
-
如果第一个值为false,则直接返回第二个值
-
-
-
-
-
赋值运算符
=
-
= 可以将符号右侧的值赋值给左侧的变量
+=
-
a+=5等价于a=a+5
关系运算符
> ,< , =
非数值的情况:
-
对于非数值进行比较时,会将其转换为数字,然后再比较
-
任何 值和NaN做任何比较都是false
-
比较两个字符串时,比较的是字符串的字符编码
-
比较字符编码时是一位一位进行比较
-
如果两位一样,则比较下一位,所以借用它来对英文进行排序
-
比较中文时没有意义
-
如果比较的两个字符串型的数字,可能会得到不可预期的结果
-
注意:在比较两个字符串型的数字时,一定定一定要转型
-
相等运算符
-
== 相等
-
使用==来比较两个值时,如果值的类型不同,则会自动进行类型转换,将其转换为相同的类型,然后再比较
-
undefined 衍生自null
-
所以这两个值做相等判断时,会返回true
-
NaN不和任何值相等,包括它本身
-
如果要判断一个值是否是NaN
-
可以通过
isNaN()
函数来判断一个值是否是NaN -
console.log(isNaN(b));
/*isNaN()函数就是用来判断的*/
/*如果是NaN则返回true,不是则返回false*/
-
-
-
-
!= 不相等
-
=== 全等
-
用来判断两个值是否全等,它和相等类似,不同的是它不会做自动的类型转换,如果两个值的类型不同,直接返回False
-
-
!==
-
与全等相反
-
条件运算符
-
条件运算符也叫三元运算符
-
语法:
-
条件表达式?语句1 : 语句2 ;
-
-
执行流程
-
条件运算符在执行时,首先对条件表达式进行求值,
-
如果该值为true,则执行语句1,并返回执行结果
-
如果该值为false,则执行语句2,并返回执行结果
-
-
如果条件的表达式的求值结果是一个非布尔值,
-
会将其转换为布尔值再运算
-
-
运算符的优先级
代码块
-
我们的程序是由一条一条语句构成的
-
语句是按照自.上向下的顺序一条- -条执行的
-
在JS中可以使用{ }来为语句进行分组,
-
同一个{}中的语句我们称为是一组语句,
-
它们要么都执行,要么都不执行,
-
一个{ }中的语句我们也称为叫一个代码块
-
在代码块的后边就不用再编写;了
-
JS中的代码块只具有分组的作用没有其他的用途