JavaScript高级

最新推荐文章于 2024-07-31 10:51:11 发布
最新推荐文章于 2024-07-31 10:51:11 发布
阅读量363 收藏
点赞数
分类专栏： 前端 文章标签： js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dianziagen/article/details/79607691
版权

1、js的函数

（2）在js里面定义函数有三种方式

第一种：使用关键字 function 方法名称(参数列表) { 方法体和返回值 }

* 注意一：参数列表，不需要写类型（var），直接写参数名称

* 注意二：返回值，根据实际需要可以有也可以没有

* 代码

function test1() {

alert("123456");

}

//test1();

//实现两个数的相加

function add1(a,b) {

var sum = a+b;

return sum;

}

alert(add1(2,3));

第二种：匿名函数，使用关键字function(参数列表) { 方法体和返回值; }

//第二种定义方式

var test1 = function(a,b) {

return a+b;

}

alert(test1(3,4));

第三种：动态函数（方法体和返回值，包含参数列表都是通过参数传递进来的）

* 使用js里面的内置对象 new Function("参数列表","方法体和返回值")

//第三种定义方式

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）在java里面存在重载，方法名称相同，参数列表不同

（2）js里面是否存在函数的重载？

第一，在js不存在重载

第二，可以使用js函数里面arguments数组模拟重载的效果

（3）模拟重载的效果

* 在js里面有一个数组arguments，保存传递进来的参数，使用这个数组模拟重载的效果

//模拟重载的效果

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

function add1() {

//alert(arguments.length);

//遍历数组

/*for(var i=0;i<arguments.length;i++) {

alert(arguments[i]);

}*/

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

var sum = 0;

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

sum += arguments[i];

}

return sum;

}

console.log(add1(1,2));      

console.log(add1(1,2,3));    

console.log(add1(1,2,3,4));

3、js的事件

（1）什么是事件：在html的元素里面可以触发事件调用js里面的函数

（2）在html的标签上面如何使用事件

* 有三种方式

* 第一种：使用事件属性调用js方法

<input type="button" value="第一种方式" οnclick="add1();"/>

* 第二种：首先得到要绑定的标签，在使用事件的属性

//第二种方式绑定事件

document.getElementById("buttonid").onclick = add1;

 //没加就是直接打印提示.
//'加了()就是把函数的结果返回给调用者'

* 第三种：首先得到要绑定的标签，写js的代码

document.write('<input type="button" id="buttonid" value="第三种方式"/>');
document.getElementById("buttonid").onclick = function() {
alert("aaaaa");
};

4、js的常用的事件

（1）onload事件和onclick事件

* onload：html页面在加载时候触发事件，调用响应的js方法

**  <body οnlοad="test1();">

* onclick：鼠标点击事件

** <input type="text" οnclick="test2();"/>

（2）onfocus事件和onblur事件

* onfocus：获取焦点

* onblur：失去焦点

（3）onmouseover 鼠标被移到某元素之上

（4）onmouseout 鼠标从某元素移开

（5）onkeypress：点击键盘上面的某个键，调用方法

<input type="text" id="textid1" οnkeypress="key1(event);"/>

function key1(obj) {

//alert(obj.keyCode);

//如果点击键盘上面的回车键 ，调用方法  13

if(obj.keyCode==13) {

alert("key1");

}

}

5、js的dom对象

（1）什么dom：document  object  model：文档对象模型

* 文档：指的是标记型文档（html、xml）

* 对象：在对象里面有属性和方法

** 使用dom里面提供的对象里面的属性和方法，对标记型文档进行操作

* 要想使用dom对象标记型文档进行操作，首先需要解析标记型文档（html为例）

** html中包含 标签、属性、文本内容

（2）使用dom解析html

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

* document对象，代表整个文档

* element对象，代表标签

* 属性对象

* 文本对象

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

（3）DHTML的简介

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

* 包含的技术：

** html：封装数据

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

** ECMAScript：语句和语法

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

DHTML是Dynamic HTML的简称。DHTML不是一种技术、标准或规范，只是一种将目前已有的网页技术、语言标准整合运用，制作出能实时变换页面元素效果的网页设计概念。简单来说，三句话：

** DHTML 是一种使 HTML 页面具有动态特性的艺术

** DHTML 是一种创建动态和交互 WEB 站点的技术集

** 对大多数人来说，DHTML 意味着 HTML、CSS和 JavaScript 的组合

 ）

6、document对象

（1）document对象代表整个文档

（2）方法

第一个：write()，向页面输出内容，可以输出html代码

* document.write("aa");

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

第二个：getElementById(): 获取标签对象，通过标签的id值进行获取

* var input1 = document.getElementById("textid");

document.write(input1.value);

第三个：getElementsByName(): 根据标签里面name属性的值得到标签对象，返回数组

* //getElementsByName()

var inputs1 = document.getElementsByName("name1");

//alert(inputs1.length);

//获取每个input里面的value值

for(var i=0;i<inputs1.length;i++) {

var input1 = inputs1[i];

//得到value值

alert(input1.value);

}

* 如果只有一个标签，使用getElementsByName返回的也是一个数组，不需要遍历，直接使用数组的下标获取值

* var inputs2 = document.getElementsByName("name2");

//alert(inputs2.length);

alert(inputs2[0].value);

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

* var inputs3 = document.getElementsByTagName("input");

//alert(inputs3.length);

//遍历数组

for(var i=0;i<inputs3.length;i++) {

var input3 = inputs3[i];

//得到标签的value

alert(input3.value);

}

* 如果只有一个标签，使用getElementsByTagName返回的也是一个数组，不需要遍历，直接使用数组的下标获取值

var arr = document.getElementsByTagName("input");

alert(arr[0].value);

7、innerHTML属性

（1）innerHTML属性不是dom里面属性

第一，获取标签里面的文本内容

** var span1 = document.getElementById("spanid");

console.log(span1.innerHTML) //哈哈呵呵

document.write('<span id="spanid">哈哈呵呵</span>');
var span1 = document.getElementById("spanid");
console.log(span1.innerHTML) //哈哈呵呵

第二，向标签里面设置内容（可以写html代码）

** var div1 = document.getElementById("div1");

div1.innerHTML = "<table border='1'><tr><td>aaa</td><td>bbb</td></tr></table>";

//注意不用按回车生成表格

//通过方法触发设置写html代码

document.write('<div id="div1">这是表格生成的位置</div> <input type="button" value="add" onclick="add1();"/>');
var span1 = document.getElementById("spanid");
function add1() {
var div1 = document.getElementById("div1");
//'注意不用按回车生成表格'
div1.innerHTML = "<table border='1'><tr><td>aaa</td><td>bbb</td></tr></table>";
}
add1()



<div id="div1"></div>
<input type="button" value="add" οnclick="add1();"/>
 </body>
<script type="text/javascript">
//获取标签里面的文本内容
var span1 = document.getElementById("spanid");
//alert(span1.innerHTML);
function add1() {
var div1 = document.getElementById("div1");
//'注意不用按回车生成表格'
div1.innerHTML = "<table border='1'><tr><td>aaa</td><td>bbb</td></tr></table>";
}
</script>

</html>

*效果

8、练习：动态生成表格

（1）实现的步骤

* 首先创建页面，在页面中有两个普通输入项和按钮（有事件）

* 点击生成按钮，生成对应的表格

** 首先得到输入的行和列

** 根据行和列生成表格

*** 循环行 <tr>

*** 在行里面循环单元格 <td>

（2）代码

//实现生成表格

function add1() {

//得到输入的行和列

var hang = document.getElementById("hid").value;

var lie = document.getElementById("lid").value;

//alert(hang+" :: "+lie);

var tab = "<table border='1' cellpadding='10'>";

//生成行

for(var i=1;i<=hang;i++) {

tab += "<tr>";

//生成单元格

for(var j=1;j<=lie;j++) {

tab += "<td>aaaaa</td>";

}

tab += "</tr>";

}

tab += "</table>";

//alert(tab);

//获取div标签

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

//向div里面写html代码

div1.innerHTML = tab;

}

效果：

9、表单的提交

 //所有的表单标签有name属性.
//所以的标签有id属性. 

（1）在html中写form标签，提交方式

提交表单有三种方式

第一种方式：在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"/>

*代码

  <body>
<!-- 表单的提交方式二 -->
<form id="form01" method="get">
username: <input type="text" name="username"/>
<br/>
password: <input type="password" name="password"/>
<br/>
<input type="button" value="提交" onclick="form01();"/>
</form>
 </body>

//使用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>

10、表单校验

 默认提交为true

（1）规范数据的输入的格式

（2）如何进行表单的校验

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

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

<form method="get" οnsubmit="return checkForm();">

* 如何return返回的值true可以提交表单，如果返回false不会提交表单

= 代码

//submit表单的校验

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();

}

}

//支持任何编程语言!!!

11、json的简介

（1）json :JavaScript Object Natation: javaScript对象表示法.

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

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

（2）json两种数据格式

就是相当于Map键值对 的集合

* 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的这两种格式组成更加复杂json的格式

* 复杂的格式 {"name":[{"name":"zhangsan","addr":"beijing"},{"name":"lisi","addr":"tianjin"}]}

12、js解析json

（1）js解析json的对象的数据格式

* 通过json对象数据格式里面的name的名称得到name对应的值

* 代码

//js解析json的对象格式的数据

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

//对json的对象格式数据进行操作

document.write(json1.username);

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

document.write(json1.age);

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

document.write(json1.addr);

（2）js解析json的数组的数据格式

* 根据数组的下标得到json对象，解析json对象，根据数据的名称得到值

* 遍历json数组，得到json数组里面每个json对象，解析每个json对象，根据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(var i=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/>");

}

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 = "<table border='1' cellpadding='10'>";

//添加表头

tab += "<tr><th>姓名</th><th>年龄</th><th>地址</th></tr>";

for(var i=0;i<persons.length;i++) {

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

var person = persons[i];

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

var name = person.name;

var age = person.age;

var addr = person.addr;

//生成表格

tab += "<tr><td>"+name+"</td><td>"+age+"</td><td>"+addr+"</td></tr>";

}

tab += "</table>";

//alert(tab);

//把table表格的代码显示到页面上，使用innerHTML属性

//得到div标签

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

//向div里面写table代码

div1.innerHTML = tab;

}

效果：

。。。

王竹根
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript 高级（进阶）
m0_73198722的博客
10-29 797
JS高级
javascript高级
weixin_34408624的博客
01-19 103
数组及操作方法 数组就是一组数据的集合，javascript中，数组里面的数据可以是不同类型的 #定义数组的方法 //对象的实例创建 var aList = new Array(1,2,3); //直接量创建（常用） var aList2 = [1,2,3,"asd"]; # 操作数据中数据的方法 var aList = [1,2,3,4] 1.获取数组的长度：aList.length ...
JavaScript 高级特性：深度解析
最新发布
weixin_43948538的博客
07-31 395
JavaScript 高级特性
JavaScript高级程序设计.pdf
07-14
"JavaScript高级程序设计" JavaScript是一种高级的编程语言，它的出现改变了Web开发的格局。 JavaScript的主要目的是处理一些输入的有效性验证，而在此之前，这个工作是留给诸如Perl之类的服务器端语言来完成的。...
javascript高级程序设计
06-02
"JavaScript高级程序设计"是一本深入探讨JavaScript编程语言的书籍，旨在帮助读者掌握JS的各个方面，适合自学者进行系统学习。以下是对书中的主要知识点的详细阐述： 1. JavaScript简介： JavaScript是一种广泛...
Javascript 高级程序设计（第3版）超清中文PDF
10-20
《JavaScript高级程序设计》（第3版）是一本深入探讨该语言精髓的权威书籍，它为读者提供了全面且深入的JavaScript知识，包括语言核心、DOM操作、BOM处理、事件处理以及面向对象编程等多个方面。 在书中，作者详细...
JavaScript高级篇视频教程
06-28
"JavaScript高级篇视频教程"旨在帮助已经掌握了JavaScript基础知识的学习者进一步提升技能，深入理解其高级特性，包括面向对象编程、异步处理、模块化、性能优化等多个方面。 在JavaScript的高级篇中，首先会讲解...
javascript 高级
进击的程序猿
05-11 713
javascript 高级 js 基础补充 typeof 可以查看一个值的类型 typeof 简单类型：返回结果简单类型 typeof null: 并不是 null 而是 object typeof 复杂类型： 返回的都是 object typeof 函数： 返回的 function （在 js 中函数是一等公民） console.log(typeof 11) // 输出number //...
Javascript高级
AlanRedsheep
01-27 322
JavaScript高级 JavaScript输出 window.alert()弹出警告框 &lt;script&gt; window.alert("Warning！"); &lt;/script&gt; document.write()将内容写到HTML文档中 请使用 document.write() 仅仅向文档输出写内容。如果在文档已完成加载后执行 document.wri...
JavaScript进阶知识点总结（学习笔记）
Etui۹(･༥･´)و的博客
05-30 705
目录 一、基础总结深入 1. 数据类型的分类和判断 2.数据,变量,内存的理解 3.对象的理解和使用 4. 函数的理解和使用 二、函数高级特性总结 1.原型与原型链 2. 执行上下文与执行上下文栈 3.作用域与作用域链 4. 闭包 5.内存溢出与内存泄露 三、对象高级特性 1.对象的创建模式 2.继承模式 四、线程机制与事件机制 1.线程与进程 2.浏览器内核模块组成 3. js线程 4. 定时器问题: 5. 事件处理机制(图) 6. H5WebWorker...
JavaScript高级编程指南
"这是一本全面介绍JavaScript高级技术的教程，专为前端开发人员设计，涵盖了从基础到进阶的JavaScript知识，包括语言核心、DOM操作、对象与数据结构、事件处理等多个方面。" 在《JavaScript高级教程》中，作者首先...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值