1.基础常识
JS的发展历史:
JavaScript是1995年网景公司雇佣Brenda eich开发的全新语言
JavaScript最初是为了实现浏览器客户端交互
ECMAScript和JavaScript的关系,前者是后者的规范,后者是前者的表现。这两个词在日常场合是等价的
JS的三种书写位置:
行内式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>行内式</title>
</head>
<body>
<a href='javascript:alert("helloworld")'></a>
<div onclick='alert("my name is qiaqia")'>点点我</div>
</body>
</html>
内嵌式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>内嵌式</title>
</head>
<body>
<script>
var a=10
console.log(a)
</script>
</body>
</html>
外链式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>外链式</title>
</head>
<body>
<!--要在外面建一个index.js文件-->
<script src="index.js"> </script>
</body>
</html>
写在body结束标签之前
JS中的注释:
单行注释 //
多行注释 /**/
<!--这是html的注释 -->
JS的组成:
1.ECMASCRIPT:定义了javascript的语法规范,描述了基本语法和数据类型
2.BOM:浏览器对象模型
3.DOM:文档对象模型
2.变量:
1.值变化的量
2.本质上是内存中存储单元,理解为一个容器
3.变量定义
语法:var(关键字) 、$
var 变量名称 //
var name //使用var关键字定义一个名为name的变量(相当于创建一个容器)
4.变量的赋值
score=100//将100赋值给score变量
5.访问变量
console.log(变量)
6.变量名的命名
规则(强制)
1.必须是由字母(a-z A-Z)、数字(0-9)、下划线(_)组成
2.不能数字开头
3.不能是关键字(有特定意义的单词) 比如:var
4.不能是保留字(将来有特殊用处的单词)
规范
1.语义化
2.驼峰命名
当变量有两个或两个以上的单词组成时,第二个单词首字母大写
var userName
3.不要使用中文
7.内存结构:
1.栈区域和堆区域
2.变量本质上是内存中存储单元
3.数据类型
1.定义:变量值的类型
2.数据类型分类:
1.基本数据类型
1.数值类型:number
所有的数字 整型 小数
特殊的数字类型 NaN not a number 非数字值
2.字符串:string
用引号引起来 'helloworld'【单引号 双引号 反引号】
var userName = 'wuYuling' //创建一个名为userName的字符串1类型的变量,值是
3.布尔类型:boolean
true 成立(真) false 不成立(假)
var isDelete=true
4.空类型:null 类型名object
null
5.未定义类型:undefined
var age
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h2>五种基本数据类型</h2>
<script>
var num=100.3
var userName='wuYuling'
var isInsert=true
var isObject=null
var age
console.log("num的数据类型是:",typeof(num),"num的值是:",num)
console.log("userName的数据类型是:",typeof(userName),"userName的值是:",userName)
console.log("isInsert的数据类型是:",typeof(isInsert),"isInsert的值是:",isInsert)
console.log("isObject的数据类型是:",typeof(isObject),"num的值是:",isObject)
console.log("age的数据类型是:",typeof(age),"age的值是:",age)
</script>
</body>
</html>
2.复杂数据类型
3.程序判断数据类型
1.typeof 变量 | typeof(变量)
2.isNaN(变量) 判断是否是非数字值 String类型特殊【如果为'100'会先转为100】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>isNaN非数字类型</title>
</head>
<body>
<script>
var str='100'
// isNaN(str)
var str1='wuyuling'
console.log(isNaN(str))//-->false
console.log(isNaN(str1))//-->true
</script>
</body>
</html>
4.console.log(变量1)
打印多值加, console.log(变量1,变量2,变量3)
console.log('字符串')
4.数据类型的转换
1.字符串->数值型
1.Number()
var message='100'
Number(message) ->100
var userName='jack'
number(userName) ->NaN 数值型
var a=''//空字符串
Number('')-->0
2.parseInt()
parseInt(message) ->100
特点:
1.从左向右转换
2.遇到数值字符串转换为数值,遇到非数值结束转换,如果第一个数值为非数值,结束输出NaN
parseInt("10aaaa0")-->10
3.小数->取整
parseInt("10.98")-->10
3.parseFloat()
特点:
1.从左向右转换
2.遇到数值字符串转换为数值,遇到非数值结束转换,如果第一个数值为非数值,结束输出NaN
parseFloat("10aaaa0")-->10
3.小数->浮点数
parseFloat("10.98")-->10.98
2.其它类型转number
Number(true)->1
Number(false)->0
Number(null)->0
Number(undefined)->NaN
3.其他类型转字符串
1.String
String(100)->'100'
String(undefined)->'undefined'
String(null)->'null'
String(true)->'true'
2.变量.toString[null和undefined会报错]
var b=true
b.toString()
3.连接符 + 【隐式类型转换】
在 JavaScript中有两层意义
1.连接符【只要+号任意一边是字符串,表示连接符】
【隐式类型转换】 10 + ''='10'
2.算术运算加法运算
4.其它类型转成布尔
Boolean
只有'' 0 null undefined NaN 是FALSE 其它全是TRUE
5.运算符
1.算术【数学】运算符:参与算术运算 + - * / %[取余]
【除+外其它运算符会自动转为数值型【都是隐式类型转换】】
2.赋值运算符
=
a+=10 a=a+10
a-=10 a=a-10
3.比较运算符【结果为Boolean值】
> >= < <= == === != [!==]
8>3 比较运算结果 Boolean值
== 和 ===区别
==比较值是否相同
===比较值和数据类型
100 == '100' ==>true
100 ==='100' =>false 【恒等于】
4.逻辑运算符
逻辑与&&【同为真则为真】
逻辑或||【同为假则为假】
逻辑非 !【非真则假,非假则真】
注意:短目运算
逻辑与运算时,若果左边为FALSE,左边不参与运算
false&& true ->false
5.自增自减运算符[一元运算符]
1.自增++
自身的值加一 a++
2.自减--
自身值减一 a--
前置和后置【如果是单独运算没有区别都是自身+1或-1 如果参与其它运算就有区别】
前置
++a 先加一再参与其它运算
后置
a++ 先参与其它运算再加一
目录
1.值变化的量 2.本质上是内存中存储单元,理解为一个容器 3.变量定义
1.算术【数学】运算符:参与算术运算 + - * / %[取余]