一、认识JS
1.web三大标准:
结构(html) 骨架
表现(css) 肉体
行为(js) 灵魂
2.javascript和java是什么关系?
没关系
3.JavaScript的特点:
弱类型语言
java是强类型语言,以声明变量为例,float num = 0.23F; 需要指明数据类型
在js中,不需要指定数据类型 var num = 0.121;
跨平台
js语言既可以运行在html文件中,也可以运行在node环境中.....
js也可以写服务器
4.JavaScript的组成:
ECMAScript(核心语法)
DOM(Document Object Model)档对象模型
BOM(Brower ...) 浏览器对象模型
二、JS的引入
1.行内式 强烈不推荐---低耦合
<button onclick="alert('确定');">点击一下</button>
禁止a标签跳转
<a href="javascript:void(0)">百度一下</a>
2.内联式
js代码写在script标签中,页面中可以有多个script标签
执行顺序从上到下依次执行
<script>
var name = "张三";
console.log(num);
console.log(name);
console.log("5+6");
var userlist = [
{
name : "张三",
age : "18",
},
{
name : "李四",
age : "22",
},
{
name : "王五",
age : "34",
}
]
console.log(userlist);
alert('确认');
</script>
3.引入外部js文件 XXXX.js
外部的css文件通过link标签引入
外部js文件通过script标签的src属性引入
script标签中只要存在src属性,标签内部的代码不会被执行
先引入,在使用
<script src="">
// 内部的代码不执行
console.log("121");
</script>
三、JS的输出
1.输出到控制台
console.log() 简写log
console.dir() 显示详细信息 没有简写
console.table() 输出表格
console.clear() 清空控制台
console.error() 输出错误信息
console.warn() 输出警告信息
2.输出到页面
2.1 document.write("")
将内容添加到body标签内,不会覆盖之前的内容,会识别html标签
2.2 innerHTML("")
将内容添加到指定标签中,会覆盖之前的内容,会识别html标签
标签.innerHTML = ""
2.3 innnerText("")
将内容添加到指定的标签中,会覆盖之前的内容,不会识别html标签
标签.innerText = ""
怎么获取指定的标签:
document.querySelector("css选择器");
3.弹窗
3.1 弹框 alert("") window.alert()
点击确定返回值是undefined
3.2 输入框 prompt("")
点击确定返回值是用户输入的内容,点击取消返回值是null
3.3 确认框 confirm("")
点击确定返回值是true 点击取消返回值是false
四、变量声明
变量:临时存储数据(任意数据源类型)的一个容器
var 关键字 声明变量(es5) let和const声明变量方式(es6)
变量名只能由字母,下划线,$,数字组成
不能以数字开头,严格区分大小写
不能是关键字或者保留字
多个单词使用驼峰式命名法
可以但尽量不要用中文
var $_ = 121;
var knNl = '张';
var public = "111";
var name = "张三";//声明一个变量,变量名是name,存储的值是字符串类型
console.log(name,$_,knNl,10*2,public);
五、数据的类型
1.数据类型:
1.1基本数据类型 原始数据类型(栈内存)
string number Boolean null undefined
1.2引用数据类型(堆内存)
数组Array 对象Object 函数 Function
2.检测数据类型 typeof操作符
语法:typeof xxx 或者 typeof(xxx)
1.字符串 string
用引号(""/''/`)引起来的数据
// 字符串 + XXX: +表示拼接符
// es5 引引加加
console.log('名字是' + nam + ',地址是' + address + ',专业是' + major);
// es6 `${变量名}`
console.log(`名字是${nam},地址是${address},专业是${major}`);
// es5需要换行,需要转义 \n表示换行
console.log("hell\n223");
// es6会保存代码的格式
console.log(`awd
da 122`);
1.2 数值类型 number
整数 小数 Infinity(无穷大) NaN(不是一个数)
涉及到NaN的操作返回值是NaN,NaN与自身不相等
小数精度丢失问题:
将小数转化为整数运算
toFixed(n) n表示保留n位小数 默认是0 返回的string类型
在运算的时候,会将其他数据类型转换为数值类型在进行计算
将其他数据类型转化为数值类型的方法
Number(xxx)
console.log(Number(''));//空字符串 0
console.log(Number(' '));//非空字符串 0
console.log(Number('123'));//123
console.log(Number('12x3'));//NaN
console.log(Number(true));//1
console.log(Number(false));//0
console.log(Number(null));//0
console.log(Number(undefined));//NaN
paresInt() 返回整数部分 ,前导有0会忽略,第一个字符是非数字返回NaN
返回值是整数或者NaN
console.log(parseInt("012.223ac"));//12
console.log(parseInt("as2.223ac"));//NaN
console.log(parseInt("Infinity"));//NaN
console.log(parseInt(true));//NaN
console.log(parseInt(null));//NaN
parseFloat() 前导有0会忽略,第一个字符是非数字返回NaN
返回值是整数或者NaN 或者Infinity或者-Infinity
console.log(parseFloat("012.223ac"));//12.223
console.log(parseInt("Infinity"));//Infinity
isNaN(XXX) 判断数值是不是NaN
XXX是NaN的结果为true 不是为falese
console.log(isNaN(NaN));//true
console.log(isNaN("NaN"));//true
console.log(isNaN(""));//false
console.log(isNaN(Infinity));//false
console.log(isNaN(undefined));//true
1.3 布尔类型 boolean
真 true 数值1
假 false 数值0
1.4null和undefined
null表示一个空值,
undefined未定义,声明变量没有赋值,浏览器给变量附一个空值,
这个空值叫做undefined
= 赋值,优先级最低,将等号右边的数据赋值给左边
== 判断符号两边的值是否相等,只判断值不判断类型,返回值是布尔类型
=== 判断等号两边的值和数据类型是否全等,及判断值又判断数据类型
var nul = null;
var a ;
console.log(nul,a);//null undefined
console.log(typeof nul,typeof a );//object undefined
console.log(null == undefined);//值是相等的,都表示空值,null是自己赋值
console.log(null === undefined);//值是相等的,数据类型不等
六、数据类型相互转换
1.转换为string
1.1加个空字符串
console.log(100+'');//'100'
console.log(true+'');//'true'
console.log(null+'');//'null'
1.2XXXX.toString() null和undefined没有toString()方法,调用会报错
console.log((1000).toString());
console.log(true.toString());
1.3String(XXXX) null和undefined可以使用
2.转化为布尔类型
数据类型 true false
string 非空字符 空字符
number 非0非NaN 0 和NaN
null / null
undefined / undefined
引用数据类型 引用数据类型 /
console.log(Boolean(''));//空字符串false
console.log(Boolean(' '));//非空字符串true
console.log(Boolean(0));//false
console.log(Boolean(NaN));//false
console.log(Boolean(11));//false
console.log(Boolean(null));//false
console.log(Boolean(undefined));//false
console.log(Boolean([]));//true
3.隐式转化 将其他类型转换为数值类型 + - * / %
console.log(+'123');//number 123
七、运算符
1.一元操作符:针对一个变量
一元加 num++ ++num
一元减 num-- --num
2.三目运算符: 表达式?语句1:语句2
语句1为表达式真执行的语句 语句2为表达式假执行的语句
3.比较运算符:返回值是布尔值
> < <= >= == != === !==
两个都为数值直接进行比较
数值和字符串进行比较,将字符串转换为数值类型在比较
布尔值和数值进行比较,将布尔值转换为数值
null和undefined进行比较,null==undefined为true
引用类型比较,先调用valueof()方法获取原始值(一般为它本身),在调用toString()方法
字符比较,比较的是ASCII码,字符一次比较,相等则比较下一个