JavaScript学习笔记
一、JavaScript简介
1.什么是JavaScript
- 被设置用来向HTML页面添加交互行为。
- JavaScript是一种脚本语言（轻量级编程语言）。
- 由多行可执行的计算机代码组成。
- 通常被直接嵌入HTML页面。
- 是一种解释性语言（代码执行不能进行预编译）。
2.JavaScript的作用
- HTML：它是整个网站的骨架。
- CSS：它是对整个网站骨架内容进行优化（修饰）。
- JavaScript：它能让整个页面具有动态效果。
3.JavaScript的组成
- ECMAScript：核心，包含基本语法、变量、关键字、保留字、数据类型、语句、函数等等。
- DOM：文档对象模型，包含整个HTML页面的内容。
- BOM：浏览器对象模型，包含整个浏览器相关的内容。
二、JavaScript基础
1.语法
- 与java一样，变量、函数名、运算符以及其他一切都是区分大小写的。
- 变量是弱类型的，定义变量时只用var运算符，可以将它初始化为任何值。可以随时改变变量所存数据类型（尽量避免这样）。
- 每行结尾的分号可有可无（建议写上）。
- 注释与java相同。
2.变量
- 所有变量声明只能使用var。例如：var a = 123；var test；
- 可以不对变量进行初始化，变量声明不是必须的。
- 如果在函数内部使用var定义，那么它是一个局部变量，如果没有使用var定义，那么它是一个全局变量。
3.数据类型
- 原始数据类型：
- undefined：未定义的（已经声明，但为赋值）
- boolean：布尔类型
- number：数字类型（小数类型与整数类型）
- string：字符串类型
- object：对象类型，或null值（没有声明的变量值为null，类型为object）
- 注意：typeof运算符对于null值会返回object，这实际上是JavaScript最初实现中的一个错误，然后被ECMAScript沿用了。现在，null被认为是对象的占位符，从而解释了这一矛盾，但从技术上来说，它任然是初始值。
- 引用数据类型：
- Array：数组
- Boolean：布尔
- Date：日期
- Math：算术
- Number：数字
- String：字符串
- RegExp：对象
4.等性运算符
- 单等于（=）：用于赋值。
- 双等于（==）：用于比较，字符串类型的变量会转换为number类型进行比较。
- 三等于（===）：用于比较，直接进行比较，不进行转换。
5.语句
- 与java类似。
6.函数
- 有名函数：function fun1();
- 匿名函数：function();
三、Document对象（DOM）
1.简介
- 当网页被加载时，浏览器会创建页面的文档对象模型。
- DOM可以改变HTML元素。
- DOM可以改变HTML属性。
- DOM可以改变CSS样式。
- 可以对页面所有事件做出响应。
2.DOM HTML
- 改变HTML内容
//new HTML为页面内容
document.getElementById(id).innerHTML=new HTML;
- 改变HTML属性
//attribute为属性名，new value为属性内容
document.getElementById(id).attribute=new value;
3.DOM CSS
- 改变HTML样式
//property表示样式，new style为值
document.getElementById(id).style.property=new style;
4.DOM常用事件
- onload和onunload事件：
- 页面加载事件、页面关闭事件。
- 用户在进入或者离开页面时被处罚，所有操作都可以放入其绑定的方法中。
- 可用于检测访问者的浏览器类型、浏览器版本，并基于这些信息来加载网页的正确版本，可用于处理cookie。
- 事件要绑定在body标签中。
- onchange事件：
- 事件常结合输入字段的验证来使用，当用户改变输入的内容时，触发这个事件。
- 常用于多级联动。
- 事件通常绑定到input标签中。
- onmouseover和onmouseout事件：
- 鼠标移入和移出事件。
- 事件可用于在用户鼠标移至某元素上方和移出元素时触发。
- onmousemove事件：
- 鼠标被移动事件。
- 常用于标记已经查看过的信息。
- onfocus和onblur事件：
- 聚焦和离焦事件，当鼠标点击输入框或离开输入框时，输入框会发生一定的变化，从而触发提示，常用于表单校验。
- 事件通常绑定在input标签中。
- onclick和ondblclick事件：
- 鼠标单击或双击事件。
- onkeydown和onkeypress事件：
- 键盘按下和松开事件，搜索引擎使用较多。
- onsubmit事件：
- 表单提交事件，用于表单校验时是否提交。
四、Brower对象（BOM）
1.Window
Window表示浏览器的窗口。
- 常用方法
- alert（“内容”）：将内容以弹窗形式输出。
- setInterval（code，milliseconds）：按指定周期milliseconds执行代码串code。
- clearInterval（）：清除定时操作。
- setTimeout（code，milliseconds）：按指定时间milliseconds执行一次代码串code。
- clearTimeout（）：清除定时操作。
- confirm（“message”）：显示带有提示信息的确定取消框。
- prompt（“message”）：显示带有提示信息的输入框。
- 属性
| 属性 | 描述 |
|---|---|
| closed | 返回窗口是否已经被关闭。 |
| defaultStatus | 设置或者返回窗口状态栏中默认文本。 |
| document | 对Document对象的只读引用。 |
| frames | 返回窗口中所有命名的框架，该集合是Window对象的数组，每个Window对象在窗口中含有一个框架。 |
| history | 对History对象的只读引用。 |
| innerHeight | 返回窗口的文档显示区的高度。 |
| innerWidth | 返回窗口的文档显示区的宽度。 |
| length | 设置或返回窗口。 |
| location | 用于窗口或框架的Location对象。 |
| name | 设置或返回窗口的名称。 |
| navigator | 对 Navigator 对象的只读引用。 |
| opener | 返回对创建此窗口的窗口的引用。 |
| outerHeight | 设置或返回一个窗口的外部高度。 包含工具条与滚动条。 |
| outerWidth | 设置或返回一个窗口的外部宽度。 包含工具条与滚动条。 |
| pageXOffset | 设置或返回当前页面相对于窗口显示区左上角的 X 位置。 |
| pageYOffset | 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。 |
| parent | 返回父窗口。 |
| screen | 对 Screen 对象的只读引用。 |
| screenLeft | 返回窗口相对于屏幕窗口的x坐标。 |
| screenTop | 返回窗口相对于屏幕窗口的y坐标。 |
| screenX | 返回窗口相对于屏幕的x坐标。 |
| screenY | 返回窗口相对于屏幕窗口的y坐标。 |
| self | 返回对当前窗口的引用。等价于 Window 属性。 |
| status | 置窗口状态栏的文本。 |
| top | 返回最顶层的父窗口。 |
- 方法
| 方法 | 描述 |
|---|---|
| alert() | 把键盘焦点从顶层窗口移开。 |
| clearInterval() | 取消由 setInterval() 设置的 timeout。 |
| clearTimeout() | 取消由 setTimeout() 方法设置的 timeout。 |
| close() | 关闭浏览器窗口。 |
| confirm() | 显示带有一段消息以及确认按钮和取消按钮的对话框。 |
| createPopup() | 创建一个 pop-up 窗口。 |
| focus() | 把键盘焦点给予一个窗口。 |
| moveBy() | 可相对窗口的当前坐标把它移动指定的像素。 |
| moveTo() | 把窗口的左上角移动到一个指定的坐标。 |
| open() | 打开一个新的浏览器窗口或查找一个已命名的窗口。 |
| print() | 打印当前窗口的内容。 |
| prompt() | 显示可提示用户输入的对话框。 |
| resizeBy() | 按照指定的像素调整窗口的大小。 |
| resizeTo() | 把窗口的大小调整到指定的宽度和高度。 |
| scrollBy() | 按照指定的像素值来滚动内容。 |
| scrollTo() | 把内容滚动到指定的坐标。 |
| setInterval() | 按照指定的周期（以毫秒计）来调用函数或计算表达式。 |
| setTimeout() | 在指定的毫秒数后调用函数或计算表达式。 |
2.History
包含用户在浏览器中访问过的URL。
History对象是Window对象的一部分，可以通过window.history属性对其进行访问。
- 属性
| 属性 | 描述 |
|---|---|
| length | 返回历史列表中URL的数量。 |
- 方法
| 方法 | 描述 |
|---|---|
| back() | 加载history列表中的前一个URL。 |
| forward() | 加载history列表中的下一个URL。 |
| go(num) | 加载history列表中的某个具体页面。 |
3.Location
包含有关当前URL的信息。
Location对象是Window对象的一部分，可以通过window.location属性对其进行访问。
-
常用属性：
- href：是一个可读可写的字符串，可设置或返回当前显示的文档的完整 URL。语法：location.href。
-
属性
| 属性 | 描述 |
|---|---|
| hash | 返回一个URL的锚部分 |
| host | 返回一个URL的主机名和端口 |
| hostname | 返回URL的主机名 |
| href | 返回完整的URL |
| pathname | 返回的URL路径名 |
| port | 返回一个URL服务器使用的端口号 |
| protocol | 返回一个URL协议 |
| search | 返回一个URL的查询部分 |
- 方法
| 方法 | 描述 |
|---|---|
| assign() | 载入一个新的文档 |
| reload() | 重新载入当前文档 |
| replace() | 用新的文档替换当前文档 |
4.Navigator
Navigator 对象包含有关浏览器的信息。
5.Screen
Screen 对象包含有关客户端显示屏幕的信息。
五、案例
1.使用JS完成注册页面表单校验
- 步骤分析：
- 确定事件（onsubmit）并为其绑定一个方法。
- 编辑这个方法，获取用户输入的数据，获取数据时需要在指定的位置定义一个id。
- 对用户输入的数据进行判断。
- 数据合法，表单可以提交。
- 数据不合法，给出错误信息，拦截表单提交。
- 代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单校验</title>
<script type="text/javascript">
function checkForm(){
var username = document.getElementById("username").value;
if(username==""){
alert("用户名不能为空！");
return false;
}else if(username.length<4&&username.length>0){
alert("用户名长度不能小于4！")
return false;
}else if(username.length>20){
alert("用户名长度不能大于20！");
return false;
}
//校验密码
var password = document.getElementById("password").value;
if(password==""){
alert("密码不为空");
return false;
}else if(password.length>0&&password.length<6){
alert("密码不能小于6位");
return false;
}else if(password.length>20){
alert("密码不能大于20位");
return false;
}
//确认密码
var repassowrd = document.getElementById("repassword").value;
if(repassowrd!=password){
alert("两次密码输入不一致");
return false;
}
}
</script>
</head>
<body>
<div align="center">
<form action="/userReg" name="userReg" onsubmit="return checkForm()" method="post">
<table border="1px" cellpadding="0" cellspacing="0">
<tr><td>用户名</td>
<td>
<input type="text" name="username" id="username"/>
</td>
</tr>
<tr><td>密码</td>
<td>
<input type="password" name="password" id="password">
</td>
</tr>
<tr><td>重复密码</td>
<td>
<input type="password" name="repassword" id="repassword">
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="提交">
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
2.使用JS完成首页轮播图效果
- 步骤分析：
- 确定事件（onload）并为其绑定一个方法，onload绑定到body标签中。
- 编辑此方法。
- 编辑定时任务setInterval。
- 编辑定时任务中的方法。
- 通过变量的方式，进行循环（获取轮播图位置，并设置src属性，到最后一张图片时重置循环）。
- 代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>轮播图</title>
<style>
div{
border: 1px solid red;
width: 1610px;
height: 830px;
margin: auto;
text-align: center;
margin-top: 30px;
}
</style>
<script type="text/javascript">
function init(){
setInterval("changeImg()",3000);
}
var i = 0;
function changeImg(){
i++;
document.getElementById("img1").src="../img/"+ i +".jpg";
//假设有三章图片，当到第三张图片时重置循环。
if(i==3){
i=0;
}
}
</script>
</head>
<body onload="init()">
<div id="">
<img src="../img/1.jpg" alt="图片" id="img1">
</div>
</body>
</html>
3.使用JS完成页面定时弹出广告
- 步骤分析：
- 在指定位置隐藏一个广告图片，使用display属性的none值。
- 确定事件（onload）并为其绑定一个方法，onload帮到到body中。
- 编辑这个方法，设置一个显示图片的定时操作。
- 编辑定时器中的方法，获取广告图片的位置并且更改样式display值为block。
- 清除显示图片的定时操作。
- 编辑一个定时隐藏图片的方法。
- 编辑定时器中的方法，获取广告图片的位置并且更改样式display值为none。
- 清除隐藏图片的定时操作。
- 代码实现：
扫一扫
171
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
