使用JavaScript
使用方法:内部标签引入或者外部链接引入
<script>...</script>
<script src="link"></script>
编写JS的基本语法
数据类型:数字(tip:NaN表示不是一个数),字符串,布尔值,null,undefine
运算符:逻辑运算,比较运算
区分双等和三等:
双等:值一样就返回true
三等:类型一样和值一样才返回true
数组,Map,Set:
'use strict'
var map = new Map([['a',100],['b',80]]);
var name = map.get('a');
map.set('admin',123456);
var set = new Set([3,11,2,2,2]);
set.add(76);
/*利用iterator(for (var x of y))遍历数组,map,set*/
/*利用(for (var x in y))遍历数组*/
var arr= [3,4.5];
for(var x of arr){
console.log(x);
}
for(let x of map){
console.log(x);
}
for(let x of set){
console.log(x);
}
类的定义:
var person = {
name :"aaa",
age :2,
score : 1
}
函数方法定义:
方法一:
var ads = function(x){
//对传入的参数进行打印
for(var i = 0;i < arguments.length;i++){
console.log(arguments[i]);
}
if(typeof x !== 'number'){
throw 'not a number';
}
if(x >= 0)
return x;
else
return -x;
}
方法二:
function getage(){
var now = new Date().getFullYear();
return now - this.brith;
}
var sss = {
name:sss,
brith:13,
age:getage
}
getage.apply(sss,[]);//调用getage方法,并且将sss作为参数传入
tips:JavaScript中的函数可以传入任何参数,但是最好用arguments和rest对参数进行异常判断.
argument:可以接收参数并且将其保存在数组中
rest:可以接收除函数所需要的参数以外的参数,保存在数组中
BOM
Date的使用:
通过date得到时间:
- 定义一个date类对象
- 通过对象调用方法的到时间戳
- 将时间戳当参数传入date类创建一个时间对象
**什么是BOM:**操控浏览器的API
BOM(Browser Object Model)即浏览器对象模型。
BOM提供了独立于内容 而与浏览器窗口进行交互的对象;
由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是 window;
BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性;
BOM缺乏标准,JavaScript语法的标准化组织是ECMA,DOM的标准化组织是W3C,BOM最初是Netscape浏览器标准的一部分。
window对象
window对象是js中的顶级对象,所有定义在全局作用域中的变量、函数都会变成window对象的属性和方法,在调用的时候可以省略window。
location对象
表示当前页面的URL信息
- href属性:当前URL内容
- host属性:主机名
- protocol属性:协议
- reload()方法:刷新页面
history对象
浏览器的历史记录,JavaScript的history对象记录了用户曾经浏览过的页面,并可以实现浏览器前进与后退相似的导航功能.
由于安全的原因,不能显示history对象中的历史页面URL - history.go() 函数 – 前进或后退指定的页面数
- history.back() 函数 – 后退一页
- history.forward() 函数 – 前进一页
- history.length 属性 – history对象中缓存了多少个URL
screen对象
可以获取可计算的屏幕
navigator对象
封装了浏览器的信息,可修改 - appName属性 浏览器名称
- appVersion属性 浏览器版本
- platform 操作系统
- userAgent 用户代理信息,通过该属性可以获取浏览器及操作系统信息
JavaScript中封装的一些事件:
onload事件:页面内容加载完成(DOM结构,图片…)
onscroll事件:拖动浏览器的滚动条触发此事件。
onresize事件:浏览器窗口缩放所触发的事件。
open() 和 close() 方法:打开一个页面/关闭一个页面
alert() prompt() confirm()浏览器事件
定时器
setInterval(函数名称,时间);间隔定时器(反复调用)
clearInterval( 定时器的返回值 ); 停止定时器
setTimeout(函数名称,时间); 延时定时器
clearTimeout( 定时器的返回值 ); 停止定时器
DOM
什么是DOM:
DOM是”Document Object Model”的首字母缩写,即文档对象模型。用来描绘一 个层次化的节点树,允许开发人员添加、移除和修改页面的某一部分。(JS —>DOM —>HTML)
document对象:操控文档的API
使用document作为访问HTML文档的入口,管理框架的frames对象等.
document是整个文档树DOM的根结点
DOM的基本操作
一.得到节点:document.getElementById/Name/ClassName/TagName(’’)
二.更新节点:通过对节点本身方法的操作可以实现更新,修改节点
三.删除节点:通过父节点的adoptNode(A)方法可以移除子节点A
四.添加节点:通过父节点的appendChild(A)方法可以添加子节点A
五.创建节点:document.createElement(‘x’),创建x类型的节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1 id="h1">aaa</h1>
<p id="p1">p1</p>
<p id="p2">p2</p>
<script>
//获得一个Id为p1的结点,赋给变量p1
var p1 = document.getElementById('p1');
//获得一个Id为h1的结点,赋给变量h1
var h1 = document.getElementById('h1');
//把h1节点放到p1下
p1.appendChild(h1);
/**
创建一个p标签节点,并赋给newp
给newp赋值:id='newp',innerText='newppppp'
并且将此节点放到p1下
**/
var newp = document.createElement('p');
newp.id = 'newp';
newp.innerText = 'newppppp';
p1.appendChild(newp);
/**
创建一个style样式(CSS)节点,并赋给style
给style赋值:innerText='body{background-color:#ff0000}'
给style设置属性:setAttribute('type','text/css')
并且将此节点放到p1下
**/
var style = document.createElement('style');
style.setAttribute('type','text/css');
style.innerHTML = 'body{background-color:#ff0000}'
//在document节点下添加style节点
document.getElementsByTagName('head')[0].appendChild(style);
</script>
</body>
</html>
DOM操作表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/md5.js">
//有问题??????
</script>
</head>
<body>
<form action="#" method="post">
<p>
<span>username:</span><input type="text" id="username" name="username">
</p>
<p>
<span>password:</span><input type="text" id="password" name="password">
</p>
<button type="button" onclick="submit()" >submit</button>
</form>
<script>
function submit(){
var uname = document.getElementById('username');
var pwd = document.getElementById('password');
console.log(uname.value);
pwd.value = md5(pwd.value);//对获得到的密码进行加密传输
console.log(pwd.value);
return false;
}
</script>
</body>
</html>