1.JavaScript的概述
1.JavaScript历史
-
JavaScript是由美国网景公司(做浏览器)开发的一种脚本语言,原名叫LiveScript(运行在网页中的语言)
-
网景公司和sun公司进行合作,将LiveScript改名为JavaScript
2.JavaScript和Java的区别
-
Java是高级语言,需要编译,运行在Java的虚拟机中,属于后端语言
-
JavaScript(js)不需要编译,由浏览器解释运行,写在网页中-
-
JavaScript是一种直译的脚本语言,是嵌入在网页中,为网页添加各种动态效果(效果动态,数据动态)
3.JavaScript的作用
-
响应鼠标和键盘事件
-
客户端表单验证 表单就是有各种输入选择组件,可以让用户输入信息,最终将数据库提交到后端
-
动态操作网页内容
脚本语言:不需要编译(sql,html,css,js,python),由某种特定的引擎(数据库,浏览器)解释执行
-
html是网页的骨架(内容)
-
css是网页的外观(皮肤)
-
JavaScript是网页的行为(动作)
2.JavaScript基本语法
1.变量
Java是一种强数据类型语言,对数据类型要求不高
JavaScript是一种弱类型语言
声明变量:使用var关键字声明 使用变量可以表示任何类型数据
var 关键字=内容;
var a=10;
var b="abc";
var c=true;2.数据类型:
虽然JavaScript声明时,不需要数据类型,但是它的值,仍然是有类型 因为数据也会参与运算
1.数值型
number 整数和浮点都是数值型
2.布尔型
逻辑值,boolean true false
3.字符串
"" '' 双引号和单引号都表示字符串
4.undefined类型
变量没有赋值,值不明确
5.Object对象类型
JavaScript是一种面向对象的语言,但是对我们而言,把它理解成为一个半面向对象,半面向过程的语言
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
/*
数据类型:
虽然javaScript声明时,不需要数据类型,但是他的值,仍然是由类型的.
因为数据也会参与运算
*/
/*
1.数值型 number 整数和浮点都是数值型
*/
var a = 10;
var b = 10.5;
/*
2.布尔型 boolean true false
*/
var c = true;
var d = a>b;
/*
3.字符串
"" '' sql 双引号和单引号都表示字符串
*/
var e = "abc";
var f = 'abc';
/*
4.undefined类型 变量没有赋值,值不明确
*/
var g;
//alert(g==""||g==null||g==undefined);
/*
5.Object 对象类型 javaScript是一种面向对象的语言,但是对于我们而言,把他理解为一个半面向对象,半面向过程的语言
*/
var date = new Date();
alert(date.getFullYear());
alert(date.getMonth()+1);
</script>
</head>
<body>
</body>
</html>3.算数运算
注意:+在数据类型和字符串时是连接作用
其余与Java相同
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
/*
算数运算
+ - * / % ++ --
*/
var a = 5;
var b = 10;
var c = "5";
var d = "a";
// alert(a+b);//加法运算 数值与数值操作 是加法运算
// alert(a+c);//连接
//alert(b-a);//5 减法 数值与数值 是减法运算
//alert(b-c);//5 数值与字符串的数字 此处会进行一个隐式数据类型转换
// alert(b-d);//NaN not a number 数字格式化异常 视图将字符串转为数字,没有转换成功
//alert(b*c);
b+=c;
alert(b);
</script>
</head>
<body>
</body>
</html>4.比较运算
==:比较的是内容的相等
===:比较的是类型和内容的相等
其他和Java相同
5.赋值运算符 逻辑运算符 条件运算符
和Java一样
6.控制语句
-
单一的选择结构(if)
-
二路选择结构(if/else)
-
多路选择结构(swich)
-
由计算器控制的循环(for)
-
在循环的开头测试表达式(while)
-
在循环的末尾测试表达式(do/while)
-
beeak continue
7.表单
在客户端为后端服务器收集数据，里面有许多可以输入，选择的组件。
凡是从前端向后端发送的数据，都需要进行验证。
不要将垃圾数据随便传递后端处理，就可以减少后端服务器的压力。
需要通过借助js,实现对内容逻辑的验证，在提交表单时触发js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function checkAccount(){
var accountobj = document.getElementById("accountid");
var accountmsgobj = document.getElementById("accountmegid");
if(accountobj.value.length==0){
accountmsgobj.innerHTML = "账号不能为空";
accountmsgobj.style.color="red";
return false;
}else{
accountmsgobj.innerHTML = "√";
accountmsgobj.style.color="green";
return true;
}
}
function checkPassword(){
var passwordobj = document.getElementById("passwordid");
var passwordmsgobj = document.getElementById("passwordmegid");
//对标签属性操作
if(passwordobj.value.length==0){
passwordmsgobj.innerHTML = "密码不能为空";//对标签内容进行操作
passwordmsgobj.style.color="red";//对标签样式操作
return false;
}else{
passwordmsgobj.innerHTML = "√";
passwordmsgobj.style.color="green";
return true;
}
}
function checkForm(){
if(checkAccount()&&checkPassword()){
return true;
}
return false;
}
</script>
</head>
<body>
<!--
表单: 在客户端为后端服务器收集数据,里面有许多可以输入,选择的组件.
凡是从前端向后端发送的数据,都需要进行验证.
不要将垃圾数据随便传递到后端处理,就可以减少后端服务器的压力.
需要通过借助js,实现对内容逻辑的验证,
在提交表单时,如何触发js
onsubmit: 在点击submit按钮时触发
-->
<form action="server.html" method="get" onsubmit="return checkForm()">
账号:<input type="text" name="account" id="accountid" onblur="checkAccount()"/><span id="accountmegid"></span><br/>
密码:<input type="password" name="password" id="passwordid" onblur="checkPassword()"/><span id="passwordmegid"></span><br/>
<input type="submit" value="登录"/>
</form>
</body>
</html>3.函数
1.定义函数
函数的基本语法:
function:表示函数定义的关键字
functionName:表示函数名
arguments:表示传递给函,数的参数列表,各个参数之间用逗号隔开,可以为空
statements:表示实现函数功能的函数体
return expression:表示函数将返回expression的值,同样是可选的语句
function functionName([arguments]){
javascript statements
[return expression]js
}2.全局函数
-
parseInt(arg)把括号内的内容转换成整数之后的值,如果括号内的是字符串,则字符串开头的数字部分被转换成整数,如果字母开头,则返回"NaN"
-
parseFloat(arg)把括号内的字符串转换成浮点数之后的值,字符串开头的数字部分被转换成浮点数,如果以字母开头,则返回"NaN"
-
typeof(arg)返回arg值得数据类型
-
eval(arg)可运算某个字符串
-
t.value=eval(t.value);//运算某个字符串
-
3.内置对象-String字符串
属性 length 用法：返回该字符串的长度. 方法 charAt(n)：返回该字符串位于第n位的单个字符. indexOf(char)：返回指定char首次出现的位置.lastIndexOf(char)** ：跟 indexOf() 相似，不过是从后边开始找. substring(start,end) ：返回原字符串的子字符串，该字符串是原字符串从start位置到end位置的前一位置的一段.
substr(start,length) ：返回原字符串的子字符串，该字符串是原字符串从start位置开始，长度为length的一段.
split(分隔符字符) ：返回一个数组，该数组是从字符串对象中分离开来的，<分隔符字符>决定了分离的地方，它本身不会包含在所返回的数组中。 例如：'1&2&345&678'.split('&')返回数组：1,2,345,678
var s = "abc";
var s1 = new String("abc:defg");
/* alert(s1.length);
alert(s1.charAt(2));
alert(s1.substring(1,4));//开始位置,结束位置(不包含)
alert(s1.substr(1,4));//开始位置,截取的长度
alert(s1.split(":"));字符串分割为数组*/4.内置对象-Array数组
数组的定义方法:
var<数组名>=new Arrary();
定义了一个空数组后.,如果想要添加元素的话,可以<数组名><下标>=值;
如果想在定义的时候初始化值有以下两种情况:
-
var<数组名>=new Arrary(<元素1>,<元素2>,...);
-
var arr=new Arrary('1','2','3');
-
-
var < 数组名>=[<元素1>,<元素2>,...];
-
var arr=['1','2','3'];
-
属性: length:数组的长度
方法: 1.jion(<分隔符>):返回一个字符串,该字符串把数组中的各种元素串起来,用分割符分割;
2.reverse():使数组中的元素反过来
3.sort():使数组中的元素按照一定的顺序排序,默认为字母顺序排序.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
/*
字符串对象
数组对象
日期对象
算数对象
*/
/*
数组对象创建
*/
/* var array = new Array();//创建一个空数组
array[0] = 1;
array[1] = "abc";
array[2] = true;
alert(array); */
/* var array = new Array(1,"abc",true,new Date());//创建一个空数组
alert(array); */
/* var array = [1,"abc",true,new Date()];
alert(array); */
var array = [2,1,3,12,4];
/* alert(array.length); */
// alert(array.join(":"));//把数组中的元素使用特定的符号连接为字符串
/* alert(array.reverse()); 逆序*/
//排序
var array1 = ["b","c","a","d"]; //97 98 99 100
array1.sort();
alert(array1);
array.sort(sortNumber);//将排序规则定义函数,传入到sort方法
alert(array);
//定义一个排序的函数
function sortNumber(a,b){
return a-b
}
</script>
</head>
<body>
</body>
</html5.内置对象-Date
获取日期:
| new Date() | 返回当日的日期和时间 |
|---|---|
| getFullYear() | 返回四位数字年份 |
| getDate() | 返回一个月中的某一天(1~31) |
| getMonth() | 返回月份(0~11) |
| getDay() | 返回一周中的某一天(0~6) |
| getHours() | 返回对象的小时(0~23) |
| getMinutes() | 返回Date对象的分钟(0~59) |
| getSeconds() | 返回Date对象的秒数(0~59) |
var date = new Date();
alert(date.getFullYear());
alert(date.getMonth());
alert(date.getDate())//日期
alert(date.getDay())//星期
alert(date.getHours())6.内置对象-Math
| Math.abs(x) | 计算绝对值 |
|---|---|
| Math.pow(x) | 计算xd的y此幂 |
| Math.sqrt(x) | 计算平方根 |
| Math.ceil(x) | 对一个数进行上舍入 |
| Math.floor(x) | 对一个数进行下舍入 |
| Math.round(x) | 把一个数四舍五入为最接近的整数 |
| Math.random() | 返回0~1之间的随机树 |
| Math.max(x,y) | 返回x和y中的最大值 |
| Math.min(x,y) | 返回x和y中的最小值 |
alert(Math.PI);
alert(Math.abs(-9));4.内置对象事件
一些常用的事件:
onclick() 鼠标点击时;
onblur() 标签失去焦点
onfocus 标签获得焦点
onmouseover() 鼠标被移到某标签之上
onmouseout() 鼠标从某标签上移开
onload() 是网页加载完毕后触发相应的事件处理程序
onchange() 是指当前标签失去焦点并且标签的内容发生改变时触发事件处理程序
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function test(){
console.log(1);//向浏览器控制台输出内容
}
//test();
</script>
</head>
<body onload="test()" >
<!--
事件: html中的标签拥有事件,通过事件可以驱动javaScipt函数,从而产生一个动态效果
onclick()鼠标点击标签时；
onblur()标签失去焦点;
onfocus()标签获得焦点时触发;
onmouseover()鼠标被移到某标签之上;
onmouseout鼠标从某标签移开;
onload()是在网页加载完毕后触发相应的的事件处理程序;
onchange()是指当前标签失去焦点并且标签的内容发生改变时触发事件处理程序。
-->
<input type="button" value="开始" onclick="test()" />
<div onclick="test()">
点击
</div>
<input type="text" onfocus="test()" /><br/>
<input type="text" onblur="test()" />
<!-- <div onmouseover="test()" onmouseout="test()" style="width: 200px; background-color: aqua;">
点击
</div> -->
<input type="text" onchange="test()" />
</body>
</html>5.html DOM对象
1.什么是html DOM对象?
Dom是网页中文档对象模型的缩写
通过对象,可以用JavaScript操作html文档中的所有标签
2.查找元素
-
通常,通过JavaScript,首先需要找到该标签
-
要操作,先得到
-
4种方法:
-
通过id找到标签
-
通过标签名来找到标签
-
通过类名来找到标签
-
通过name来找到标签
-
3.改变Html
-
可以改变标签的属性
-
可以改变Html内容:innerHTML
4.改变css
可以通过对象.style.(修改的css)来实现我们的需求
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
/*
js是面向对象的语言 虽然都是对象,但是两种语言的对象结构不同
内置对象: String 数组 日期 Math
HTML DOM对象(Document Object Model)
文档对象模型---> 这指的是一类对象, 指的是网页中的标签.
从js的角度,认为网页中的每一个标签就是一个独立的对象,这一类对象,被称为dom对象.
这样就可以,以面向对象的思想来操作网页内容.
在js中如何获取网页中的标签?
在js中,一旦网页被加载到浏览器中,会生成一个document对象,此对象表示整个html.
要操作,先获得
可以使用document对象,获取网页中的标签.
document.getElementById(""); 通过标签中的id属性获取到标签 一对一
获得到标签之后,你可以对标签进行以下操作:
1.对标签属性进行操作(标签中支持的属性),包含获取属性值,给属性赋值
2.对标签体内容进行操作
3.对标签的样式进行操作
*/
function test(){
//在js中获取到文本框中的值,如何获取?
var tobj1 = document.getElementById("t1");
console.log(tobj1.value);
console.log(tobj1.type);
var tobj2 = document.getElementById("t2");//获得第二个文本框对象
tobj2.value = tobj1.value;
tobj1.value="";
tobj1.type = "radio";
tobj1.disabled = "disabled";
}
</script>
</head>
<body>
<!--
标签中id唯一的,name可重复的,class,style这些属性每个标签都拥有,值可以自定义
-->
<input type="text" id="t1" value=""/>
<input type="text" id="t2" value=""/>
<input type="button" value="测试" onclick="test()" />
<div>wwwww</div>
<p>ssss</p>
</body>
</html>6.计时
通过使用JavaScript,我们有能力做到在一个设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行,我们称之为计时事件.
-
setTimeout("函数","时间")未来的某时执行代码,setTimeout() 运行一次执行一次
-
clearTimeout() 取消setTimeout()
-
setInterval("函数","时间")每隔指定时间重复调用
-
clearInterval() 取消setInterval()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function test(){
alert("aaaa");
}
//把test函数调用,交给了setTimeOut这个定时器,让他在延迟指定的时间后调用指定函数
//var t = setTimeout("test()",5000);//在5秒后调用test(),返回一个定时器编号
var t;//函数外面定义的变量就是全局变量,在函数中都可以获取
function startTime(){
t = setInterval("test()",2000);//不间断的调用函数
}
//中间有可能去掉定时
function stopTime(){
//clearTimeout(t);//关闭定时器
clearInterval(t);
}
</script>
</head>
<body>
<input type="button" value="开始" onclick="startTime()" />
<input type="button" value="关闭" onclick="stopTime()" />
</body>
</html>
7.一般业务的代码
1.多选框全选或者取消全选状态
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function test(ck){
//document.getElementById(""); 通过id属性获取到一个标签对象
//通过标签名获取标签
//var objs = document.getElementsByTagName("input");//此时获取到的是多个标签,是一个集合对象
//var objs = document.getElementsByClassName("c1");//通过类名获取
var objs = document.getElementsByName("course");//里面技术只有一个元素,也是一个集合
//遍历集合
for(var i=0;i<objs.length;i++){
//通过循环,每次取出一个标签对象
objs[i].checked = ck;
}
}
</script>
</head>
<body>
<input type="checkbox" name="course" class="c1" value="java"/>java
<input type="checkbox" name="course" class="c1" value="c"/>c
<input type="checkbox" name="course" class="c2" value="css"/>css
<input type="checkbox" name="course" class="c2" value="html"/>html
<input type="button" value="全选" onclick="test(true)" />
<input type="button" value="取消" onclick="test(false)" />
</body>
</html>2.简单计算器的代码运行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>完成简单的计算器案例</title>3
<style type="text/css">
.outside{
margin: auto;
background-color: beige;
width: 400px;
height: 400px;
}
.input{
margin-left: 50px;
margin-top: 40px;
text-align: center;
width: 300px;
height: 50px;
}
</style>
<script type="text/javascript">
// function math(a,b){
// var inobj=document.getElementById("in")
// if(inobj.value.contains("+")){
// c=a+b;
// return c;
// }
// if(inobj.value.contains("-")){
// c=a-b;
// return c;
// }
// if(inobj.value.contains("/")){
// c=a/b;
// return c;
// }
// if(inobj.value.contains("*")){
// c=a*b;
// return c;
// }
// }
// function point(){
// var inobj=document.getElementById("in");
// var clobj=document.getElementsByClassName("but");
// for(i=0;i<clobj.length;i++){
// var str1=clobj.value;
// inobj.innerHTML=+str1;
// }
// }
// var flag=true;
function point(str){
var t=document.getElementById("in");
// if(flag){
// t.value="";
// }
// flag=false;
t.value=t.value+str;
}
function clean(){
var t=document.getElementById("in");
t.value="";
// flag=true;
}
//计算结果
function point1(){
var t=document.getElementById("in");
t.value=eval(t.value);//运算某个字符串
}
</script>
</head>
<body>
<div class="outside">
<input type="text" rows="2" cols="40" class="input"/ id="in">
<div class="one">
<input type="button" value="7" class="but" onclick="point(7)">
<input type="button" value="8" class="but" onclick="point(8)">
<input type="button" value="9" class="but" onclick="point(9)">
<input type="button" value="+" class="but" onclick="point('+')">
</div>
<div class="two">
<input type="button" value="4" class="but" onclick="point(4)">
<input type="button" value="5" class="but" onclick="point(5)">
<input type="button" value="6" class="but" onclick="point(6)">
<input type="button" value="-" class="but" onclick="point('-')"> </div>
<div class="three">
<input type="button" value="1" class="but" onclick="point(1)">
<input type="button" value="2" class="but" onclick="point(2)">
<input type="button" value="3" class="but" onclick="point(3)">
<input type="button" value="*" class="but" onclick="point('*')">
</div>
<div class="four">
<input type="button" value="0" class="but" onclick="point(0)">
<input type="button" value="c" class="but1" onclick="clean()">
<input type="button" value="=" class="but2" onclick=" point1('=')">
<input type="button" value="/" class="but" onclick="point('/')">
</div>
</div>
</body>
</html>3.多选框至少选择一个进行判断
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script type="text/javascript">
function aont(){
var arr=document.getElementsByClassName("a5");//将该对象放到一个数组里
var n=0;
if(n==0){
for (var i = 0; i < arr.length; i++) {
if(arr[i].checked){//arr[i].checked返回的是true和flase
n++;
}
}
if(n==0){//n==0说明上面代码未执行,没有选中多选框
alert("至少选中一个");
}}
}
</script>
<body>
<p class="c1">爱好:
<input type="checkbox" class="a5" value="敲代码">敲代码
<input type="checkbox" class="a5" value="打游戏">打游戏
<input type="checkbox" class="a5" value="跳绳">跳绳
<input type="checkbox" class="a5" value="打篮球">打篮球
<input type="button" value="全选" onclick="au(true)">
<input type="button" value="取消" onclick="au(false)">
<input type="button" value="确定" onclick="aont()">
</p>
</body>
</html>4.计时器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var c=1;
var t
function strart1(ck){
var mtimeobj=document.getElementById("mtime");
mtimeobj.innerHTML=c;
c=c+1;
// t=setTimeout("strart1()",1000);
var weobj=document.getElementById("we");
weobj.disabled=true;
}
t=setInterval("strart1()",1000);
//对谁操作,先要获取谁的对象
function stop1(ck){
// clearTimeout(t);
clearInterval(t);
var weobj=document.getElementById("we");
weobj.disabled=false;
}
function return1(){
var mtimeobj=document.getElementById("mtime");
mtimeobj.innerHTML="0";
c=1;
}
</script>
</head>
<body>
<div><textarea rows="2" cols="7" id="mtime"></textarea></div>
<div><input type="button" value="开始" onclick="strart1()" id="we" />
<input type="button" value="停止" onclick="stop1()" />
<input type="button" value="复位" onclick="return1()"/></div>
</body>
</html>5.网页自动转换
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.left_btn,
.right_btn {
text-align: center;
color: white;
opacity: 0.5;
position: absolute;
top: 300px;
}
.right_btn {
right: 465px;
}
</style>
<script type="text/javascript">
var arr=["../../img/1.jpg","../../img/2.jpg","../../img/3.jpg","../../img/4.jpg","../../img/5.jpg"];
var num=0;
var t=setInterval("change()",3000);
function change(){
var div1obj=document.getElementById("div1");
if(num==arr.length-1){
num=0;
}else{
num+=1;
}
div1obj.src=arr[num];
}
function stop1(){
clearInterval(t);
}
function start1(){
setInterval("change()",3000);
}
function btn1(){
var div1obj=document.getElementById("div1");
if(arr.length-num==arr.length){
num=4;
}
else{
num-=1;
}
div1obj.src=arr[num];
}
function btn2(){
var div1obj=document.getElementById("div1");
if(arr.length-num==1){
num=0;
}
else{
num+=1;
}
div1obj.src=arr[num];
}
</script>
</head>
<body>
<div align="center">
<div style="width:590px;height: 1000px;">
<div style="height: 100px;"></div>
<div><img src="../../img/1.jpg" id="div1"onmouseover="stop1()" onmouseout="start1()">
<div class="left_btn"><input type="button" value="<" onclick="btn1()"onmouseover="stop1()" onmouseout="start1()"/></div>
<div class="right_btn"><input type="button" value=">" onclick="btn2()"onmouseover="stop1()" onmouseout="start1()"/></div>
</div>
</div>
</div>
</body>
</html>
扫一扫
173
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
