js的作用
HTML用于定义页面中的内容
css用于控制HTML元素的外观和样式
js用来操作HTML元素
HTML+css+js组成前端的基本要素
- 可以在页面中控制任意元素
- 可以在页面中动态嵌入元素
- 可以操作浏览器
- 可以与用户进行数据交互
js中的输出语句
1、弹警告窗
alert(字符串或变量):
2、控制台输出
console.log(字符串货变量):
3、打印在新页面中
document.write(字符串或变量):
js的组成
1.ECMAScript
简称为ES,是js的标准也是js的核心语法
包含了数据类型、定义变量、流程控制语句等语法内容
2.BOM
浏览器对象模型
3.DOM
文档对象模型
ECMAScript核心语法
原始类型
js中的原始类型 | 说明 |
数据型number | 整数、小数都称为数值型 |
字符串string | 用单引号或双引号引起起来的都是字符串 |
布尔型boolean | ture/false |
未定义undefined | 当某个变量没有声明或没有值时 |
空null | 某个引用类型变量通过null设置为空 |
引用类型
如对象、数组、函数等都是引用类型
定义变量
var/let 变量名;
var name;
var age;
let sex;
标识符的命名规则
- 由字母、数字、下划线和$符号组成
- 不能以数字开头
- 不能使用js中的关键字
变量的初始化
var name;
name = "tom";
var age=22;
sex = "男";
console.log("name:"+name+",age:"+age+",sex:"+sex);
运算符
js中的boolean类型,0可以表示false,非0可以表示ture
默认ture为1,所以可以用ture或false当做数字来运算。
- 算术
+ - * / %
+ 两端如果有一端是字符串,作为拼接使用
+ 两端如果都是数值,作为相加使用
除+外,其余符号都可以计算字符串
- 关系
> < >= <=
用法同java,结果为boolean
==
比较值是否相同,不比较数据类型,如"123"==123结果为true
===
比较值和数据类型是否相同,如"123"===123结果为false
!=
比较值是否不同,如"123"!=123结果为false
!==
比较值和数据类型是否不同,如"123"!==123结果为true
- 逻辑
&& || !
用法同java
- 赋值和复合赋值
= += -= *= /= %=
a*=b+c相当于a=a*(b+c)
符号两端当做整体运算后赋值给符号左侧变量
- 自增自减
++ --
符号在前,先+1或-1后使用
符号在后,先使用后+1或-1
如果独立成行,都为+1或-1
var i=10; var res=i-- - --i;
//res为10-8=2,i最终为8
- 条件
表达式1?表达式2:表达式3
判断表达式1,结果为true执行表达式2,结果为false执行表达式3
条件语句
if语句
//单分支
if(){
}
//双分支
if(){
}else{
}
//多分支
if(){
}else if(){
}
//嵌套
if(){
if(){}
}
Switch语句
//可以是任意类型
var op;
switch(op){
case "a":
break;
case 123:
break;
case true:
break;
default:
}
与java中不同的是,小括号中没有数据类型的限制,不同的case后也可以写不同类型的数据。 没有break,会继续执行后续case后的内容,直到break或没有代码,如果没有任何case满足,执行default。
循环
while
while(循环条件){
循环体;
}
do-while
do{
循环体;
}while(循环条件);
for
for(定义循环变量;判断循环条件;更新循环变量){
循环体
}
continue和break
continue停止本次循环,执行下一次循环。
break停止所有循环。