Day03-JavaScript01
JS的简介
什么是js
javascript简称js，是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，“寄生”在html体内随网络传输到客户端的浏览器的内存中解析。（html的加载也是从上往下加载的）
- 脚本语言
- 脚本：电影或电视剧的拍摄时候的剧本底稿。/计算机中的脚本，给计算机看。脚本中包含一些给计算机的指令。
- Java和C语言，都需要编译成二进制的可执行文件。脚本文件是不需要编译，直接可以使用解释器进行解释执行！
- 百度的解释：脚本语言又被称为扩建的语言，或者动态语言，是一种编程语言，用来控制软件应用程序，脚本通常以文本（如ASCII)保存，只在被调用时进行解释或编译。
js是 基于对象 和 事件驱动 的脚本语言。
- 基于对象：不支持继承！ 并且其中内置了许许多多的对象
- 事件驱动：无事件，不js，没有事件就无法执行js代码。点击事件，前进后退、滑动、提交等等事件。
js的作用（常见）
-
- js可以动态的修改html及css的代码（修改的是浏览器内存中的那一份代码，服务器端的文件是没有变化的）
-
- js可以对表单进行校验 （最初开发出来js就是拿来校验表单的）
js的组成部分（理解）
1.ECMAScript：这一部分主要是js的基本语法
2.BOM：Browser Object Model 浏览器对象模型，主要是获取浏览器信息或操作，例如：浏览器的前进与后退、浏览器弹出提示框、浏览器地址栏输入网址跳转等操作等（window最常用，然后还有Navigator，Screen，History，Location）
3.DOM：Document Object Model 文档对象模型，此处的文档暂且理解为html，html加载到浏览器的内存中，可以使用js的DOM技术对内存中的html节点进行修改，用户从浏览器看到的是js动态修改后页面
js的引入方式（重点）
- 行内脚本:
在html标签中写类似onclick点击事件，然后再在后方的引号中引入函数，也就是写入了js代码；
<div>
<input type="button" name="name" value="点我" onclick="alert('成功输出了')"
</div>- 内部脚本，也叫内嵌脚本；
语法：写一个script标签，然后在其中写js代码
<script>
</script>- 外部脚本
在html文件之外，创建一个 .js结尾的文件，在该文件中js代码，然后通过<script>标签的src属性引入到了html文件中。（和css不同，css的外部引入方式是通过<link>标签（的href属性）引入到html中的，而js是通过<script>标签引入到html中的。）
<script src="../img/js/test.js" type="text/javascript" >
//这里面不能够有js代码
</script>注意：负责引用外部脚本的script标签中不能够写js代码。如果要写js代码，应该另外单独写一个<script>标签
js的数据类型
js中的注释
<script>标签中的注释和java类似，// 或/* */
基本数据类型 （五种）
- 数字类型：number
- 布尔类型：boolean
- 字符串类型：string
- 未定义：undefined ，就是没有声明的变量
- 空类型：null （object） ，就是根本不存在的变量
查看类型的方式：typeof
alert（ typeof i ）；变量的声明：
使用关键字var进行声明：
var 变量名 = 变量值；实际上，有些情况中不使用var进行变量声明也是可以的，因为js中会默认把这个变量进行声明；
没有用var声明的，而直接使用的变量是全局变量；
用var声明的，在局部代码块中的，就是局部变量。如果用var声明的变量，但是不在任何一个函数中，那么这个变量也是全局变量
引用数据类型
跟Java中一样，js中的对象类型都是引用数据类型
- var obj = new Object();
- var str = new String();
- var date = new Date();
引用数据类型全为object类型
类型之间的转换
- number和boolean转换成string，用的是toString（）方法
var i = 3.14;
var str = i.toString();- string转number（重要）: parseInt()方法和parseFloat() 方法，其实这两种方法在调用前省略的是window对象
parseInt（str）
var str = "3.14";
var num = parseInt(str);
var num = window.parseInt(str);- number、string转boolean。（重要）new Boolean()方法
number转化为boolean：0为false，非0为true；
var num = 3.14;
var res = new Boolean(num);string 转化为boolean: 空串为false ，非空为true；
var str = "false"
var res = new Boolean(str);js中的对象数据object类型：
js中只要是用new创建的，都是object类型
var date = new Date();
alert( typeof date);
js中的运算符
- 赋值运算符
var num = 5; - 比较运算符
> 大于
< 小于== 比较数据大小
= 赋值
!=
=== 比较数据大小和内容
逻辑运算符，在js中没有单与和单或
* &&
* ||
* !
* 算数运算符
* +
* -
* *
* /
* %
* 三元运算符
* 条件?a:b
js中比较特殊的运算符
1）运算符 == 和运算符 ===
==比较的数据的大小，默认情况下，==运算符会将左右两端的变量尝试着进行转型，看是否能够相等。
===比较的数据的大小和类型。必须要值和类型都相同的时候才能够相等。
2）js中只有&& 和| | 运算符，没有单与和单或运算符；
3）三元运算符：
java中的三元运算符只能够进行赋值操作，但是js中可以用语句,可以将语句体写在三元运算符中。
例：
（3>5）? alert("正确") : alert("错误") ;js中比较特殊的语句
1）js定义的数组
在数组中可以写上任何数据类型的变量；
注意，**与java中不同的是，js中定义数组用的是方 var arr = [ 1, 2, “哈哈哈” ， true]；定义数组和java中用的符号不一样
java中：
int[ ] a = { 1, 2, 3, 4};而js中用的是方括号：
var a = [ test, 1, 2, 3];2）for in循环
其实本质上就是java中的增强for循环，区别是for in循环遍历出来的是所有的下标。
for （index in arr）{
alert（ arr[ index]）；
}js中的函数
作用：封装一些功能实现
js中定义函数的三种方式（前两种是重点）
- 一般方式:参数不能够写var,否则会报错
function fn(a,b){
alert（a+b）;
} //调用函数
onclick="fn(4,6)";
- 匿名函数
（匿名函数的创建是不用new的，只有对象方式创建函数的时候才new）
function(a,b){
alert(a-b);
}
var fn1 = function(a,b){
alert(a-b);
}
fn1(8,3);绑定事件的第二种方式的时候使用到。匿名函数只能够写在<script>中，不能够写在行嵌套的script中。
* 对象方式
对象方式，用的时候很少
var fn = new function( 'a', 'b', 'alert(a+b)' ) 可以有多个参数，最后一个参数是函数体；
js中的函数还是会有局部函数和全局函数的区别的，如下例：
下面这个例子中也有匿名函数
<script>
window.onload = function(){
function changePic(){
}
}
</script>如上述所示，函数changePic（）就会被认为是一个局部函数，只能够被它的上层函数访问到。
写函数的时候最好不要函数嵌套函数。
js中的常用事件（重点）
事件概述
js的事件是js不可或缺的组成部分，要学习js的事件，必须要理解如下几个概念：
- 1）事件源：被监听的html元素
- 2）事件：某类动作，例如点击事件，移入移除事件，敲击键盘事件等
- 3）事件与事件源的绑定：在事件源上注册上某事件
- 4）事件触发后的响应行为：事件触发后需要执行的代码，一般使用函数进行封装
常用事件
- onload 当加载完成时触发（重要）
- onsubmit 当表单提交的时候触发，这个事件有返回值。
- onclick 当鼠标点击某个对象的时候触发
- ondbclick 当鼠标双击某个对象的时候触发
- onfocus 当获取焦点的时候触发
- onblur 当失去焦点的时候触发
- onchange 当用户改变域的内容时触发（获取焦点，改变内容，然后再失去焦点 ）
- onkeydown 当键盘按键被按下时触发
- onkeypress 当键盘按键被按住时触发
- onkeyup 键盘按键松开时触发
- onmousedown 当鼠标左键按下时触发
- onmouseup 当鼠标左键松开时触发
- onmouseover 当鼠标移到某个元素之上时触发
- onmouseout 当鼠标移开某个元素时触发
- onmousemove 当鼠标移动时触发
事件的两种绑定方式：
第一种：使用类似onclick这样的属性进行绑定。
<input type="button" onclick="test()" />第二种：
1先找到按钮2；
2给其绑定点击事件
给bt2的onclick中赋值的时候，只能够赋值为匿名函数，不然会认为是调用fn函数；
<input type="button" id="test" />
<script>
var dest = document.getElementById("test");
dest.onclick = function(){
//函数体
}BOM（对象集合）
BOM的概述（了解）
BOM（Browser Object Mode），浏览器对象模型，是将我们使用的浏览器抽象成对象模型，例如我们打开一个浏览器，会呈现出以下页面，通过js提供浏览器对象模型对象我们可以模拟浏览器功能。
BOM的对象
- 1.Screen对象，Screen 对象中存放着有关显示浏览器屏幕的信息。
- 2.Window对象（BOM里面最顶级的对象），Window 对象表示一个浏览器窗口或一个框架。（重点）
- 3.Navigator对象，包含的属性描述了正在使用的浏览器
- 4.History对象，其实就是来保存浏览器历史记录信息。
- 5.Location对象，Location 对象是 Window 对象的一个部分，可通过window.location 属性来访问。（重点）用来跳转页面使用
定时跳转到广告网页的案例，要用到location的href属性。
为了在页面加载完成之后执行，防止出现未加载时候的null
（下例就是一个匿名函数例子）
window.onload = function(){
}
匿名函数只能够写在<script>中，不能够写在行嵌套的script中。
Window对象
一、弹框（重点）
提示框 alert(提示信息) 只有一个确定按钮
alert(“haha”);确认框 confirm(提示信息)，有确认和取消按钮，其中有一个boolean类型的返回值，记录用户点击的是确认还是取消；有一个返回值类型。
可以按照以下方式执行不同的确认和取消操作
- 输入框 prompt(提示信息)也有一个返回值，返回值就是我们输入的内容，如果点击取消，返回的就是null，不输入的话返回的是空字符串“”；
prompt（“请输入查询密码”）;定时器（重点）
执行一次的定时器：setTimeout（“函数”，毫秒值）
就相当于一个延时器，这种的应用场景一般是做延时操作，过多久后执行某个函数；
其实前面就是省略的window.，对象window.是可以省略的- 第一个参数：函数对象，用引号括起来表示
- 第二个参数：毫秒值
执行循环的定时器：setInterval
- 清除定时器clearInterval(定时器对象)
轮播图的案例
多张图可以通过命名方式进行控制。使得命名方式具有一定的规律性，方便循环
多张图片也可以放在一个数组里面中。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>0605轮播图案例 自动切换</title>
<script>
window.onload = function(){
arr = ["../img/js/1.jpg", "../img/js/2.jpg", "../img/js/3.jpg"];
index = 1;
window.setInterval(function(){
if( index >= arr.length){
index=0;
}
var image = document.getElementById("test");
image.src = arr[index];
index++;
},2000);
}
</script>
</head>
<body>
<div align="center">
<img src="../img/js/1.jpg" id="test" width="600px" height="400px" />
</div>
</body>
</html>定时弹广告的案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>定时弹出广告</title>
<script>
window.onload = function(){
setTimeout(function(){
var ad = document.getElementById("topAd");
ad.style.display = "block";
},3000);
}
</script>
</head>
<body>
<div align="center">
<img src="../img/js/ad2.jpg" name="topAd" id="topAd" width="90%" style="display: none;" />
</div>
<div align="center">
<img src="../img/js/3.jpg" width="600px" height="400px"/>
</div>
</body>
</html>跳转到广告页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>定时跳转页面</title>
<script>
window.onload = function(){
setTimeout(function(){
window.location.href = "Day0605_03定时弹广告案例.html";
}, 3000);
}
</script>
</head>
<body>
<div align="center">
<img src="../img/js/1.jpg" width="90%" />
</div>
</body>
</html>表单校验的案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单校验</title>
<script>
function checkInfo(){
// var uName = document.getElementById("userName").value;
// if(uName == ""){
// alert("请输入用户名");
// return false;
// }
var inputInfo = document.getElementsByTagName("input");
for( var i = 0; i < inputInfo.length; i++){
if(inputInfo[i].value == ""){
alert("请检查是否输入完了所有信息");
break;
}
}
var pass1 = document.getElementById("password1").value;
var pass2 = document.getElementById("password2").value;
if( pass1 != pass2 ){
alert("你是傻逼吗？");
}
}
</script>
</head>
<body>
<div>
<form name="userInfo" action="#" method="get" onsubmit="return checkInfo()" >
用户名 <input type="text" name="userName" id="userName" placeholder="请输入用户名" />
<br />
密 码 <input type="password" name="password1" id="password1" placeholder="请输入密码" />
<br />
确 认 <input type="password" name="password2" id="password2" placeholder="请再次输入密码" />
<br />
<input type="submit" name="submit" id="submit" value="点击提交" />
</form>
</div>
</body>
</html>
3565
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
