JavaScript
简称js,是一种脚本语言,是不需要进行编译的,
主要是用于web的开发,可以给网页添加各种各样的动态效果
HTML 定义网页的内容
CSS 规定网页的布局
JavaScript 对网页行为进行编程
js的组成是有三部分组成
基本的语法
文档对象模型(DOM)
浏览器对象模型(BOM)
特点
1.js是面对对象的,可以创建对象和使用对象。
2.js是不需要编译就能执行的
3.js只要有浏览器支持就可以运行
4.js对数据类型是不需要任何要求的,采用的方式是弱类型。
JavaScript引入方式
Js注释
单行注释 //
多行注释 /* */
在HTML文件中js语言有两种引入方式
方式一:当前HTML
<script type="text/javascript">
//<script>可以出现在HTML页面的任何位置
//整个HTML页面是自上而下一次执行
//alert方法具有阻塞作用,用户点击确定后,alert才结束
alert("Hello World!"); //页面弹出框
第一种引入方式
</script>
方式二:引入外部js文件
<script type="text/javascript" src="01.js">/* 此处不写代码*/</script>
//以script标签作为引入时,标签内部不在写任何js代码
alert ( "Hello World!" ) ;
< html >
< head>
< title> 在HTML中嵌入JS的第二种方式</ title>
< meta content = " text/html;charset=utf-8" />
</ head>
< body>
< script type = " text/javascript" src = " 01.js" > </ script>
</ body>
</ html>
css与js的执行时机
js加载后立即执行
js执行时会阻塞页面后续的内容
原因:因为浏览器的展示需要一个稳定的dom树结构,
而js中的代码有可能改变dom树的结构
所以可以将script标签放到body闭合标签之前,
这样能确保脚本执行前页面已经完成了DOM树的渲染;
css 和 html 是并行加载的,
过程中如果遇到css 或者 img,则会向浏览器返回一个请求,
待资源返回后,将其添加到dom的相应位置中
JavaScript数据类型
变量名可以是_,数字,字母,$组成,不能数字开头
变量名区分大小写
变量的定义:
var 变量名 = 变量值;
数据类型:
获取变量类型 typeof 变量名
打印变量类型
打开浏览器——>F12——>控制台(console)
console.log(typeof 变量名)
JS的数据类型有5种
4种原始类型:Undefined,Boolean,Number,String
1种引用类型:Object
undefined类型 变量已定义未赋值 var i;
var i = undefined 清空对象
number类型 不区分整数与浮动数
NaN类型 不是一个数字(类型为number)
1 (类型为number)
-1.5 (类型为number)
数值类型 + undefined 运算后结果为NaN
常用方法parseInt("123456") 返回123456 将字符串转为数字
parseInt("abc") 返回NaN
常用方法parseFloat("1.23456") 返回1.23456 将字符串转为浮点数
String类型 字符串类型
length属性 返回字符串长度
trim() 返回删除前后空格的字符串,不改变原字符串
任何类型与字符串相加结果都是字符串
boolean类型 true/false 小写
以下元素等价于false
空字符串/0/null/undefined/NaN
object类型
var arr = [1,2,3,4] 或者 var arr = new Array(1,2,3);
数组以下标取值 arr[0]
length属性 获取数组元素个数
push() 尾部追加数据
pop() 尾部获取元素
reverse() 元素顺序反转
join() 将数组元素转为字符串
concat() 连接数组
sort() 排序
遍历数组元素
for(var i = 0; i < arr.length; i++){
console.log(i);
}
null表示变量的值为空,是object类型
var dict = {name : "zs" , age : "23"}
js中键(属性)默认可以不用加引号,
而且会自动将单引号转为双引号
取值方式一: 对象[变量]
取值方式二: 对象.属性 dict.name
遍历
for(var i in p ){i是p对象的key
console.log(p[i])
}
自定义类型:
function person(name,age,job){
this.name=name;
this.age=age;
this.job=job;
this.study=function(){
console.log(123);
}
}
创建对象
var bill=new person("张三","23","程序猿 ");
调用属性
bill.name
调用方法
bill.study()
prototype属性可以动态给对象添加扩展方法与属性
person.prototype.sex=null; 动态的为person类型添加一个sex属性
bill.sex="男"; 为对象的属性赋值
console.log(bill);在浏览器控制台输出这个对象的值
JavaScript运算符
算术运算符+ - * / ++ -- %
比较运算符 > >= < <= != == === !==
= 赋值
== 判断值是否相等
=== 判断值是否相等同时类型是否一致
逻辑运算符 && || !
赋值运算符 = += -= *= /=
JavaScript流程控制
if(条件判断){
}else if(条件判断){
} else{
}
所有分支语句仅且只有一个可以执行
esle if(){}可以有多个
else只能有一个
switch(匹配参数){
case 匹配值1 :
break;
case 匹配值2 :
break;
case 匹配值3 :
break;
default :
都不匹配执行此处
break;
}
case 匹配值可以有多个;仅且执行一条分支语句
case中没有break会发生case穿透
default只能有一个,其他皆不满足,执行此处
执行完成后break结束当前switch语句
JavaScript循环语句
for循环:只有具体的循环次数时用for循环
for(var i = 0; i < 10 ; i++){
console.log(i);
}
while循环:不知道具体循环次数用while循环
var i = 0
while(i < 10){
console.log(i);
i++;
}
三元运算符:boolean条件 ? 真值 : 假值
var i = a > b ? a : b
其它
null与undefined
null表示变量的值为空
undefined表示变量已定义但是未赋值
null == undefined 返回true,只是值相等
null === undefined 返回false;null是object类型,undefined是undefined类型
isNaN(变量) 判断变量是否为非数字,非数字返回true;否则返回false
console.log(10/0) 打印10除以0的值,结果为Infinity,表示无穷大
将字符串装换为数字——parseInt(str) 自动取整
var a = “100”;
a = parseInt(a);
parseFloat();将字符串转换为数字,保留小数