(一)javascript简介
-
1-定义
- 具有面向对象能力的、解释型的编程语言.
-
2-历史
- 1997 netscape LiveScript
- 和sun合作 曾java热度 改名javascript
- 微软 JScript \ EaseScript
- ECMA 欧洲计算机制造商协会(European Computer Manufactures Association) ECMAScript(标准) ECMA-262
- ECMAScript 1.0 1997
- ECMAScript 2.0 1998
- ECMAScript 3.0 1999
- ECMAScript 5.0 2009 *
- ECMAScript 6.0 2015 es6 *
- ECMAScript 7.0 2016 es7
- ECMAScript 8.0 2017 es8
- ECMAScript 9.0 2018 es9
- ECMAScript 10.0 2019 es10
-
3-组成
- ECMAScript : js的标准,定义了js中最核心的知识点,变量,操作语句,关键字...
- DOM(document object model): 文档对象模型,定义了操作HTML文档的属性和方法.比如获取input的值,操作div的样式等
- BOM(borwser object model): 浏览器对象模型,定义了操作浏览器的属性和方法. 比如打开窗口,获取浏览器版本信息等
-
4-特点
- 解释型: 不同于 java , C 等编译型语言,需要编译后才能执行,js直接可以放在浏览器中被js的解释器执行.
- 跨平台: 不依赖操作系统和语言环境,只要有浏览器就能运行
- 事件驱动: js的操作大部分都是基于用户的某些操作来完成的,js中的这种操作叫做事件驱动
- 基于对象: js里面提供了很多内置的对象,可以使用已有的对象,也可以创建对象
-
5-用途
- 交互动效
- 客户端表单验证
- 动态数据绑定
- js组成: ECMAScript + DOM + BOM
- ECMAScript 和 javascript 关系?
- ECMAScript 是 javascript 的标准
- javascript 是 ECMAScript 的一种实现
(二)js的三种引入方式
-
1-行内式 : 在开始标签上引入js的事件属性,在属性值里写入js代码
<div onclick="alert('hello');"></div> -
2-内嵌式 : 在body末尾,添加一个script标签(脚本块),在script标签之间写入js代码
<script> alert('...'); </script> -
3-外链式 : 在body末尾,添加一个script标签(脚本块),通过script标签的src属性引入 .js文件 , 在.js文件中写入js代码
<script src="script.js"> //外链式脚本块之间的代码不会运行 </script>
(三) js代码调试语句(输出方式)
- 1-
alert("hello world");系统弹出提示框- 会阻塞其他代码的运行
- 2-
console.log("hello world!");控制台输出- 控制台中可以运行js代码,并且js的报错信息也是在控制台中提示
(四) 变量
- 可变的量:相当于一个带有名称的容器 作用:存储值和代表值
- 声明变量
var 变量名 = 值; 声明的同时进行赋值
var a; 先声明 , 声明之后默认值是undefined
a = 10; 后赋值
var a,b,c; 连续声明多个变量
- 变量必须先声明再使用,否则报错 "变量名 is not defined"
- 变量命名规则
- 数字\字母\下滑线$组成
- 不能以数字开头
- 不能使用关键字和保留字
- 推荐驼峰命名法 studentInformation
- 尽量使用英文单词,可以适当简写
(五) 注释语句
- 单行注释
// 单行注释 - 多行注释
/* 多行注释 */
(六) 简单的交互思路
- 操作哪个元素就先获取哪个元素
var oBox = document.getElementById('box');
- 绑定事件
oBox.onclick = function(){
}
- 事件发生时做什么
oBox.onclick = function(){
//这里面写事件发生时要执行的所有操作
}
(七) js操作标签样式
element.style.样式属性 = 值;
oBox.style.backgroundColor = "red";
- 样式属性名中带 '-' ,都转换成驼峰命名 例如 font-size --> fontSize
- cssText 批量操作css样式 ,相当于设置标签上的style属性值
oBox.style.cssText = "width:100px;height:100px;";
(八) 文档就绪事件
window.onload = function(){
...
}
- 如果直接把js放在head里面,会报错,因为页面从上到下加载,运行到js代码的时候页面的标签还买加载出来,获取不到,所以需要添加 文档就绪事件,让页面加载完之后再执行js
(九) 操作标签的内容
-
1-闭合标签
- innerHTML : 设置或者获取标签之间的HTML代码
- innerText : 设置或者获取标签之间的文本(不能识别标签)
oBox.innerHTML = "<h1>hello</h1>"; oBox.innerText = "<h1>hello</h1>"; -
2- 表单元素的值
- value : 获取或者设置表单元素的值
oInp.value = "张三";
(十) 操作标签属性
<div id="box" class="red">
<img src="img/pic.jpg" alt="替换文字">
<a href="" target="_blank">
<form action="" method="">
<input type="" name="" checked>
<option seleted></option>
- 标签上的属性大部分情况都是直接用元素 .属性名 ,比如
oBox.id = "box";
oImg.src = "img/pic.jpg";
oLink.href = "http://www.ujiuye.com";
- class属性比较特殊 ,需要用className属性访问 (因为class是js中的关键字)
oBox.className = "red"
-
标签属性的值正常情况都是标签上怎么写的,获取回来就是什么,checked和selected属性使用 true 和 false 表示是否选中
box.class = "box red"; -
设置单选按钮\复选框\下拉列表选项选中状态也是使用true和false,true表示选中,false表示取消选中
radio.checked = true;
(十一) 常用的鼠标事件
-
onclick 单击事件
-
ondblclick 双击事件
-
oncontextmenu 右键菜单事件
-
onmousedown 鼠标按键按下
-
onmouseup 鼠标按键抬起
-
onmouseover 移入事件
-
onmouseout 移出事件
-
onmouseenter 进入事件
-
onmouseleave 离开事件
-
onmousemove 移动事件
-
onmouseover和onmouseenter区别: 鼠标从子元素上移入移出,会反复触发父元素的over事件
-
onmouseout和onmouseleave区别: 鼠标从子元素上移入移出,会反复触发父元素的out事件