js基本语法介绍
1.什么是浏览器的内核? 浏览器的内核
内核:负责页面内容的渲染
内容排版引擎 -- 解析的是HTML/CSS
脚本解释引擎 -- 解析JS
根据内核对浏览器的分类
浏览器 内核名 排版引擎 脚本解释引擎
IE Trident -(内核自带) Chakra
Firefox Gecko - Monkey
Chrome Webkit webcore V8
Safari Webkit webcore Nitro
2013之前的Opera
Opera presto - Carakan
2013~至今 Webkit webcore V8
2. js的使用方法有几种?
1、内联样式
<!-- 在HTML元素中直接写js代码 -->
<a href="javascript:alert('OK');">这是个超链接</a>
<!-- 在标签的时间中编写jsdiamante -->
<h1 οnclick="alert('没问题!')">今天开始学习JS的基础语法!</h1>
2、外部样式
用法和css外部样式一样用,但是注意 导入在html的最下端,等到HTML样式加载完毕在加载js功能
<script type="text/javascript" src="js/01.js"></script>
3、内部样式
<script type="text/javascript">
/*
1、网页名写JS
document.write 通过js 在网页中书写内容
*/
document.write("<p style='color :red;'>这是通过js写的一个p标签</p>");
</script>
3、js中的数据类型
1、什么是数据类型?
数据类型决定了数据在内存中占据多大的位置
2、在js语言中怎么定义数据类型?
JavaScript属于解释性 弱类型 脚本语言,由数据值来确定数据类型。
1、number类型
可以表示32位的整数也可以表示64位的浮点型小数
var num = 10;整数型
var num2 = 1.01;浮点型小数 num2.tofxed(n);表示保留小数点后n位数
2、boolean类型
表示真和假 就两个值 true false
3、string类型
字符串类型必须要用""or''给引起来,可以表示一些列的文本文字字符数据。
由Unicode码字符,数字,标点符号组成。
var str = "hello world!";表示hello world!字符串
4、undefined 类型
访问的数据不存在 声明了变量没有赋值就使用,访问的对象属性不存在 引用数据类型
var n;没有赋值直接使用
4、数据类型之间的转换
一、显式转换
字符串:
Number(‘1’) //1
Number(‘1a’) //NaN
Number( ‘’ )(空字符串) //0
布尔类型:
Number(true) //1
Number(false) //0
null:
Number(null) //0
undefined:
Number(undefined) //NaN
数字:
String(123) // “123”
布尔类型:
String(true) // “true”
String(false) // “false”
null:
String(null) // “null”
undefined:
String(undefined) //“undefined”
布尔类型:
的转换除了下面的情况返回false外,其余一律返回true
空字符串""
null
undefined
数字0
数字NaN
布尔值false
二、隐式转换
//number + string = string
result = num + str;
console.log('结果为:' + result + ",类型为:" + typeof(result));
// str + boo = ? 隐士转换:将boolean转换为string 在做运算 true转换为字符串 "true" false 转换为字符串"false"
result = boo + str;
console.log('结果为:' + result + ",类型为:" + typeof(result));
// str + und = ? 隐士转换:将und转换为string 在做运算
result = str + und;
console.log('结果为:' + result + ",类型为:" + typeof(result));
// 特点: 任何一种数据类型的数据,在和string做 "+"运算时,都会被转回或为string,再做运算
// num + boo =? 隐士转换:将boo转换为number类型,true为 1 false 0
result = num + boo ;
console.log('结果为:' + result + ",类型为:" + typeof(result));
// num + und = NaN ( not a number) 隐士转换:尝试将und转换为number,结果转换失败,返回结果NaN
result = num + und;
console.log('结果为:' + result + ",类型为:" + typeof(result));
// NaN :not a number 不是一个数 类型为number
// 函数: isNaN(数据) 判断数据是否为 非数字类型(只判断数值,于类型无关) 如果是非数字类型返回true,否则返回false
console.log(isNaN("123"));//? true false
// boo + und =? 隐士转换:将boo转换为number类型,true为 1 false 0 ;尝试将und转换为number,结果转换失败,返回结果NaN
result = boo + und;
console.log('结果为:' + result + ",类型为:" + typeof(result));
5、js中的变量
1、什么是变量?
变量是内存中的一小段存储空间,目的是为了临时的保存数据。
变量名:是内存中的别名,自己定义
2、变量的声明
用法:
var 变量名;//这是在声明一个变量
变量名 = 值;//这是在给变量赋值
注意: 虽然var可以省略,但是不要轻易的省略var关键字
省略了var表示该变量成为了 全局变量
3、变量命名的规范
不允许使用JS关键字以及保留字
可以包含字母、数字、下划线(_)以及$
变量名不能以数字开头
可以采用:驼峰 匈牙利命名 下划线命名....
6、算数运算符
+ 数字之间的运算,字符串之间的链接符
- 数字之间的减法运算
* 数字之间的乘法运算
/ 除
% 取余
** 幂运算
7、关系运算符
> 大于
< 小于
>= 大于等于
<= 小于等于
== 等于 数值大小相同
!= 不等于
var fig = "123"==123; //返回值为真
=== 全等于 数值类型和数值大小相同
var fig = "123" === 123;//返回值为假,因为数据类型不相同
!== 不全等于
所有返回值都为Boolean型
8、逻辑运算
作用:多个条件之间的判断关系
1、&& 多个条件都必须满足 见false则false
短路或:只要第一个条件 为假的话,整个表达式的结果都为假,并且不会去判断第二个条件
var isPass = (bi >= 60) && (++face >=60);
如果bi>=60不满足,则就会断掉,不会再执行后面语句。
2、 || 满足其中一个条件 见true则true
短路与:只要第一个条件为真的话,整个表达式结果就为真,并且不会去判断第二个条件时
var isPass = (bi >= 60) && (++face >=60);
如果bi>=60满足,则就会断掉,不会再执行后面语句。
3、! 取反
!true=false;
9、位运算
// 只能做数字的运算,且要将数字转换为二进制,在做运算
// & 按位 与 将两边的操作数转换成为二进制,每位的数字,只要对应都是1的时候,该位的结果才为1,否则该位结果为0
var num1 = 5;
var num2 = 3;
var r = num1 & num2 ;
console.log(r);//1
/*
5: 101
3: 011
------------
r: 001
作用:判断奇偶性,比模的效率要高
判断数字与 1 做按位与 ,最后的一位 1 为奇数 0为偶数
*/
console.log( (10 & 1) === 0 );//true偶数
console.log( (9 & 1) === 0 );//false奇数
/*
10: 1010
1 : 0001
----------
0000
11: 1011
1 : 0001
--------
0001
*/
// | 按位 或 将两边的操作数转换成为二进制,比较每位上的数字,两个数字中有一个是1,则该位的结果就是1 ,否则 0
r = num1 | num2 ;
/*
5: 101
3: 011
------------
r: 111 7
场合:向下取整 位运算一定会将数据转换为二进制,而小数会被转换为整数
*/
console.log(r);
var num3 = 6.5;
console.log(num3 | 0);
/*
6.5 ==> 6 110
0 000
------
r 110 6
*/
// << 按位左移 ,将二进制数,向左移动几位 ,右面以0 补位
console.log(2 << 1);// 4
console.log(2 << 2);// 8
console.log(2 << 3);// 16
console.log(2 << 4);// 32
// 0000 0000 0001 0000
// >> 按位右移 将二进制数,向右移动几位,左面以0 补位
console.log(8 >> 1);//4
console.log(8 >> 2);//2
console.log(8 >> 3);//1
console.log(8 >> 4);//0
// 0000 0000 0000 0001
// ^ 异或 将两边的数字转换为二进制 进行比较,每位上的数字,只有一个为1时,该位结果才为1,否则0
r = num1 ^ num2
console.log(r);
/*
5: 101
3: 011
------------
r: 110 6
*/
// 交换num1 和num2的值
// num1 = num1 ^ num2;
num1 ^= num2;
// num2 = num2 ^ num1;
num2 ^= num1;
// num1 = num1 ^ num2;
num1 ^= num2;
/*
num1 = num1 ^ num2;
5: 101
3: 011
------------
num1: 110 6
num2 = num2 ^ num1;
3:011
6:110
------
num2: 101 5
num1 = num1 ^ num2;
6:110
5:101
--------
num1: 011 3
*/
console.log(num1,num2);// 3 5