Web标准
Web标准也称为网页标准，有三个组成部分：
- HTML:负责网页基本结构（页面元素和内容）
- CSS:负责网页的表现效果
- JavaScript:负责网页的行为（交互效果）
JS定义
JavaScript是一门跨平台、面向对象的脚本语言，是用来控制网页行为的。
脚本语言通常直接解释执行，不需要编译，缩短了传统编程语言的运行过程
JS引入方式
JS引入方式=JS代码与HTML代码的结合方式
- 内部脚本：将JS代码定义在HTML页面中
– JavaScript代码必须位于<script><\script>标签之间
– 在HTML文档中可以放置任意数量的<script>
– 一般会把脚本置于<body>元素的底部，可以改善显示速度 - 外部脚本：将JS代码定义在外部JS文件中，然后引入到HTML页面中
– 外部JS文件只包含JS代码，不包含<script>标签
– <script>标签不能自闭和
正确的：<script src=“js/demo.js”><\script>
自闭合：<script src=“js/demo.js”\>
JS基础语法
书写语法
- 区分大小写
- 结尾分号可有可无
- 注释：
- //单行注释
- /*多行注释 */
输出语句
1.window.alert();//写入警告框，window.可以省略
或alert();
2.document.write();//写入HTML页面，在浏览器展示
3.console.log();//写入浏览器控制台
变量
JS中用var关键字来声明变量
JS是一门弱类型的语言，变量可以存放不同类型的值
变量名规则：
- 组成字符可以是字母、数字、下划线、或美元符号
- 数字不能开头
- 建议使用驼峰命名
var a;
a = "张三";
- 特点1：作用域比较大，全局变量
- 特点2：可以重复定义（后面覆盖前面的）
var x = 1;
var x = "A";
alert(x);//x=A
注意事项：ECMAScript 6新增了let关键字和const关键字来定义变量
let：let所声明的变量只在let关键字所在的代码块内有效，且不允许重复声明
const：声明一个只读的常量，声明之后不能改变
数据类型
JS中分为原始类型和引用类型
- number：数字（整数、小数、NaN）
- string：字符串，单双引皆可
- boolean：布尔 true false
- null：对象为空
- undefined：当声明的变量未初始化时，该变量的默认值是undefined
使用typeof运算符可以获取数据类型
var a;
alert(typeof null);//object （早期错误沿用至今）
运算符
===：全等运算符
==：会进行类型转换
===: 不会进行类型转换
var a=10;
alert(a=="10");//true
alert(a==="10");//false
alert(a===10);//true
类型转换
- 字符串类型转为数字：如果字符串字面值不是数字则转为NaN
alert(parseInt("12"));//12
alert(parseInt("12A45"));//12
alert(parseInt("A15"));//NaN
- 其他类型转化为boolean：
- number：0和NaN为false，其他均为true
- String：空字符串为false，其他均为true（空格也是true）
- Null和undefined：均转为false
JS函数
JS函数通过function关键字进行定义
方式一：
function functionName(参数1,参数2...){
//执行的代码
}
方式二：
var functionName = function(参数1,参数2...){
//执行的代码
}
注意：
- 形参不需要类型
- 返回值也不需要定义类型，可直接return
- 函数调用时可以传递任意个数的参数
JS对象
Array
定义
//方式一：var 变量名=new Array(元素队列);
//方式二：var 变量名=[元素列表];
var arr = new Array(1,2,3,4);
var arr=[1,2,3,4];
arr[10]="hello";
特点：长度可变 类型可变
var arr=[1,2,3,4];
arr[10]=50;
//arr为[1,2,3,4,empty*5(undefined),50]
arr[9]="A";
arr[8]=true;
//arr为[1,2,3,4,empty*4,true,'A',50]
属性：length
方法：
forEach()：遍历数组有值的元素（undefined不会遍历）
push()：添加到数组的末尾
splice()：从数组中删除元素
var arr=[1,2,3,4];
arr[10]=50;
arr.forEach(function(e){
console.log(e);
})//输出：1,2,3,4,50
//ES6 箭头函数：(...)=>{...} --简化函数定义
//简化形式
arr.forEach((e)=>{
console.log(e);
})
arr.push(7,8,9);
arr.splice(2,2);
splice(startnumber,deletecount )
string
定义
//方式一：
var str=new String("Hello");
//方式二：
var str="Hello";
var str='Hello';//单双引号均可
属性：
- length：字符串的长度
- charAt()：返回在指定位置的字符
- indexOf()：检索字符串
- trim()：去除字符串两边的空格
- substring()：提取字符串中两个指定的索引号之间的字符
var str="hello string";
console.log(str.length);//12
//charAt
console.log(str.charAt(3));//l
//indexof
console.log(str.indexOf("lo"))//3
//trim
str=" Hello String "
var s=str.trim();
console.log(s);//Hello String
//substring(start,end) [start,end) 含头不含尾
console.log(s.substring(0,5));//Hello
JS自定义对象
/*定义格式：
var 对象名={
属性名1：属性值1，
属性名2：属性值2，
属性名3：属性值3，
函数名称：function(形参列表){}
};*/
var user={
name:"Tom",
age:20,
gender:"male",
eat:function(){
alert("用膳");
}
//简化方法：
eat(){
alert("用膳");
}
}
JSON
概念：JavaScript Object Notation，javascript对象标记法
JSON是通过JavaScript对象标记法书写的文本
JSON语法简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输
{
"name":"Tom",
"age":20,
"gender":"male"
}
//定义
var userStr='{"name":"Jerry","age":18,"addr":["北京","上海","西安"]}';
value的数据类型为：
- 数字
- 字符串（在双引号）
- 逻辑值（true或false）
- 数组（在方括号）
- 对象（在花括号中）
- null
//JSON字符串转为JS对象
var jsObject = JSON.parse(userStr);
alert(userStr.name);//错误，此时userStr是一个字符串，并不是对象
alert(jsObject.name);//Tom
//JS对象转为JSON字符串
var jsonStr=JSON.stringify(jsObject);
BOM
概念：Browser Object Model 浏览器对象模型，允许JavaScript与浏览器对话，JavaScript将浏览器的各个组成部分封装成对象
组成：
- Window：浏览器窗口对象
- Navigator：浏览器对象
- Screen：屏幕对象
- History：历史记录对象
- Location： 地址栏对象
Window对象
介绍：浏览器窗口对象
获取：直接使用window，其中window.可以省略
window.alert("hello");
alert("hello");
属性：
- history
- location
- navigator
方法：
- alert():显示带有一段消息和一个确认按钮的警告框
- confirm():显示带有一段信息以及确认按钮和取消按钮的对话框
- setInterval():按照指定的周期（以毫秒计）来调用函数或计算表达式
- setTimeout():在指定的毫秒数后调用函数或计算表达式
//confirm有返回值
var flag=comfirm("您确认删除该记录吗？");
alert(flag);//确认=true 取消=false
//setInterval --周期性地执行某一个函数
var i=0;
setInterval(function(){
i++;
console.log("定时器执行了"+i+"次");
},2000);
//setTimeout --延迟指定时间执行一次
setTimeout(function(){
alert("JS");
},2000);
Location对象
介绍：地址栏对象
属性：href:设置或返回完整的URL
alert(location.href);//返回地址栏URL
location.href="https://www.baidu.com";//转到当前地址
DOM
概念：Document Object Model，文档对象模型
将标记语言的各个组成部分封装为对应的对象：
- Document：整个文档对象
- Element：元素对象
- Attribute：属性对象
- Text：文本对象
- Comment：注释对象
JavaScript通过DOM对HTML进行操作：
- 改变HTML元素的内容
- 改变HTML元素的样式（CSS）
- 对HTML DOM事件作出反应
- 添加和删除HTML元素
DOM树：
DOM定义了访问HTML和XML文档的标准，分为三个不同的部分：
1.Core DOM - 所有文档类型的标准模型
- Document：整个文档对象
- Element：元素对象
- Attribute：属性对象
- Text：文本对象
- Comment：注释对象
2.XML DOM - XML文档的标准模型
3.HTML DOM - HTML文档的标准模型 - Image:<img>
- Button:<input type=‘button’>
HTML中的Element对象可以通过Documen对象获取，而Document对象是通过window对象获取
Document对象中提供了以下获取Element元素对象的函数：
//1.根据id属性值获取，返回单个Element对象
var h1=document.getElementById('h1');
//2.根据标签名称获取，返回Element对象数组
var divs=document.getElementsByTagName('div');
//3.根据name属性值获取，返回Element对象数组
var hobbys=document.getElementsByName('hobby');
//4.根据class属性值获取，返回Element对象数组
var clss=document.getElementsByClassName('cls');
//修改HTML元素举例
var divs = document.getElementsByClassName('cls');
var div1 = divs[0];
div1.innerHTML = "哈哈哈";
//innerHTML 是可以识别HTML标签的
div1.innerHTML += "<font color='red'>very good</font>";
JS事件监听
事件：HTML事件是发生在HTML元素上的“事情”
事件监听：JS可以在事件被侦测到时执行代码
事件绑定
//方式一：通过HTML标签中的事件属性进行绑定
<input type="button" onclick="on()" value="按钮1">
<script>
function on(){
alert('我被点击了');
}
</script>
//方式二：通过DOM元素属性绑定
<input type="button" id="btn" value="按钮2">
<script>
document.getElementById('btn').onclick=function(){
alert('我被点击了！');
}
</script>
常见事件
| 事件名 | 说明 |
|---|---|
| onclick | 鼠标单击事件 |
| onblur | 元素失去焦点 |
| onfocus | 元素获得焦点 |
| onload | 当某个页面或图像被完成加载 |
| onsubmit | 当表单提交时触发该事件 |
| onkeydown | 某个键盘的键被按下 |
| onmouseover | 鼠标被移到某元素上 |
| onmouseout | 鼠标从某元素移开 |
1367
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
