一.Js简介
1.Js是一种基于对象和事件驱动(通过鼠标或热键的动作)的客户端脚本语言,是一种轻量的编程语言
2.Js是可插入HTML页面的编程代码,所有浏览器都可执行
3.Js用途:可以让页面动起来
二.js的引入方式
1.直接写入
<body>
<input type="button" value="普通按钮" οnclick="alert('我是一个普通按钮')"/>
<!--外面是双引号,里面要使用单引号,alert是弹出一个提示框-->
</body>
2.嵌入式
<head>
<script type="text/javascript">
//可用document.write();输出在浏览器页面中
function method2(){
alert("普通按钮2");
}
</script>
</head>
<body>
<input type="button" value="普通按钮2" οnclick="method2()"/>
</body>
3.外链式，调用外界js文件
外界js文件只写函数:function method2(){alert("普通按钮2");}
<head>
<script type="text/javascript" src="./第三章.js">//用src引入,必须单写出来
<script type="text/javascript">
function method2(){
alert("普通按钮2");
}
</script>
</head>
<body>
<input type="button" value="普通按钮2" οnclick="method2()"/>
</body>
三.语法规范
1.常规
1.语句由表达式,运算符,关键字组成
2.单行注释//,多行注释/**/
3.js区分大小写,html不区分大小写
4.js会忽略程序中的空格,制表符和换行符,但依然使用缩进,便于理解代码(分号可以不写)
2.Js的输出
1.使用 window.alert() 弹出警告框。
window.alert(5 + 6);
2.使用 document.write() 方法将内容写到 HTML 文档中。
//日期会直接显示在p段落下面
<p>我的第一个段落。</p>
<script>
document.write(Date());
</script>
//点击按钮后悔触发myFunction函数，建日期打印到一个新的文档中
<p>我的第二个段落。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction()
{
document.write(Date());
}
</script>
3.使用 innerHTML 写入到 HTML 元素。
document.getElementById("demo").innerHTML = "段落已修改。";
4.使用 console.log() 写入到浏览器的控制台。
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>
3.变量
1.变量可以是字母,数字,下划线和美元符号($),不能以数字开头
2.javascript是弱类型语言(java是强,有long,int等),直接用var来声明一个变量var i=3; var s=“abc”;
4.数据类型
1.基本数据类型
①.数字(都是由浮点型表示,不区分整型和浮点型数值)
②.字符(字符串由一对单双引号括起来)
③.布尔值(true表示1,false表示0)
2.两种特殊数据类型
①null
②undefined//未定义
3.复合数据类型(对象)
①.array(数组)
②.function(函数)
5.js的运算符
1.算数运算符:+,-,*,/,++,–
2.关系运算符:>,<,>=,<=,!=,==(比较值的大小),===(比较类型和值的大小都相同时结果才为true)
3.逻辑运算符:&&,||,!
4.条件运算符/三目运算:boolean表达式?表达式1:表达式2;(表达式为true则选表达式1,为false选表达式2)
6.分支结构语句
1.if语句
if（单向判断），if-else（双向判断），if-else if-else（多向判断）
2.switch语句
switch(整型表达式){
case1:
语句一;
break;
case2:
语句二;
break;
...
default:
语句;
(break;)
}
7.循环结构语句
1.for(表达式1①;表达式2②;表达式3){③循环体;}
2.while(表达式){语句块;}//先判断后执行
3.do{语句块;}while(boolean表达式)//先执行后判断,至少执行一次
四.数组
1.数组的特点
1.数组元素不赋值,则值为undefined
function method1(){
var array =new Array();
alert(array[0]);
}
2.一个数组内可以存放任意类型的数据
function method1(){
var arr=new Array(3);
arr[0]=10;
arr[1]=“嗨”;
arr[2]=true;
alert(arr[2]);
}
3.打印数组时,若某个元素没有赋值,这会打出""(空)
function method1(){
var arr=new Array(3);
arr[0]=10;
arr[1]=“嗨”;
alert(arr);
}//打出10,嗨,
4.访问数组范围以外的元素,不会出现异常,为undefined
function method1(){
var arr=new Array(3);
arr[0]=10;
arr[1]=“嗨”;
arr[2]=true;
alert(arr[3]);
}//打出undefined
5.定义数组大小,依然可以添加更多的元素,不会报错
function method1(){
var arr=new Array(3);
arr[0]=10;
arr[1]=“嗨”;
arr[2]=true;
arr[3]=45;
arr[4]=“java”;
alert(arr);//arr在java中打印的是地址,在js中打印的是值
}//打出10,嗨,true,45,java
2.一维数组的定义
1.var arr1=new Array();
arr1[0]=10;
arr1[1]=20;
2.var arr2=new Array(2);//规定了数组的长度,依然可以添加更多的元素
3.var arr3=new Array(true,123,false);//直接赋值
4.var arr4=[false,“aaa”,‘bbb’,123];//单双引号都可以放
3.单双引号的问题
1.只能这样使用
" ' ' "或者' " " '(单引号包裹双引号或双引号包裹单引号)
2.var a=“你好”;
var b=‘你好’;
alert(a===b);//输出true，它们本质都是一样的字符串你好
3.var a=" ‘你好’ “;//a代表字符串’你好’
var b=’ “你好” ';//b代表字符串"你好”
alert(a===b);//输出false，它们不是一样的字符串
4.单引号和双引号之间的字符串可以相加（组合）‘af’+“bvvv”+'dd’输出 “afbvvvdd”
4.二维数组的定义(一维数组的一维数组)
1.方法一,创建一个七行两列的数组
var arr=new Array(7);
for(var i=0;i<=6;i++){
arr[i]=new Array(2);
}
2.方法二,创建一个两行三列的数组
var arr=[[00,01,2],[01,2,3]];//打印出来是0,1,2,1,2,3
arr[0][1]=01;
五.函数和事件
函数是事件驱动的,或者当它被调用时执行的可重复使用的代码块
1.定义函数（不需要指定参数类型，返回值可有可无）
1.普通定义
function 函数名(){函数体;}
2.带参函数
function 函数名(var1 var2){函数体;}
3.带返回值的函数,只需要在函数体里面加一个return var1;就会默认返回var1
function 函数名(){函数体; return var1;}
2.常用事件
表单事件：onclick(单击鼠标),ondblclick(双击鼠标),onmouseover(鼠标滑过),onmouseout(鼠标滑出),onfocus(集中鼠标焦点),onblur(失去焦点),onsubmit（表单提交时触发，进行表单校验）
//onclick(单击鼠标)
function method(){alert();}
<input type="button" value="普通按钮1" onclick="method()">
function method(a,b){alert(a+b);}
<input type="button" value="普通按钮1" onclick="method(10,20)">
function method(a,b){return a+b;}
<input type="button" value="普通按钮1" onclick="alert(method(10,20))">
<input type="text" onfocus="method4()"/>
<input type="text" onblur="method5()"/>
页面事件：onload(页面加载[初始化html]时触发函数)
<script type="text/javascript">
function load(){alert("loading..");}
</script>
<body onload="load()"></body>
<script type="text/javascript">
window.onload=function(){alert("loading..");}//这样写时不能在body里面写οnlοad="load()"
</script>
3.对文本框内容的情况进行判断
1.获取文本框里面的值
——var username=document.getElementById(“username”).value;
2.判断是否为空
——if(username==""){alert(“用户名不能为空”);},
——文本框判断不能与null进行判断,要与""进行判断
正则表达式一般是由/开始，/结束
邮箱的正则表达式/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
正则.test(“字符串”)//字符串为用户输入的邮箱,通过id来获得的
str.match(“正则表达式”);
六.Js对象
1.Js中所有事物都是对象,分为三类
1.简单对象：String，Number，Boolean
2.组合对象：Array，Math，Date
3.复杂对象：Function，Regex，Object
2.对象是拥有属性和方法的数据
1.访问属性：var a=“hello”; var x=a.length;
2.调用方法：var a=“hello”; var x=a.toUpperCase();
3.String对象
var str1=“hello world”;
var str2=“HELLO WORLD”;
alert(str1.toUpperCase());//转成大写
alert(str2.toLowerCase());//转成小写
alert(str1.charAt(3));//找到下标为3的字符
alert(str1.charCodeAt(3));//找到下标为3的字符的ASCII码值
alert(str1.indexOf("r",4));//从第4个位置开始r在数组中的下标
alert(str1.lastIndexOf(“o”,9));//从后向前查某个指定的字符串在字符串中最后一次出现的位置
alert(str1.substring(1,5));//截取1-5的字符串
alert(str1.replace("ello","ey"));//用ey替换ello
alert(str1.split(" "));//将hello word以空格隔开，成为两个元素
4.Array数组
var arr=new Array(10,true,“hello”);
1.alert(arr.join(" : "));//将数组里面的元素以：隔开
2.alert(arr.toString());//正常显示
3.alert(arr1.concat(arr2));//拼接arr1和arr2
4.alert(arr1.slice(start-0,end-2));//从第0个位置开始选两个
5.var arr2=arr1.reverse();//颠倒
alert(arr2);
6.arr1.sort();//排序,只有它返回的是自己本身,其他的都返回一个数组
alert(arr1);
5.日期(Date)对象
var date=new Date();
date.getFullYear();
1.Date()//返回当日日期
2.getDate()//返回一个月中的某一天
3.getDay()//返回一周中的某一天，获取星期是0到6,0是星期日
4.getMonth()//返回月份(0-11)当是12月份的时候会显示11月
5.getFullYear()//返回年份,替代了getYear()
6.getHours()//返回小时
7.getMinutes()//返回分钟
8.getSeconds()//返回秒
9.getMilliseconds()//返回毫秒
10.getTime()//返回从1970年1月1日到今天的毫秒数
//年月日时分秒：
var date=new Date();
date.getFullYear()+":"+date.getMonth()+1+":"+date.getDay()+":"+date.getHours()+":"+date.getMinutes()+":"+date.getMilliseconds()
6.Math方法(使用Math.方法使用)
1.abs(x);//绝对值
2.random();//返回0-1的随机数(包含0,不包含1)
alert(Math.random()*100+1);
3.ceil(x);//向上舍入
4.floor(x);//向下舍入
5.round(x);//四舍五入
var math=-10.83;
alert(Math.round(math));
6.max(x,y);//返回x,y的最大值
7.min(x,y);//返回x,y的最小值
8.log(x);//返回以e为底的自然对数
9.exp(x);//返回e的指数
10.pow(x,y);//返回x的y次幂
11.sqrt(x);//返回数的平方根
12.sin(x),cos(x),tan(x);acos(x);asin(x);atan(x);atan2(x);//x必须以弧度表示的角Math.PI/2
13.toSource()//返回该对象的源代码
14.valueOf();//返回Math对象的原始值
7.Number对象
1.toString();//用于把Number对象转化为一个字符串,并且返回结果
2.toFixed();//可以把Number四舍五入为指定位小数位数的小数
var number=10.58658;
alert(number.toFixed(3));
8.Window对象
七.小案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第三章表单校验练习</title>
<style type="text/css">
#div1{
border: 1px solid blue;
background-color: lightpink;
width: 100%;
height: 600px;
margin: auto;
}
#div2{
border: 3px solid gray;
background-color: white;
width: 800px;
height: 400px;
margin: auto;
position: absolute;
top: 100px;
left: 360px;
}
</style>
<script type="text/javascript">
function method1(){
var username=document.getElementById("username").value;
var password1=document.getElementById("password1").value;
var password2=document.getElementById("password2").value;
var email=document.getElementById("email").value;
//验证值为null时，要与""比较
if(username==""){
alert("用户名不能为空");
}else if(password1==""){
alert("密码不能为空");
}else if(password2!=password1){
alert("两次密码不一致");
}else if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(email)){
alert("邮箱输入错误");
}else{
alert("注册成功");
}
}
</script>
</head>
<body>
<div id="div1">
<div id="div2">
<table border="0" cellpadding="10px" cellspacing="0">
<form action="http://www.baidu.com">
<tr>
<td width="100px">用户名</td>
<td><input type="text" id="username"/></td>
</tr>
<tr>
<td width="100px">密码</td>
<td><input type="password" id="password1"/></td>
</tr>
<tr>
<td width="100px">确认密码</td>
<td><input type="password" id="password2"/></td>
</tr>
<tr>
<td width="100px">性别</td>
<td>
<input type="radio" name="sex"/>男
<input type="radio" name="sex"/>女
</td>
</tr>
<tr>
<td>籍贯</td>
<td>
<select>
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="hn">河南</option>
</select>
<select>
<option value="zy">信阳</option>
<option value="sq">商丘</option>
<option value="zz">郑州</option>
</select>
</td>
</tr>
<tr>
<td width="100px">爱好</td>
<td>
<input type="checkbox" name="hobby"/>篮球
<input type="checkbox" name="hobby"/>足球
<input type="checkbox" name="hobby"/>排球
<input type="checkbox" name="hobby"/>羽毛球
</td>
</tr>
<tr>
<td width="100px">邮箱</td>
<td>
<input type="text" id="email"/>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="注册" onclick="method1()"/>
</td>
</tr>
</form>
</table>
</div>
</div>
</body>
</html>
628
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
