一, 什么是js？
javascript简称js，是目前web开发中不可缺少的脚本语言。js不需要编译即可运行，“寄生”在html体内随网络传输到客户端的浏览器的内存中解析。
js是基于对象和事件驱动的脚本语言。js是弱语言。
2.js的作用是什么？
最常用的：1）js可以动态的修改html及css的代码（修改的是浏览器内存中的那一份代码）DOM操作
2）js可以对表单进行校验
3.js由三部分组成：
1）ECMAScript：这一部分主要是js的基本语法
2）BOM：Brower Object Model 浏览器对象模型，主要是获取浏览器信息或操作 浏览器的，例如：浏览器的前进与后退、浏览器弹出提示框、浏览器地址栏输入网址 跳转等操作等。
3）DOM：Document Object Model 文档（html）对象模型，此处的文档暂且理解为html， html加载到浏览器的内存中，可以使用js的DOM技术对内存中的html节点进行修 改，用户从浏览器看到的是js动态修改后页面。
4．js的引入方式（重点）
1）内部js：也就是在html源码中嵌入js代码，语法格式如下：
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
alert(“这里写你的js代码”);
</script>
</head>
注意：
外部js：也就是将js代码单独写成一个js文件(扩展名是.js而不是.javascript),在 html代码中引入这个封装好的js文件。语法格式如下：
注意：无论是内部js还是外部js在html中引入的位置是随意的，
引入有一个原则就是：在不影响页面功 能的情况下js越晚加载越好,所以建议
二，js的基本语法
1．js变量的定义
js是弱类型语言，不重视类型的定义
定义直接通过var关键字就行。如：
整型：var i = 0; 浮点型：var d = 2.35; 字符串：var str = “用心做教育”; 布尔型：var b =
true; 数组：
2．js的数据类型
js的数据类型分为基本数据类型(原始数据类型)和引用数据类型
1）原始/基本数据类型：
数字类型：number 包含了小数和整数
布尔类型：boolean
字符串类型：string 在js中字符串类型包含了字符 ‘’和“”引起来的都是字符串。
未定义类型：undefined
空类型：null
重要的转换：
（1） 数字字符串 转 数字
parseInt
parseFloat
<script type="text/javascript">
var value = "22";
//var num = parseInt(value);
var num = parseInt(value);
alert(num + "===" + typeof (num));
</script>
2）引用数据类型：
与java一样，js中的对象都是引用数据类型，所以你也可以使用我们熟知new 来“造对象”
例如： 造一个上帝对象：var obj = new Object(); 造一个字符串对象：var str = new String();
造一个日期对象：var date = new Date();
3．js的运算符
在js中，如下运算符除了极个别的，其他绝大多数的运算都是和java中一模一样的运算法则。
1）赋值运算符 var x = 5；
2）比较运算符 > < == != ===
3）逻辑运算符 && || ！
注意的是，在js中，不光boolean值能够参数逻辑运算。所有的值都能参与逻辑运算。
1.== 只比较数值的大小，不区分数据类型。因为 js是弱数据类型
2. === 绝对等 不光比较数值的大小，还比较数据的类型
3. js中：非零，非null，非undefined理解成true（即 零0，null，undefined理解成false）
4.算数运算符 + - * / %
5.三元运算符 条件?a:b 1？“2”：“3”
6.js中只有双与和双或 没有单与和单或
4．js的逻辑语句
跟java一样，js也存在if、if-else、for、switch等逻辑语句，与java使用方式一致.
三、js的函数（重点）
js中，通过function关键字来定义函数
/*
首先我们需要知道的第一点就是：函数需要被调用才能执行。
* */
function demo1(){
alert("ss");//这句代码的含义是将内容弹到页面上。
}
// demo1();
/*
第二点：js中，如果函数需要返回值我们直接return就行了。
定义函数的时候不需要声明返回值的类型，因为js是弱数据类型。
* */
function demo2(){
return 2;
}
// alert(demo2());
/*
第三点：在js中，如果我们需要给函数传递参数，那么我们直接写变量名就行。
也不需要声明传入变量的类型。
* */
function demo3(value){
alert(value);
}
// demo3(3);
/*
看如下代码，很明显我定义了2个函数名一样，只是参数列表不一样的函数。
在java中我们都知道这叫做函数的重载。
然后我调用的时候是不带参数的。查看结果，很显然，最终调用的是带参数的函数。
第四点：在js中，不存在函数重载的概念，如果2个函数名一样，后面出现的函数会将前面出现的函数覆盖。
* */
function demo4(){
alert("demo4_1");
}
function demo4(value){
alert("demo4_2");
}
demo4();
总结：
1.函数需要被调用才能执行。
2.js中，如果函数需要返回值我们直接return就行了。
定义函数的时候不需要声明返回值的类型，因为js是弱数据类型。
3.在js中，如果我们需要给函数传递参数，那么我们直接写变量名就行。
也不需要声明传入变量的类型。
4.在js中，不存在函数重载的概念，如果2个函数名一样，后面出现的函数会将前面出现的函数覆盖。
了解一下:
/*
很明显，我定义了带参数的函数，而我们调用的时候没有带参数，函数也能照样执行。
第五点：如果函数的声明带有参数，调用时不带参数，函数可以正常被调用。
* */
function demo5(value){
alert("demo5");
}
// demo5();
/*
同样，我定义一个不带参数的函数，但是我调用的时候给函数传递了参数，那么函数也能照样执行。
第六点：如果函数声明时没有参数列表，调用的时候传入参数，函数也能照样执行。
* */
function demo6(){
alert("demo6");
}
// demo6("aa");
/**
* 基于第六点
第七点:既然可以给函数传入参数，在js中，可以通过arguments来获取传入的参数。
arguments是js专门用来存放参数的数组。
*/
function demo7(){
alert(arguments[0]);
}
// demo7("aa");
/**
* 看如下案例，我给函数起了个别名，然后可以通过别名来正常的调用函数。
第八点：可以给函数起个别名，然后通过别名来调用函数。
*/
function adfadfsdfafd(){
alert("demo8");
}
var demo8 = adfadfsdfafd;
demo8();
2）匿名函数：匿名函数也就是没有名字的函数
function(参数列表){
js逻辑代码
}
但是匿名函数没有办法直接调用，一般情况下匿名函数有两种使用场景：
第一种：将匿名函数赋值给一个变量，使用变量调用函数
定义函数并赋值给变量：var fn = function(参数列表){js逻辑代码}
调用函数：fn(实际参数);
第二种：匿名函数直接作为某个函数实际参数
例如：
function xxx(数字类型参数，字符串类型的参数，函数类型的参数){
//js逻辑代码
}
调用该函数：
xxx(100,”abc”,function(){});
四、js的事件（重点）
1．事件概述
什么是事件？
我们用户发出的一些动作或者行为，这些能被js检测到，那么这些行为就叫做事件。
当我们输入完用户名，鼠标光标移开的时候，这样的一个动作我们的js或者说浏览器是能够知晓这 样一个动作的，所以这样的动作叫做事件。而我眼睛盯着浏览器看这么一个动作，浏览器并不知道，所以不是一个事件。
事件的作用：我们可以给事件绑定一个函数，当事件触发的时候，就会执行这个函数。
js的事件,理解如下几个概念：
1）事件源：被监听的html元素
2）事件：某类动作，例如点击事件，移入移除事件，敲击键盘事件等
3）事件与事件源的绑定：在事件源上注册上某事件
4）事件触发后的响应行为：事件触发后需要执行的代码，一般使用函数进行封装
2．常用的事件
事件绑定的第一种方式：
<script type="text/javascript">
/**
* 事件绑定的第一种方式：
* 格式：
* <标签名 事件名="函数名"></标签名>
*
* 给按钮绑定单击事件，输出一段话。
*/
function demo(){
alert("单击事件绑定成功");
//首先获取标签对象,document.getElementById();通过标签的id值获取标签对象
var mydiv = document.getElementById("mydiv");
//修改标签对象的css样式
mydiv.style.backgroundColor = "white";
}
/**
* 给div绑定鼠标悬浮事件，修改div的背景色为蓝色。
* 给div绑定鼠标移出事件，修改div的背景色为绿色。
*
*/
function changeBlue(){
//首先获取标签对象,document.getElementById();通过标签的id值获取标签对象
var mydiv = document.getElementById("mydiv");
//修改标签对象的css样式
mydiv.style.backgroundColor = "blue";
}
function changeGreen(){
//首先获取标签对象,document.getElementById();通过标签的id值获取标签对象
var mydiv = document.getElementById("mydiv");
//修改标签对象的css样式
mydiv.style.backgroundColor = "green";
}
</script>
事件绑定的第二种方式：动态绑定
<body>
密码： <input type="password" id="pwd" />
重复密码：<input type="password" id="repwd" />
</body>
<script type="text/javascript">
/**
* js中 事件绑定的第二种方式：动态绑定
*
* 格式：
* 标签对象.事件名 = function(){
* }
*/
//首先获取重复密码标签对象
var repwd = document.getElementById("repwd");
repwd.onblur = function(){
//首先获取第一次输入的密码
// 对于表单标签的子标签来说，value一般指的就是提交给服务器的值。
var pwd1 = document.getElementById("pwd").value;
//再获取第二次输入的密码
var pwd2 = document.getElementById("repwd").value;
//比较密码的值
if(pwd1==pwd2){
alert("密码一致");
}else{
alert("密码不一致");
}
}
</script>
五、js的BOM
js的BOM概述
BOM（Browser Object Mode），浏览器对象模型，是将我们使用的浏览器抽象成对象模型，例如我们打开一个浏览器，会呈现出以下页面，通过js提供浏览器对象模型对象我们可以模拟浏览器功能。
例如，在浏览器地址栏输入地址，敲击回车这个过程，我们可以使用location对象进行模拟。在例如，浏览器中的前进和后退按钮，我们可以使用history对象模拟。
2．js的BOM对象
- Screen对象，Screen 对象中存放着有关显示浏览器屏幕的信息。
- Window对象,Window 对象表示一个浏览器窗口或一个框架。
- Navigator对象，包含的属性描述了正在使用的浏览器
- History对象，其实就是来保存浏览器历史记录信息。
- Location对象，Location 对象是 Window 对象的一个部分，可通过 window.location 属性来访问。
3．Window对象
学习它的三个作用：
1）弹框的方法
(1)弹框的方法（重点）
如支付宝经常 会弹出一个框框，问我们是否确认付款。这样一个弹窗非常有必要，这样防止我们用户的误操作。
1）提示框：alert(提示信息);
2）确认框：confirm(提示信息);
3）输入框：prompt(提示信息);
<script type="text/javascript">
//alert("FBI WARNING!!!");
//var res = confirm("是否确认付款");
//alert(res);
var res = prompt("请输入一个值");
alert(res);
</script>
2）定时器
js中的定时器
- setInterval(函数名，毫秒值);周期性的执行某个函数。
- clearInterval(id_of_setinterval);停止setInterval周期性执行的函数。
(id_of_setinterval就是setInterval函数的返回值。) - setTimeout(函数名，毫秒值);一段时间后执行一次代码
常用的全局方法
1）parseInt/parseFloat函数
2）eval函数—特点：可以将字符串解析成js脚本
(1)1.js的源码或者在一些框架的源码中比较多。
(2)2.eval()可以用来解析json。
var jsonStr = "{'name':'柳岩','age':'30','sex':'male'}";
var json = eval("("+jsonStr+")");
alert(json.name);
3)decodeURI();解码 encodeURI();编码
var url = "http://www.baidu.com?username=张三&password=李四";
var enUrl = encodeURI(url);
//alert(enUrl);
var deUrl = decodeURI(enUrl);
//alert(deUrl);
4．Location对象（重点）
重点记忆location.href可以在js中进行url访问
案例:
1．图片轮播：
<body>
<img id="myimg" src="1.jpg" width="700px" onmouseover="stop()" onmouseout="start()">
</body>
<script type="text/javascript">
var i = 1;
function change(){
//获取img标签对象
var myimg = document.getElementById("myimg");
if(i<7){
i++;
}else{
i=1;
}
//修改img标签对象的src属性值，也就是切换图片的路径
myimg.src = i+".jpg";
}
var id = setInterval("change()",1000);
function stop(){
clearInterval(id);
}
function start(){
id = setInterval("change()",1000);
}
</script>
2．图片弹出：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="mydiv" style="display: none;">
<img src="../img/1.jpg" />
</div>
</body>
<script type="text/javascript">
function show(){
//获取div标签对象，修该div标签对象的display为block，使div显示出来。
document.getElementById("mydiv").style.display="block";
setTimeout("hidden()",3000);
}
function hidden(){
//获取div标签对象，修该div标签对象的display为none，使div隐藏。
document.getElementById("mydiv").style.display="none";
}
setTimeout("show()",3000);
</script>
</html>
3．表单验证：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>注册页面</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
// 给用户名增加点击事件对应的函数
function func() {
var usernameVal = document.getElementById("user").value;
// 判断
if(usernameVal == "请输入用户名"){
document.getElementById("user").value = "";
}
}
// 给用户名标签对象绑定离焦事件对应的函数
// 判断用户名的格式是否正确, 返回值应该是boolean类型
function checkuser(){
// 定义一个标志位,初始值为false,表示不合法
var flag = false;
// 获取用户输入的值
var usernameVal = document.getElementById("user").value;
// 用户名必须是4~12位的字母数字下划线的组合!
if(usernameVal.match("^\\w{4,12}$")){
// 合法
// 取消错误提示信息
document.getElementById("userspan").innerHTML = "";
// 修改标志位
flag = true;
} else {
// 不合法 提示用户名格式不正确!
document.getElementById("userspan").innerHTML = "<font color='red'>用户名必须是4~12位的字母数字下划线的组合!</font>";
}
return flag;
}
// 需求: 校验性别是必填项 返回值也是boolean类型
function checksex(){
// 定义一个标志位,初始值为false,表示不合法
var flag = false;
// 获取性别标签数组
var sexArr = document.getElementsByName("sex");
// 遍历
for(var i=0; i<sexArr.length; i++) {
if(sexArr[i].checked) {
// 选中
flag = true;
}
}
// 判断
if(!flag) {
// 如果没有选中性别 提示性别不得为空
document.getElementById("sexpan").innerHTML = "<font color='red'>性别是必选项!</font>";
} else {
// 如果选中性别, 取消错误提示
document.getElementById("sexpan").innerHTML = "";
}
return flag;
}
// 需求: 校验表单信息
function validate(){
// 初始化标识位 为false ,不通过
var flag = false;
// 如果通过所有的校验,将标识位修改成true
if(checkuser() && checksex()){
flag = true;
}
return flag;
}
</script>
</head>
<body>
<fieldset>
<legend>注册页面</legend>
<!-- 在form标签中有个默认的事件 -->
<form action="http://127.0.0.1:9090" method="post"
onsubmit="return validate();">
<table>
<tr>
<td>用户名称：</td>
<td><input id="user" type="text" name="user" value="请输入用户名"
onclick="func()" onblur="checkuser()" /> <span id="userspan"></span>
</td>
</tr>
<tr>
<td>用户密码：</td>
<td><input id="pwd" type="text" name="pwd" onblur="checkpwd()" />
<span id="pwdspan"></span></td>
</tr>
<tr>
<td>确认密码：</td>
<td><input id="repwd" type="text" name="repwd"
onblur="checkrepwd()" /> <span id="repwdspan"></span></td>
</tr>
<tr>
<td>选择性别：</td>
<td>
<input type="radio" name="sex" value="nan" onchange="checksex()" />男
<input type="radio" name="sex" value="nv" onchange="checksex()"/>女
<span id="sexpan"></span>
</td>
</tr>
<tr>
<td>选择爱好：</td>
<td><input type="checkbox" name="hobby" value="C" />C <input
type="checkbox" name="hobby" value="C++" />C++ <input
type="checkbox" name="hobby" value="Java" />Java <input
type="checkbox" name="hobby" value="PHP" />PHP <input
type="checkbox" name="hobby" value=".net" />.net <span id="hspan"></span>
</td>
</tr>
<tr>
<td>选择国家：</td>
<td><select name="country">
<option>---请选择国家----</option>
<option value="CN">中国</option>
<option value="US">美国</option>
<option value="EN">英国</option>
</select></td>
</tr>
<tr>
<td>自我评价：</td>
<td><textarea rows="10" cols="40" name="desc">
</textarea></td>
</tr>
<tr>
<td><input type="submit" value="注册" /></td>
<td><input type="reset" value="重置" /></td>
</tr>
</table>
</form>
</fieldset>
</body>
</html>
72
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
