javascript高级编程

javascript高级
1、js的函数
（1）java里面
public void/int 方法名（参数列表）{
方法体和返回值
}


（2）在js里面的函数定义有三种
第一种：function 方法名（参数列表）{
方法体和返回值
}
注意一：js里面的参数不需要写var，直接写名称
注意二：返回值，根据实际需要，可以有可以无
function test(){ //无参
alert("adas");
}
//调用函数
test();


function test(a,b){ //有参
var sum = a+b;
return sum;
}
alert(test(2,3));

第二种：匿名函数，直接使用function（参数列表）{方法体和返回值}
var test1 = function(a,b){
return a+b;
}
//调用函数
alert（test1（3,4））；


第三种：动态函数 new Function(参数列表，方法体和返回值)；
var test2 = new Function("a,b","return a+b;")
alert(test2(5,6));


2、js里面的函数重载
（1）java里面的函数重载，函数名相同，参数列表不同，与返回值无关
（2）js里面是否存在函数的重载 不存在 可以通过arguments来模拟实现
//模拟重载的效果
function add(){
//js函数里面有一个内置的数组arguments，它是用来存储传进来的参数
var sum = 0;
for(var i = 0 ; i < arguments.length;i++){
sum += arguments[i];
}
return sum;
}
//调用函数
alert(add(1,2));
alert(add(2,3,4,5));


补充：同名函数会覆盖前面的，这是由于js的加载顺序导致的


3、js的事件
（1）事件：在HTML的元素里面可以触发事件调用js里面的函数执行
（2）HTML标签上如何使用事件
第一种：在标签里面加上事件属性，调用js方法



第二种：得到事件的标签，再使用属性
document.getElementById("buttonid").onclick = add1; //注意add1别写(),否则没点击就执行了;


第三种：得到事件标签，使用属性，用匿名函数创建执行动作
document.getElementById("buttonid2").onclick = function(){
alert("adsa");
}


4、js里面常用事件
（1）onload和onclick事件
onload HTML页面在加载的时候触发的事件，调用js方法

onclick 点击事件


（2）onfocus 和 onblur 事件
onfocus 获取焦点
function focus1() {
alert("调用onfocus方法");
}
onblur 失去焦点
function blur1() {
alert("调用onblur方法");
}


（3）onmouseover 和 onmouseout
onmouseover 鼠标移上
function over1(){
//alert("onmouseover")
document.getElementById("t1").value = "您好";
}
onmouseout 鼠标移开
function out1() {
//alert("onmouseout");
document.getElementById("t1").value="恭喜发财！";
}


（4）onkeypress事件 点击键盘上的某个键，调用方法
function key1(abc){ //使用onkeypress属性的时候需要传参数
//alert(abc.keyCode);
if(abc.keyCode==32){
alert("哈哈");
document.getElementById("t2").value="您好！！！";
}
}


5、js的dom对象
（1）dom :document object model 文档对象模型
使用dom里面的提供的对象里面的属性和方法，对标记型文档进行操作

要想使用dom对象对标记型文档进行操作，首先要解析标记型文档
html中包含：标签、属性、文本内容


（2）使用dom解析html
解析过程，根据html的层级结构在内存中分配一个树形结构
document对象-整个文档
element对象-标签
attribute对象-属性
text对象-文本
Node节点对象-是以上对象的父对象，在找不到想用的方法时就在这里面中找


（3）DHTML
很多技术的简称，包含：html css ECMAScript DOM


6、document对象
（1）document代表整个文档
（2）主要方法：
第一：write();
document.write("aa");
document.write("

---

");

第二：getElementById();


第三：getElementsByName():根据name值获取标签对象，返回对象数组
var inputs1 = document.getElementByName("name1");
//获取每一个input里面的value值
for(var i = 0 ;i < inputs1.length;i++){
var input = inputs1[i];
alert(input.value)
}
如果只有一个标签，使用getElementByName(),也是返回一个数组
可以直接用下标来获取属性值：inputs1[0].value


第四：getElementsByTagName():根据标签名获取标签对象，返回对象数组


7、innerHTML属性
（1）innerHTML属性不是dom里面的属性
（2）实现的功能
第一：获取标签里面的文本内容
document.
第二：向标签里面设置内容（可以写html代码）


8、动态表单


9、表单的提交方式
html中form标签的提交方式
第一种：使用

username:

第二种：使用

username:

document.getElementById("but").onclick = function(){
document.getElementById("form1").submit();
}
第三种：使用超链接提交
提交


10、表单的校验
（1）规范数据输入的格式
（2）如何校验
第一、使用submit提交表单，进行校验
使用 onsubmit 事件，写在form标签里面

function click(){
var username=document.getElementById("usernameid1").value;
if(username==""){
 alert("用户名不能为空")
 return false；
} else{
  return true;
}
}


第二、使用普通button的onclick 进行校验
function click(){
var username = document.getElementById("butid").value;
if(username == ""){
 alert("用户名不能为空");
} else{
document.getElementById("formid1").submit();
}
}


11、json简介
（1）javascript Object Notation，javascript对象表示法，json是数据交换格式，比xml更轻巧
json是js的原生的格式，通过js操作json不需要依赖其他的东西
（2）json的数据格式
第一种：json的对象的格式
var json1={"name":"zhangwuji","age":23,"addr":"beijing"};
类似于key-value 名称和值之间用“：”隔开
json数据的名称是字符串的类型，json数据的值string, number, object, array, true, false, null


第二种：jsonde 数组的格式
var json=[{},{},{}];


第三种：复杂格式
var json3={"class":[{"name":"dd","age":23},{"name":"dd","age":23}]}


12、js解析json
（1）js解析json的对象的数据格式
var json1={"name":"zhangwuji","age":23,"addr":"beijing"};
document.write(json1.name);
document.write(json1.age);


（2）js解析json数组
先遍历，再利用下标输出


13、json练习：人员信息的显示
（1）把多个人员的信息存到json的数据格式里面，通过js解析json的数据格式，把所有的人员显示到页面的表格里面。
（2）[{"name":"zhangsan","age":20,"addr":"beijing"},
{"name":"lisi","age":30,"addr":"tinajin"},
{"name":"wangwu","age":40,"addr":"nanjing"}]
（3）代码
//创建json的数据的格式，用于存储人员的信息
var persons = [{"name":"zhangsan","age":20,"addr":"beijing"},
{"name":"lisi","age":30,"addr":"tinajin"},
{"name":"wangwu","age":40,"addr":"nanjing"}];
//使用js解析persons格式，把这些人员信息显示到页面上
//遍历json的数组，得到每个人员的信息
//生成表格 ，把数据放到表格里面，把表格显示到页面上
function showData() {
var tab = "";
//添加表头
tab += "";
for(var i=0;i //得到数组里面的每个json对象
var person = persons[i];
//得到每个json对象里面值
var name = person.name;
var age = person.age;
var addr = person.addr;
//生成表格
tab += "";
}
tab += "

姓名	年龄	地址
"+name+"	"+age+"	"+addr+"

";
//alert(tab);
//把table表格的代码显示到页面上，使用innerHTML属性
//得到div标签
var div1 = document.getElementById("div1");
//向div里面写table代码
div1.innerHTML = tab;
}