java web
javascript(js):
javascript(js):
js嵌入在html中,在浏览器中运行的脚本语言
js跟java没有任何关系,只是语法相似
是一种网页的编程技术,用来向html页面添加交互行为
由浏览器解释执行代码,不进行预编译
javascript特点:
-可以用任何编译文本的工具编写js代码
-由浏览器内置的javascript引擎执行代码
解释执行:事先不编译,逐行执行
基于对象:内置大量的现成的对象
-适用于:
客户端的数据计算
客户端的表单验证
浏览器的事件触发
网页特效的制作
服务器的异步提交ajax
如何引入javascript:
有三种方式
-把js代码写在html的某个标签上
如:
<input type="button" value="按钮1" onclick="alert('js代码写在html的某个标签中')"/>-把js代码写在html文件中<head>元素里的<script>标记中
这样的<script>标记可以在head中出现多次
<script>可以写在任意位置,但是推荐放在<head>中
如:
<head>
<script type="text/javascript" language="javascript">
//定义的一个js函数
function ab(){
alert("js代码写在head中的script标签中");
}
</script>
</head>
<body>
<input type="button" value="按钮2" onclick="ab()"/>
</body>-把js写在专门的js文件中
在html文件中的head元素中引入多个js文件
在html的head元素中可以引入多个js文件
每个script标记只能引入一个js文件
如:
test.js文件
function bb(){
alert("js代码在外部的js文件中");
}
<body>
<input type="button" value="按钮3" onclick="bb()"/>
</body>js的语法:
js代码区分大小写,大小写敏感
所有的js代码用分号结束
标识符定义:
可以包含字母,数字,下划线,$符号,但是不能以数字开头
命名的规范使用驼峰命名法
变量:
js声明变量用var定义
变量在声明的时候不需要指定的数据类型
var i=3;
var s='abc';
js的数据类型:
-特殊类型:
null 空,undefined 未定义
-内置对象(类型):
Number 数字
String 字符串
Boolean 布尔
Function 函数
Array 数组
-外置对象:
window对象:浏览器对象
document对象:文档对象
-自定义对象:
Object对象
常用的内置对象:
-String对象
var str="abc";
var str1=new String("abc");
方法:
str.length;//取字符串的长度
str.toLowerCase();//转小写
str.toUpperCase();//转大写
str.charAt(2);//返回指定位置的字符
str.charCodeAt(2);//返回指定位置字符的unicode编码
str.indexOf(findstr,[index]);//在str中从index下标位置开始寻找findstr,找到了返回位置,未找到返回-1;
str.lastIndexOf(findstr);//返回str中findstr最后出现的下标
str.substring(start,end);//截取str中指定长度的的子字符串
str.substr(start,length);//截取str中指定长度的的子字符串
str.replace(findstr,tostr);//在str中寻找findstr,找到后用tostr替换返回值换后的字符串
str.split(bystr,{howmany]);
bystr:分隔的字符串
howmany 指定返回的数组的最大长度,可以省略
返回值是分割后的字符串数组
-Array对象:
创建数组对象
一维数组:
var arr1=new Array();
var arr2=new Array(10);
var arr3=new Array(100,"abc",true);
var arr4=[100,"abc",true];
二维数组:
var arr5=[
[1,"2",3],
[true,"abc"],
[123567]
];
var arr6=new Array();
arr6[0]=new Array();
方法:
arr.reverse();//翻转,改变了源数组
数组排序:
var arr=[32,12,111,444];
arr.sort();
console.log(arr.toString());//111,12,32,444;
//回调sortFunction函数
arr.sort(sortFunction);
console.log(arr.toString());//12,32,111,444;
function sortFunction(a,b){
return a-b;
}
//匿名函数
arr.sort(function(a,b){
return a-b;
});
//循环
for(var i=0;i<arr.length;i++){
alert(arr[i]);
}
for(var x in arr){
alert(x+" "+arr[x]);//x为数组的下标
}-Math对象:
Math.PI;//3.141592653589793
Math.E;//2.718281828459045
Math.round(3.567);//四舍五入
Math.sin(x)....
Math.sqrt(x)...
Math.abs(x)...
Math.random();//随机数
-Date对象:
用于处理日期和时间,封装系统时间毫秒数
创建对象:
var now=new Date();//获取当前时间
var now1=new Date("2019/08/08 18:04");//指定时间
获取时间毫秒数
getTime();
读写时间分量
getDate();//获取日
getDay();//获取星期几
getFullYear();//或取年份
转换日期为字符串
now.toString();//Thu Aug 08 2019 18:16:45 GMT+0800 (中国标准时间)
now.toLocalTimeString();//下午6:16:45
now.toLocalDateString();//2019/8/8
now.toTimeString();//18:16:45 GMT+0800 (中国标准时间)
now.toDateString();//Thu Aug 08 2019-RegExp对象:
创建对象:
var reg=new RegExp("pattern",[flags]);
flags:
g:设定当前匹配为全局模式
i:忽略匹配中的大小写检测
方法:
reg.test(string);//检验字符串string中是否有与reg对象匹配的文本,有就返回true,没有返回false;
str.replace(regex,tostr);按照正则规则寻找,找到后替换toStr
str.match(regext);//返回匹配字符串数组,未匹配到就返回null
str.search(regext);//返回匹配字符串的首字符的位置索引,未匹配到就返回-1,注意大小写
var name="abcd1";
var reg=new RegExp("^[a-zA-Z0-9]{3,6}$");
var flag=reg.test(name);
alert(flag);//true
alert(name.replace(/ab/,"12"));//12cd1
alert(name.match('cd'));//cd
alert(name.match('bd'));//null
alert(name.search(/bcd/));//1
alert(name.search(/Bcd/));//-1-函数对象:
js中的函数对象就是Function对象
函数的名称就指向Function对象的引用
定义一个函数:
function 函数名称(函数的的参数){
函数体
return 返回值;
}
函数的返回值:
如果没有return 就是默认返回undefined
如果有return,就return后边的数据,且一个数据
函数参数的说明:
js中没有函数重载
调用时总只要函数名一样,无论传入多少个参数,都是调用同一个函数
没有接收到实参的参数值的undefined
所有的参数传递给arguments数组对象,可以重新更改赋值
函数的参数不能加var
匿名函数:
var func=function(arg1,arg2...){
函数体
return 返回值
}
如:
var add=function(a,b){
return a+b;
}
console.log(add(1,2));//3
console.log(add(1,2,3));//3
console.log(add(1));//NAN(不是一个数字)
console.log(add);//输出整个函数用Function对象直接创建函数
console.log(add(1,2));//3
console.log(add(1,2,3));//3
console.log(add(1));//NAN(不是一个数字)
console.log(add);//输出整个函数-外部对象:
BOM对象(browser object model)
浏览器对象模型,用来访问跟浏览器窗口有关的对象
在BOM对象对象有很多的对象,每个对象还有很多属性和方法
通过这些方法和属性,移动窗口,更改状态栏文本,和其他跟窗口操作相关的.
DOM对象(Document Object model):
文档对象模型,用来操作文档
定义了访问和操作html文档的标准方法
应用程序通过对dom树的操作,来实现和html的交互
-window对象:
window表示浏览器窗口
是所有javascript全局对象,如果不写window,默认从window访问起
window常用的属性:
-document:在窗口中显示文档树.
-history:浏览器的窗口的后退和前进
包含用户在浏览器窗口中,访问过的url
-length属性
方法:
-back()
-forward()
-go(num)
-location:窗口文件地址对象.
href属性:给地址栏赋值新地址
window.location.href="xxx.html";
-screen:当前屏幕对象
常用于获取屏幕的分辨率和色彩
常用的属性:
-width/height
-avaiWidth/avaiHeight
-navigator:浏览器的相关信息
常用语获取客户端浏览器和操作系统信息
如:
console.log(window.navigator);
console.log(window.document);
console.log(window.history);
console.log(window.location);
console.log(window.screen);
//刷新当前地址栏所对应的网页
window.location.reload();
//给当前的地址栏赋值为新的url
window.location.href="http://www.zhaopin.com";window对象常用的方法:
alert();//弹出式窗口,模态框(当前窗口不关闭,无法操作后面的窗口)
confirm();//模态框,确认窗口
setInterval();//周期性函数
clearInterval();//清除周期性操作
setTimeOut();//设置定时器
clearTimeOut();//重置js定时器
如:
<head>
<style>
#msg{
border:1px solid red;
padding:10px;
text-align:center;
width:200px;
background-color:#eee;
}
.hide{
/*元素不显示*/
display:none;
}
.show{
/*元素显示*/
display:block;
}
</style>
</head>
<body>
<span>动态时钟 setInterval方法</span>
<br />
<input type="button" value="启动" onclick="begin();"/>
<input type="button" value="停止" onclick="end();"/>
<br />
<div>当前时间:<span id="clock"></span></div>
<br />
<span>动态提示信息</span>
<br />
<div>
<input type="button" value="删除"
onclick="del();"/>
</div>
<div id="msg" class="hide">操作成功</div>
<br />
</body>
var id;
//动态时钟
function begin(){
//每隔一秒执行一次function函数
id=window.setInterval(function(){
var now=new Date();
var time=now.toLocalTimeString();
var span_ele=document.getEgetElementById("clock");
span_ele.innerHTML=time;
},1000);
}
function end(){
//清除周期性操作
window.clearInterval(id);
}
//动态提示信息
function del(){
var div_ele=window.document.getElementById("msg");
div_ele.className="show";
id=window.setTimeout(function(){
div_ele.className="hide";
window.clearTimeout(id);
},2000);
}
