Day3JavaScript

最新推荐文章于 2024-07-27 18:37:51 发布

原创最新推荐文章于 2024-07-27 18:37:51 发布 · 410 阅读

0 ·

CC 4.0 BY-SA版权

本文深入讲解JavaScript中的函数定义与调用、事件处理、DOM操作、表单验证及JSON数据解析等核心概念，帮助读者理解并掌握前端开发的基础技能。

Day3

JavaScript

1. js的函数

定义方式:

方式	原理	代码	注意
第一种	使用关键字 function 方法名称(参数列表) { 方法体和返回值 }	function test1() { alert("123456"); } test1();	参数列表，不需要写类型（var），直接写参数名称返回值，根据实际需要可以有也可以没有
第二种	匿名函数，使用关键字function(参数列表) { 方法体和返回值; }	Var test1 = function(a,b) { return a+b; } alert(test1(3,4));
第三种	动态函数（方法体和返回值，包含参数列表都是通过参数传递进来的）	var param = "a,b"; var method = "var sum;sum=a+b;return sum;"; var test2 = new Function(param,method); alert(test2(5,6));

2. js的函数重载

(1) 在js不存在重载

(2) 可以使用js函数里面arguments数组模拟重载的效果

(3) 模拟重载的效果:

在js函数里面有一个数组arguments，保存传递进来的参数的

代码:

function add1() {

//模拟重载的效果（有几个参数，实现这几个参数的相加）

var sum = 0;

for(vari=0;i<arguments.length;i++) {

sum+= arguments[i];

}

return sum;

}

alert(add1(1,2));

alert(add1(1,2,3));

alert(add1(1,2,3,4));

3. js的事件

(1) 在html的元素里面可以触发事件调用js里面的函数叫js的事件

(2) 在html的标签上面使用事件:

方式	原理	代码
第一种	使用事件属性调用js方法	<input type="button" value="第一种方式" onclick="add1();"/>
第二种	首先得到要绑定的标签，在使用事件的属性	document.getElementById("buttonid").onclick = add1;
第三种	首先得到要绑定的标签，写js的代码	document.getElementById("buttonid1").onclick = function() { alert("aaaaa"); };

4. js的常用的事件

事件	用法	代码
onload	html页面在加载时候触发事件，调用响应的js方法	<body onload="test1();">
onclick	鼠标点击事件	<input type="text" onclick="test2();"/>
onfocus	获取焦点
onblur	失去焦点
onmouseover	鼠标被移到某元素之上
onmouseout	鼠标从某元素移开
onkeypress	击键盘上面的某个键，调用方法	<input type="text" id="textid1" onkeypress="key1(event);"/> function key1(obj) { //如果点击键盘上面的回车键，调用方法 13 if(obj.keyCode==13) { alert("key1"); } }

5. js的dom对象

(1) dom：document object model：文档对象模型

(2) 使用dom解析html

解析过程：根据html的层级结构在内存中分配一个树形结构

document对象，代表整个文档

element对象，代表标签

attribute属性对象

text文本对象

Node节点对象，是这些对象的父对象，在找不到想要使用的方法，到Node里面找

(3) DHTML的简介

不是一种技术，是很多技术的简称。

包含:

html：封装数据

css：使用属性和属性值修改数据的样式

ECMAScript：语句和语法

DOM：对标记型文档进行操作

6. document对象

(1) document对象代表整个文档

(2) 方法:

方法	用途	代码
write()	向页面输出内容，可以输出html代码	document.write("<hr/>") document.write("aa")
getElementById()	获取标签对象，通过标签的id值进行获取	document.getElementById("textid").value
getElementsByName()	根据标签里面name属性的值得到标签对象，返回数组
getElementsByTagName()	根据标签的名称获取标签对象，返回数组

7. innerHTML属性

(1) innerHTML属性不是dom里面属性

(2) 实现的功能:

a) 获取标签里面的文本内容

b) 向标签里面设置内容（可以写html代码）

8. 表单的提交

方式	代码
在form标签里面，写提交按钮 <input type="submit"/>	<form method="get"> username: <input type="text" name="username"/> <br/> password: <input type="password" name="password"/> <br/> <input type="submit" value="提交"/> </form>
在form标签里面，写普通按钮 <input type="button"/>	function form01() { //得到form标签 var form01 = document.getElementById("form01"); //提交form表单 form01.submit(); }
使用超链接提交数据	<a href="要链接的地址?参数名称1=参数的值1&参数名称2=参数的值2">超链接</a> <a href="15-表单的提交方式二.html?username=ccc&password=123456">超链接提交数据</a>

9. 表单校验

输入的格式

原理

代码

使用submit进行表单提交，进行表单校验

使用事件 onsubmit事件，写在form标签里面

function checkForm() {

//判断用户名不能为空

var username = document.getElementById("usernameid").value;

var password = document.getElementById("passwordid").value;

if(username == "") {

alert("用户名不能为空");

return false;

}

if(password == "") {

alert("密码不能为空");

return false;

}

return true;

}

使用button进行表单校验

使用button提交表单，进行校验

function form01() {

//得到输入项里面的值，判断值是否为空，如果为空不进行提交

var username = document.getElementById("usernameid").value;

var password = document.getElementById("passwordid").value;

//如果值为空，不进行提交

if(username == "") {

alert("用户名不能为空");

} else if(password == "") {

alert("密码不能为空");

} else {

//得到form标签

var form01 = document.getElementById("form01");

form01.submit();

}

10. json的简介

(1) JavaScript Object Notation，JavaScript 对象表示法。json是数据的交换格式，比xml更加轻巧。

json是js的原生的-格式，通过js操作json不需要依赖其他东西，直接对json格式进行操作。

(2) json数据格式

第一种：json的对象的格式

写法 {json数据的名称1:json数据的值1,json数据的名称2:json数据的值2.....}

类似于key-value形式

名称和值之间使用冒号隔开，多个值之间使用逗号隔开

json数据的名称是字符串的类型，json数据的值 string,number, object, array, true, false, null

具体数据的格式{"name":"zhangsan","age":20,"addr":"nanjing"}

第二种：json的数组的格式

写法 [json对象1,json对象2........]

在数组里面有多个json对象，多个json对象之间使用逗号进行隔开

具体数据的格式[{"name":"lucy","age":20},{"name":"mary","age":30}]

(3) 两种格式组成更加复杂json的格式

{"name":[{"name":"zhangsan","addr":"beijing"},{"name":"lisi","addr":"tianjin"}]}

11. js解析json

(1) js解析json的对象的数据格式

代码:

var json1 ={"username":"lucy","age":20,"addr":"nanjing"};

document.write(json1.username);

document.write(json1.age);

document.write(json1.addr);

(2) js解析json的数组的数据格式

代码:

//js解析json数组格式的数据

var json2=[{"username":"zhangsan","age":20,"addr":"beijing"},

{"username":"lisi","age":30,"addr":"tianjin"},

{"username":"wangnwu","age":40,"addr":"nanjing"}];

//js操作数组，遍历数组，根据数组的下标得到值

//遍历json数组格式，得到的是一个json对象，解析json对象（根据名称得到值）

//得到第二个json对象里面的age的值数组下标从0开始的

document.write(json2[1].age);

//得到第一个json对象里面的addr的值

document.write("<br/>");

document.write(json2[0].addr);

//遍历json数组的格式

document.write("<hr/>");

for(vari=0;i<json2.length;i++) {

//得到数组里面的每一个json对象

var person = json2[i];

//得到每个对象里面的值

var username = person.username;

var age = person.age;

var addr = person.addr;

document.write("username:"+username+"; age:"+age+" ; addr:"+addr);

document.write("<br/>");

}