1.Javascript是什么
(1)运行在客户端的脚本语言
(2)不需要编译,运行过程中由js解释器逐行解释并执行
(3)可以用Node.js进行服务器端编程
2.作用
表单动态校验,网页特效,服务端开发(Node.js),桌面程序,APP,控制硬件-物联网,游戏开发
3.浏览器执行JS
浏览器的组成
渲染引擎:解析HTML与CSS,俗称内核,(chrome的blink,老版本的webkit等)
JS引擎:读取JavaScript代码,并进行处理后运行(chrome的V8)
4.JS组成
(1)ECMAScript:JavaScript语法
(2)DOM:页面文档对象模型(对文档各种元素进行操作)
(3)BOM:浏览器对象模型(对浏览器窗口进行操作)
5.书写位置
(1)行内式
<input type="button" value="A" onclick="alert('B')">
(2)内嵌式
<script>
alert("hhhh")
</script>
(3)外部js
<script src="mu.js">此处不能写代码</script>
6.注释
//单行注释(ctrl+/)
/*
多行注释 (Shift+alt+a)
*/
7.JS语法
7.1 输入输出语句
alert(msg):弹出警示框
console.log(msg):打印输出信息
prompt:浏览器弹出输入框,用户输入
<script>
alert("hhhh")
prompt("这是一个输入框,你的年龄");
console.log('a');
</script>
7.2变量
定义:存放数据的容器,通过变量名获取或修改数据,本质是程序在内存中申请的一块用来存放数据的空间。类似酒店的房间号
变量的使用:
(1)声明变量(声明变量就会在内存中创建一个空间,类似订酒店房间)
var age
(2)变量赋值(类似于客人住进去)
age=10;
(3)变量初始化
var age=10;
console.log(age)
示例
<script>
var myName = prompt("输入名字");
var age = prompt("输入年龄");
var address = prompt("输入地址");
console.log(myName);
console.log(age);
console.log(address);
</script>
变量语法拓展
1.更新变量
一个变量被重新赋值后,原有的值会被覆盖,以最后一次的值为准
<script>
var age = 10;
console.log(age);//10
age = 18;
console.log(age);//18
</script>
2.声明多个变量
可以连续声明多个变量,变量之间逗号隔开
<script>
var age=10,
address='ass',
height='87';
</script>
3.变量声明的特殊情况
(1)只声明不赋值,输出undefined
<script>
var age;
console.log(age);//undefined
</script>
(2)不声明,不赋值,直接使用会报错
(3)不声明直接赋值,可以正常输出
<script>
age = 90;
console.log(age)//90
</script>
变量的命名规范
(1)由字母,数字,下划线,美元符号组成
(2)严格区分大小写
(3)不能以数字开头
(4)不能是关键字,尽量不要用name作为变量名
(5)变量名有意义
(6)驼峰命名法 myFirstName
示例:交换2个变量,引用一个中间变量
<script>
var one = 1, two = 2;
console.log(one);//1
console.log(two);//2
var temp = one;
one = two;
two = temp;
console.log(one);//2
console.log(two);//1
</script>
7.3数据类型
7.3.1 变量的数据类型
(1)JS是弱类型语言,不提前声明变量的类型,在程序运行中,类型被自动确定,根据等号右边的值自动确定
(2)变量的数据类型可以变化
<script>
var x = 5;
console.log(x);
x = 'apple';
console.log(x);
console.log(typeof (x));
</script>
7.3.2 简单数据类型
Number:数字型,包含整型,浮点型,默认值为0;
<script>
var age = 10;
var d = 8.9;
</script>
八进制,0-7,数字前面加0
<script>
var num = 010;
console.log(num)
</script>
十六进制 0-9 a-f,数字前面加0x
<script>
var num = 0x9;
console.log(num)
</script>
最大值和最小值
<script>
console.log(Number.MAX_VALUE);
console.log(Number.MIN_VALUE);
</script>
三个特殊值
<script>
alert(Infinity);
console.log(-Infinity);
console.log(NaN);//非数字;
console.log('a'-19);//NaN
</script>
isNaN用来判断非数字,并且返回一个值,如果是数字,返回false,否则返回true
<script>
console.log(isNaN(12));//false
console.log(isNaN('n'));//true
</script>
String:字符串类型,默认“”;
<script>
var str = 'aaa';
</script>
符号 | 解释 |
---|---|
\n | 换行,newline |
\\ | \ |
\' | ' |
\" | " |
\t | Tab缩进 |
\b | 空格,blank |
字符串长度与拼接
(1)字符串长度length属性获得
<script>
var str = 'aa a';
console.log(str.length);
</script>
(2)字符串拼接
字符串+任何类型=拼接后的字符串;
<script>
var str = 'aa a' + 9;
console.log(str.length);//5
console.log(typeof (str));//string
console.log(12+'12')//1212
console.log(12+12)//24
</script>
Undefined:声明变量但未赋值(var a),默认undefined;
Null:声明a为空值,var a=null,默认null
<script>
var flag = true;
var flag1 = false;
console.log(flag);//true,视为1
console.log(flag1);//false,视为0
console.log(flag + 1);//2;
console.log(flag1 + 1);//1;
//声明变量未赋值是undefined
var a = undefined;
console.log(a + 'a');//undefineda
console.log(a + 7);//NaN
//null空值
var space = null;
console.log(space + 'a');//nulla
console.log(space + 1);//1
</script>
7.3.3 检测数据类型 typeof
<script>
console.log(typeof (10));
console.log(typeof ('op'))
</script>
7.3.4 字面量
字面量是源代码中一个固定值表示法
数字字面量:9,10
字符串字面量:'字符串'
布尔字面量:true,false
7.3.5 数据类型转换
7.3.5.1 转换为字符串类型
(1)toString()
变量名.toString()
<script>
var num = 190;
console.log(num.toString());
</script>
(2)String()强制转换
String(变量名)
<script>
var num = 190;
console.log(String(num));
</script>
(3)加号拼接字符串
<script>
var num = 190;
console.log(num + '');
</script>
7.3.5.2 转换为数字型
(1)parseInt(string)
(2)parseFloat(string)
(3)Number()强制转换
(4)隐式转换(利用+,-,*)
<script>
var a = '78';
var b = '9.8';
console.log(a + b)//789.8
console.log(parseInt(a) + parseFloat(b))//87.8
console.log(Number(a) + Number(b));//87.8
console.log(parseInt('12px'));//12 计算时去掉了单位
console.log(a - 8);//70
</script>
7.5.3.3 转换为布尔型
Boolean()
注意代表空,否的值会被转换为false
<script>
console.log(Boolean(''));//false
console.log(Boolean(0));//false
console.log(Boolean(NaN));//false
console.log(Boolean(null));//false
console.log(Boolean(undefined));//false
console.log(Boolean('niha'));//true
console.log(Boolean(90));//true
</script>
7.6 解释型语言和编译型语言
编译器在代码执行之前进行编译,生成中间件文件
解释器在运行时进行即使解释,并立即执行
8.运算符
8.1 算术运算符
+ |
- |
* |
/ |
%(取余) |
注意浮点数的运算特性,尽量避免浮点数判断相等
<script>
console.log(0.1 + 0.2);//0.30000000000000004
console.log(0.7 * 100);//70
var num = 0.1 + 0.2;
console.log(num == 0.3);//false
</script>
8.2 自增运算符
后置递增(先返回值再运算) | 前置递增(先运算再返回值) |
a=a++ | a=++a |
| |
8.3 比较运算符
< |
> |
>= |
<= |
== |
!= |
===(要求值和类型都一致) |
!==(要求值和类型都一致) |
注意:==会默认转换数据类型,将字符串类型转换为数字型
<script>
console.log(18 == '18');//true
</script>
8.4 逻辑运算符
运算符 | 说明 |
&& | 与 |
|| | 或 |
! | 非 |
8.4.1 注意短路运算(逻辑中断)
短路运算原理:当有多个表达式时,左边的表达式的值可以确定结果时,就不再继续运算右边表达式的值
8.4.1.1 逻辑与短路
语法:表达式1&&表达式2
如果表达式1为真,返回表达式2
如果表达式1为假,返回表达式1
<script>
console.log(1 && 'a');//a
console.log(1 && 0);//0
console.log(0 && 89);//0
console.log(0 && 1 + 2 && 456 * 777);//0
console.log(1 && 89 * 7 && 0);//0
console.log(1 && 0 && 67 + 89);//0
</script>
8.4.1.2 逻辑或中断
语法:表达式1||表达式2
如果表达式1为真,则返回表达式1
如果表达式1为假,则返回表达式2
<script>
console.log(1 || 'a');//1
console.log(1 || 0);//1
console.log(0 || 89);//89
console.log(0 || 1 + 2 || 456 * 777);//3 后面的不再运算
console.log(0 || 89 + 7 || 8);//96
console.log(1 || 0 || 67 + 89);//1
</script>
8.5 赋值运算符
= |
+= ,-= |
*= /= %= |
8.6 运算符优先级
优先级 | 运算符 | 顺序 |
1 | 小括号 | () |
2 | 一元运算符 | ++ -- ! |
3 | 算术运算符 | 先* / % 后+ - |
4 | 关系运算符 | > >= < <= |
5 | 相等运算符 | == != === !== |
6 | 逻辑运算符 | 先&&后|| |
7 | 赋值运算符 | = |
8 | 逗号运算符 | , |
<script>
console.log(4 >= 6 || '人' != 'jjjj' && !(12 * 2 == 144) && true);//true
var num = 10;
console.log(5 == num / 2 && (2 + 2 * num).toString() === '22');//true
</script>
<script>
var a = 3 > 5 && 2 < 7 && 3 == 4;
console.log(a);//false
var b = 3 <= 4 || 3 > 1 || 3 != 2;
console.log(b);//true
var c = 2 === "2";
console.log(c);//false;
var d = !c || b && a;//true;
console.log(d);
</script>