java web之javascript(js)解析
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:45now.toLocalDateString();//2019/8/8now.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);//truealert(name.replace(/ab/,"12"));//12cd1alert(name.match('cd'));//cdalert(name.match('bd'));//nullalert(name.search(/bcd/));//1alert(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));//3console.log(add(1,2,3));//3console.log(add(1));//NAN(不是一个数字)console.log(add);//输出整个函数用Function对象直接创建函数
console.log(add(1,2));//3console.log(add(1,2,3));//3console.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();//给当前的地址栏赋值为新的urlwindow.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);}java web之javascript(js)解析相关推荐
- 2.Java Web之JavaScript
1.JavaScript介绍 JavaScript语言诞生主要是完成页面的数据验证,因此它运行在客户端,需要运行浏览器来解析执行JavaScript代码. JS 是 Netscape 网景公司的产品, ...
- Java Web(1)-JavaScript
只需要在 head 标签中,或者在 body 标签中, 使用 script 标签 来书写 JavaScript 代码 <!DOCTYPE html> <html lang=" ...
- 【Java Web开发指南】解析Spring中Ioc和DI（入门Demo）
文章目录 1 Spring概述 2 Spring的体系结构 3 Ioc代码实现 4 DI代码实现 5 代码目录 1 Spring概述 一种Java应用开发框架,而SpringMVC是针对Web的框架. ...
- java自动化执行javascript,Js代码执行__实现自动化
一.代码如下 package www.gui.v2; import java.awt.AWTException; import java.awt.List; import java.awt.Recta ...
- java web 引入js_intellij idea java web怎么引入js
展开全部 IDEA中Javaweb引入32313133353236313431303231363533e78988e69d8331333363363364js的方式有大概两种: 一:内部引入方式 意思 ...
- 3.Java Web之JavaScript实战
导入代码(链接:https://pan.baidu.com/s/17v_dnXJTmo7QvFm-H58vaA 提取码:71wk) 1.JavaScrip实战1 鼠标悬浮和离开的效果设置 1)当鼠标悬 ...
- Java中用JS那些_java web中javascript主要用哪些？
java web中javascript主要用途是在页面上完成特定按钮的事件功能并且实现前后台交互. JavaScript 是一种跨平台,面向对象的脚本语言.作为一种小巧且轻量级的语言,JavaScri ...
- Web中JS（Javascript）解析JSON数据的方法
js解析json数据,可以使用JSON.parse()方法来实现解析.JSON.parse()方法可以解析JSON字符串,转换为 JavaScript 对象 下面我们就结合简单的代码示例,给大家介绍j ...
- JS/JavaScript中解析JSON --- JSON.parse()、JSON.stringify()以及$.parseJSON()使用详解
JS/JavaScript中解析JSON --- JSON.parse().JSON.stringify()以及$.parseJSON()使用详解 现在JSON格式在web开发中非常重要,特别是在使用 ...
最新文章
- MUV LUV EXTRA 2019CCPC秦皇岛站J题 KMP
- git diff Git查看版本改动
- Android 控件学习--自定义SeekBar
- 如何将文件地址转为url_Node.js 源码解析 util.promisify 如何将 Callback 转为 Promise
- dubbo中的Filter顺序是如何确定的
- Python的threadpool模块
- 人工智能里一种实现机器学习的技术
- LCS-最大公共子序列（DP问题）
- 此项目与Visual Studio的当前版本不兼容的报错
- 美国AI出口限令倒计时，硅谷直喊“下手轻点”，担心推动中国技术发展
- c++重载++和--
- datagrid在MVC中的运用05-加入时间搜索条件,枚举填充下拉框
- 摆脱IDE进行时. . .
- CRC算法（直接计算法和查表法）
- onenote插入代码块的完美解决方法
- 高密集型工业体系步履蹒跚
- matlab portcons,马科维茨投资组合理论（均方模型）学习笔记——基于Matlab（二）...
- html5 表单 重置,css修改input表单默认样式重置与自定义大全
- 记账APP：小哈记账2——注册页面的制作
- android 路由器 操作系统,小米全新路由器操作系统是什么？支持什么语言？