JavaScript概述
javaScript是由Netscape公司开发的一种直译式脚本语言,用来为网页添加各种各样的动态功能,不需要编译直接通过浏览器解释运行,通常javaScript脚本是嵌入HTML中来实现自身的功能的
以java为基础(面向对象)
作用:
- 响应客户端鼠标和键盘事件
- 客户端页面表单数据验证
- 使用JavaScript动态的改变页面标签的样式
基本语法
位置:javaScript脚本写在一组
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--
外部导入js文件
将js文件中的out.js导入
-->
<script src="js/out.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">
// alert("对话框");
/* confirm确认对话框,返回true or false
alert(confirm("确定要关闭吗;"))
*/
//输入提示框
alert(prompt("请输入"));
</script>
</head>
<body>
</body>
</html>
• JavaScript支持的数据类型
–1、数值型(number)：
其中包括整型数和浮点型数。
–2、布尔型(boolean)：
即逻辑值，true或flase。
–3、字符串型：
由单个或多个文本字符组成。字符串是用单引号或双引号来说明的。（使用单引号来输入包含引号的字符串。）
–4: undefined类型
–5: Object类型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//声明变量 变量的值可以是任意的js支持的类型
var a = 10;
alert(a);
a = "jim";
alert(a);
//数据类型
//1.数值number 整数 小数
var b = 10;
b = 10.5;
alert(b);
//2.布尔型
var res = true;
res = false;
alert(res);
//3.字符串型 ''和""都表示字符串
var s = "abc";
s = 'abc';
alert(s);
//4.undefined 声明但未赋值的变量
var u;
alert(u == undefined);
//5.<object>
var date = new Date;
alert(date.getFullYear());
//算术运算符
//数值减字符串的数字,字符串会隐式进行数据类型转换
var x = 5;
var y = 10;
var z = "5";
var n = "abc";
console.log(x+y);//加法 和 连接 两个功能
console.log(x-y);
console.log(x+z);
console.log(x+n);
console.log(x-n);
console.log(z-n);//NaN not a number
console.log(z+n);
//= == ===
//=== 全等号,比较数值和数据类型
var c = 5;
var d = "5";
console.log(c==d);//true
console.log(c===d);//false
</script>
</head>
<body>
</body>
</html>
函数
函数:将完成某个功能的一段代码,包装到一个函数中,可以重复调用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
// function关键字声明函数
/* function fun(){
console.log("调用函数")
}
fun(); */
//可以隐式的声明函数,不需要定义返回值的类型
function fun(a,b){
console.log(a+"::"+b);
return a+b;
}
var res = fun(10,"5");
console.log(res);
</script>
</head>
<body>
<!-- 给标签中的事件绑定处理函数 -->
<input type="button" onclick="fun()" value="按钮" />
</body>
</html>
全局变量和局部变量
- parseInt(str):把括号内的内容转换成整数之后的值.如果括号内是字符串，则字符串开头的数字部分被转换成整数，如果以字母开头，则返回“NaN”
- parseFloat(arg) 把括号内的字符串转换成浮点数之后的值，字符串开头的数字部分被转换成浮点数，如果以字母开头，则返回“NaN”。
- typeof(arg)返回arg值的数据类型。
- eval(arg) 可运算某个字符串
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
/* var a = 10 ;//全局变量
function fun(){
var b = 5;//局部变量
}
console.log(a);
console.log(b);//无法访问 */
/*
parseInt(str) 转为整数
*/
var x = 5;
var y = 5.111;
var z = "5";
var c = "5a2";
var v = "a5";
console.log(x+parseInt(y));
console.log(x+parseInt(z));
console.log(x+parseInt(c));
console.log(x+parseInt(v));
/* parseFloat 转为浮点类型 */
console.log(x+parseFloat(y));
console.log(x+parseFloat(c));
/* tyof返回数据类型 */
var b;
console.log(typeof(2));
console.log(typeof("2"));
console.log(typeof(true));
console.log(typeof(b));
/* eval 可运算某个字符串 把字符串作为js脚本执行*/
var n = "1+3+x";
console.log(eval(n));
eval(alert("sssss"));
</script>
</head>
<body>
</body>
</html>
常用事件
onclick()鼠标点击时；
ondblclick鼠标双击时;
onblur()标签失去焦点;
onfocus()标签获得焦点;
onmouseover()鼠标被移到某标签之上;
onmouseout鼠标从某标签移开;
onload()是在网页加载完毕后触发相应的的事件处理程序;
onchange()是指当前标签失去焦点并且标签的内容发生改变时触发事件处理程序。
Onkeydown键盘按下
Onkeyup 键盘抬起
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function fun() {
console.log("奥里给");
}
</script>
</head>
<body onload="fun()">
<input type="button" value="鼠标单击事件" onclick="fun()" />
<div ondblclick="fun()" />
双击事件
</div>
<input type="text" onfocus="fun()" value="聚焦事件" />
<input type="text" onblur="fun()" value="失焦事件" />
<input type="text" onmouseover="fun()" value="悬浮事件" />
<input type="text" onmouseout="fun()" value="鼠标移开事件" />
<input type="text" onchange="fun()" value="标签失去焦点并且内容发生变化触发" />
<input type="text" onkeydown="fun()" value="按下时触发" />
<input type="text" onkeyup="fun()" value="抬起时触发" />
</body>
</html>
Event对象
Event 对象代表事件的状态，比如键盘按键的键位、鼠标的位置。
type 事件类型
Button 被点击的鼠标键位
altKey 按下altKey返回true
ctrlKey 按下ctrlKey返回true
shiftKey按下shiftKey返回true
keyCode 返回被按下的键位编码
offsetX 当前标签内的鼠标X轴
offsetY 当前标签内的鼠标Y轴
clientX 鼠标在浏览器内部X轴
clientY鼠标在浏览器内部Y轴
screenX 鼠标在显示器内的X轴
screenY鼠标在显示器内的Y轴
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function fun(e){
// console.log(e.button); 获得鼠标键位 0：左键 1：滚轮 2：右键
// console.log(e.type); 返回事件类型
// console.log(e.offsetX+"::"+e.offsetY); 鼠标在当前标签内的坐标
// console.log(e.clientX+"::"+e.clientY); 鼠标在浏览器内的坐标
// console.log(e.screenX+"::"+e.screenY); 鼠标在显示器内的坐标
// console.log(e.keyCode);
// console.log(e.altKey) 按下alt键返回true
// console.log(e.ctrlKey)按下ctrl键返回true
}
</script>
</head>
<body >
<input type="text" onclick="fun(event)" />
<div style="width: 100px; height: 100px; background-color: aqua;" onmousedown="fun(event)">
</div>
<input type="text" onkeydown="fun(event)" />
</body>
</html>
内置对象
内置对象–String字符串(和java相似)
charAt(n)：返回该字符串位于第n位的单个字符.
indexOf(char)：返回指定char首次出现的位置.
lastIndexOf(char) ：跟 indexOf() 相似，不过是从后边开始找.
substring(start,end) ：返回原字符串的子字符串，该字符串是原字符串从start位置到end位置的前一位置的一段.
substr(start,length) ：返回原字符串的子字符串，该字符串是原字符串从start位置开始，长度为length的一段.
toLowerCase() ：返回把原字符串所有大写字母都变成小写的字符串.
toUpperCase() ：返回把原字符串所有小写字母都变成大写的字符串.
split(分隔符字符) ：返回一个数组，该数组是从字符串对象中分离开来的，<分隔符字符>决定了分离的地方，它本身不会包含在所返回的数组中。例如：‘1&2&345&678’.split(’&’)返回数组：1,2,345,678。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var str = new String("abcdefghr");
console.log(str.substring(2,5));//substring(开始位置，结束位置（不包含）)
console.log(str.substr(2,5));//substr(开始位置，截取个数)
</script>
</head>
<body>
</body>
</html>
内置对象–Array数组
js和java中数组的区别?
- js数组可以自动扩容，不会出现数组越界的情况
- js数组中可以存放任意数据类型
- java数组一旦定义长度，不可以更改
- java数组中的数据类型必须一致
concat() 用于连接两个或多个数组。arrayObject.concat(arrayX,arrayX,…,arrayX)
pop() 用于删除并返回数组的最后一个元素。
push() 可向数组的末尾添加一个或多个元素，并返回新的长度。
shift() 用于把数组的第一个元素从其中删除，并返回第一个元素的值。
slice() 可从已有的数组中返回选定的元素。arrayObject.slice(start(必须),end(可选)),该方法并不会修改数组
splice() 向/从数组中添加/删除项目，然后返回被删除的项目。该方法会改变原始数组。
splice(index(删除的位置),howmany(数量,为0不删除),item1,…,itemX(插入的元素))
join(<分隔符>) ：返回一个字符串，该字符串把数组中的各个元素串起来，用<分隔符>置于元素与元素之间。
reverse() 使数组中的元素顺序反过来。如果对数组[1, 2, 3]使用这个方法，它将使数组变成：[3, 2, 1]。
sort() ：使数组中的元素按照一定的顺序排列。如果不指定<方法函数>，则按字母顺序排列。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
// 创建数组方式1
var arr = new Array();
arr[0] = 1;
arr[1] = "abc";
arr[2] = true;
console.log(arr);
// 创建方式2
var arr1 = new Array(1,"abc",true);
console.log(arr1);
// 创建方式3
var arr2 = [1,"abv",true];
console.log(arr2);
var str1 = [1,2,3,4];
var str2 = [5,6,7,8,9];
// concat 连接多个数组，并返回一个新数组
/* var str3 = str1.concat(str2)
console.log(str3);
console.log(str1); */
//slice(开始，结束（不包含）)截取数组中的一段，返回一个新数组，原来的数组不变
var str3 = str2.slice(2,5);
console.log(str3);
console.log(str2);
//splice(删除插入位置，个数，插入1，插入2)；
var str3 = str1.splice(1,2,11,12,13,14);
console.log(str3);
console.log(str1);
//join 将数组转为字符串，用指定的符号连接
var str3 = str2.join("::");
console.log(str3);
console.log(str2);
//反转数组
console.log(str2.reverse());
//sort
var str4 = [10,4,2,9,6];
console.log(str4.sort(sortNumber));
//自定义一个比较函数
function sortNumber(a,b){
return a-b;
}
</script>
</head>
<body>
</body>
</html>
内置对象–Date
•获取日期
new Date() 返回当日的日期和时间
getFullYear() 返回四位数字年份
getDate() 返回一个月中的某一天 (1 ~ 31)
getMonth() 返回月份 (0 ~ 11)
getDay() 返回一周中的某一天 (0 ~ 6)
getHours() 返回 Date 对象的小时 (0 ~ 23)
getMinutes() 返回 Date 对象的分钟 (0 ~ 59)
getSeconds() 返回 Date 对象的秒数 (0 ~ 59))
•设定日期
setDate() 设置 Date 对象中月的某一天 (1 ~ 31))
setMonth() 设置 Date 对象中月份 (0 ~ 11))
setYear() 设置 Date 对象中的年份（两位或四位数字）
内置对象- Math
Math.abs(x) 绝对值计算；
Math.pow(x,y) 数的幂；x的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 中的最小值
Html DOM
DOM(Document Object Model) 文档对象模型
在javaScript中认为网页中每一个标签, html文件都是一个对象.
那么js对网页的操作, 本质上就是操作对象, 这一类对象统称为DOM.
如果在js中需要对网页中的标签进行操作, 那么首先需要获得这些标签.
要操作, 先得到
在网页加载后, 会生成一个document对象(表示整个html文件),
通过document对象可以获得网页中任意一个标签.
document.getElementById("");通过标签的id值获得网页中的标签
对标签的操作分为4种:
- 对标签的属性操作
- 对标签体中的内容操作
- 对标签的css属性操作
- 对标签事件操作
Html DOM-查找元素
通过 id 找到 HTML 标签
document.getElementById(“id");
通过标签名找到 HTML 标签
document.getElementsByTagName("p");
通过类名找到 HTML 标签
document.getElementsByClassName("p");
通过name找到 HTML 标签
document.getElementsByName(“name");
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
/* */
function fun(){
var divobj1 = document.getElementById("div1");
var divobj2 = document.getElementById("div2");
// console.log(divobj1.innerHTML); 获取标签中html内容（包含子标签）
// console.log(divobj1.innerText); 获取标签中的文本内容
/* divobj2.innerHTML = divobj1.innerHTML;
divobj2.innerText = divobj1.innerHTML; */
divobj2.innerHTML = "<b>ssss</b>";//会处理其中的标签
divobj2.innerText = "<b>ssss</b>";//只处理文本内容
}
</script>
</head>
<body>
<div id="div1">
<b>ssss</b>
</div>
<div id="div2">
</div>
<input type="button" value="操作" onclick="fun()" />
</body>
</html>
HTMLDOM - 改变 HTML
改变 HTML 标签的属性
document.getElementById(“username").value=“new value";
document.getElementById("image").src=“new.jpg";
修改 HTML 内容的最简单的方法时使用 innerHTML 属性
document.getElementById(“div”).innerHTML=new HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function oper(){
var divobj1 = document.getElementById("div1");
var divobj2 = document.getElementById("div2");
//console.log(divobj1.innerHTML);//获得标签中html内容(包含子标签)
//console.log(divobj1.innerText);//获得标签中的文本内容
//divobj2.innerHTML = divobj1.innerHTML;
//divobj2.innerHTML = "<b>div中的内容</b>";
divobj2.innerText = "<b>div中的内容</b>";//只能处理文本内容
}
</script>
</head>
<body>
<div id="div1">
<b>div中的内容</b>
</div>
<div id="div2">
</div>
<input type="button" value="操作" onclick="oper()"/>
</body>
</html>
HTML DOM 改变CSS
语法：
document.getElementById("id").style.property=new style
例：
document.getElementById("p2").style.backgroundImage="url(bg.jpg)";
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function fun(){
var divobj1 = document.getElementById("div1");
divobj1.style.backgroundColor = "green";
divobj1.style.width = "100px";
divobj1.style.height = "100px";
}
</script>
</head>
<body>
<div id="div1">
ssss
</div>
<input type="button" value="操作" onclick="fun()" />
</body>
</html>
HtmlDOM-事件
html dom 使javaScript有能力对html事件做出反应。
document.getElementById(“bid”).onclick=function(event){
//匿名函数
//函数体
}
注意：此段脚本要么写在onload中，要么写在此dom标签之后。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
//匿名函数,在js中为标签绑定事件处理函数,实现分离
document.getElementById("but").onclick = function(){
alert("aaa");
}
}
</script>
</head>
<body>
<input type="button" value="操作" id="but"/>
<!-- <script type="text/javascript">
//匿名函数
document.getElementById("but").onclick = function(){
alert("aaa");
}
</script> -->
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function fun(){
/* var objs = document.getElementsByTagName("input");
if(objs[0].checked != true){
for (var i = 0; i < objs.length; i++) {
objs[i].checked = true;
}
}else{
for (var i = 0; i < objs.length; i++) {
objs[i].checked = false;
}
} */
/* var objs = document.getElementsByClassName("chec");
if(objs[0].checked != true){
for (var i = 0; i < objs.length; i++) {
objs[i].checked = true;
}
}else{
for (var i = 0; i < objs.length; i++) {
objs[i].checked = false;
}
} */
var objs = document.getElementsByName("check");
if(objs[0].checked != true){
for (var i = 0; i < objs.length; i++) {
objs[i].checked = true;
}
}else{
for (var i = 0; i < objs.length; i++) {
objs[i].checked = false;
}
}
}
</script>
</head>
<body>
<input type="checkbox" class="chec" name="check"/>
<input type="checkbox" class="chec" name="check"/>
<input type="checkbox" class="chec" name="check"/>
<input type="checkbox" class="chec" name="check"/>
<input type="button" value="操作" onclick="fun()"/>
</body>
</html>
表单验证-正则表达式
^匹配以指定字符开头的字符串
$匹配以指定字符结尾的字符串
*匹配前面的字符式零次或多次
{n}匹配确定的 n 次
{n,}至少匹配n 次
{n,m}匹配n-m次，包含n和m
[0-9]表示0-9之间的任意字符
\d 匹配一个数字字符。等价于 [0-9]
\D 匹配一个非数字字符。等价于 [^0-9]
[a-z]匹配 ‘a’ 到 ‘z’ 范围内的任意小写字母字符
[A-Z]匹配 ‘A’ 到 ‘Z’ 范围内的任意大写字母字符
[^a-z]匹配任何不在 ‘a’ 到 ‘z’ 范围内的任意字符
x|y匹配 x 或 y
\w等价于’[A-Z,a-z,0-9,_]‘
\W 等价于 '[^A-Z,a-z,0-9,_]‘
只能输入汉字:[\u4e00-\u9fa5]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function checkForm(val){
//var reg = new RegExp("a");
//var reg = /^\d*$/;
//var reg = /^\d+$/
//var reg = /^\d{3}$/
//var reg = /^[^0-9]+$/ 匹配非数字==\D
//var reg = /^[a-z]+$/
//var reg = /^[A-z]+$/
//var reg = /^\w+$/
var reg = /^[\u4e00-\u9fa5]+$/
var res = reg.test(val);
console.log(res);
}
</script>
</head>
<body>
<input type="text" onblur="checkForm(this.value)" />
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function checkForm(){
var obj = document.getElementById("account").value;
if(obj.length == 0){
//alert("请输入账户");
document.getElementById("span").innerHTML = "请输入账户";
return false;
}
if(obj.length < 6 || obj.length >10){
//alert("账户为6-10位");
document.getElementById("span").innerHTML = "账户为6-10位";
return false;
}
return true;
}
</script>
</head>
<body>
<form action="server.html" method="get" onsubmit="return checkForm() ">
<input type="text" id="account"/>
<br />
<span id="span"></span>
<br />
<input type="submit" value="保存" />
</form>
</body>
</html>
浏览器对象BOM
window
它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
甚至 html dom 的 document 也是 window 对象的属性之一。
window.document.getElementById("header");
Window对象常用的属性：
window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度
window.parent获得父级窗口对象(父子级之间调用)
Window对象常用的方法
window.open(‘url’, ‘name’,’features’) - 打开新窗口
features:一个可选的字符串，声明了新窗口要显示的标准浏览器的特征。 width=100,height=100,top=100,left=100
Location对象
location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。
window.location 对象在编写时可不使用 window 这个前缀。
属性：
href设置或返回完整的 URL
方法：
assign(url)加载一个新的文档
reload()重新加载当前文档
replace(url) 可用一个新文档取代当前文档。
计时
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
/*
setTimeout(“函数”,”时间”)未来的某时执行代码
clearTimeout()取消setTimeout()
setInterval(“函数”,”时间”)每隔指定时间重复调用
clearInterval()取消setInterval()
*/
<script type="text/javascript">
function start(){
// setTimeout("test()",3000);
t=setInterval("test()",1000);
}
function test(){
console.log("傻逼");
}
function stop(){
// clearTimeout(t);
clearInterval(t);
}
</script>
</head>
<body>
<input type="button" value="开始" onclick="start()" />
<input type="button" value="停止" onclick="stop()" />
</body>
</html>
转载：https://blog.csdn.net/XiaoFanMi/article/details/115369197
查看评论