JavaScript前端开发案例教程第1章 JavaScript快速入门 教学PPT.pptVIP

1.3 JavaScript入门 函数——函数的用途 提出问题：代码量增多，维护困难、条理不清、阅读困难。 解决办法：代码应该模块化、组件化，才能更好的维护。 实现方式：常将一些常用的功能模块编写成函数，通过调用函数来完成任务。 举例说明：alert()就是一个函数。 1.3 JavaScript入门 函数——函数的返回值 函数执行后可返回一个表示执行结果的值，下面以prompt()函数为例进行演示。 var name = prompt(请输入你的名字：); 1.3 JavaScript入门 函数——函数的参数 函数支持传入一个或多个参数，多个参数可使用逗号分隔。 prompt(请输入你的名字：, 匿名); 1.3 JavaScript入门 函数——自定义函数 除直接调用JavaScript内置的函数，用户还可自己定义函数，用于封装代码。 // 定义函数 function sum(a, b) { var c = a + b; return c; } // 调用函数，输出结果：33 alert(sum(11, 22)); // 调用函数，输出结果：55 alert(sum(22, 33)); 示例 1.3 JavaScript入门 对象 （1） 对象的用途 （2） window对象 （3） document 对象 （4） String对象 1.3 JavaScript入门 对象——对象的用途 编写程序如同开一家公司。 在程序中划分对象，如同在公司中划分部门。 一个对象的成员由属性和方法组成。 属性就是一些变量，可以用来保存部门的名称、人数这些基本信息。 方法就是一些函数，可以用来保存部门的各种工作任务。 当最高领导指挥这些部门时，通过访问对象的属性来获取信息，通过调用对象的方法来完成工作。 1.3 JavaScript入门 对象——window对象 window对象是JavaScript与浏览器之间交互的主要接入点。 提供了用于JavaScript脚本控制浏览器的一些接口。 举例：弹出警告框、输入框，或者更改网页文档内容等效果。 window.console.log(test); window.document.write(test); window.console; window.document; window.alert(test); mpt(test); 示例 1.3 JavaScript入门 对象——document对象 document对象是window对象的属性之一，主要用于与网页文档进行交互。 body div id=testHello/div script var test = document.getElementById(test); alert(test.innerHTML /script /body 示例 1.3 JavaScript入门 对象——String对象 在代码中直接定义的字符串，就可以作为对象来使用。 String对象用于对字符串进行处理。 var str = apple; // 定义一个字符串 alert(str.length); // 获取字符串长度，输出结果：5 alert(str.toUpperCase()); // 获取转换大写后的结果，输出结果：APPLE alert(aa.toUpperCase()); // 直接调用字符串的成员方法，输出结果：AA 示例 1.3 JavaScript入门 对象——自定义对象 除了直接使用JavaScript中的内置对象，用户也可以自己创建一个自定义对象。 // 创建对象 var stu = {}; // 创建一个名称为stu的空对象 // 添加属性 = 小明; // 为stu对象添加name属性 stu.gender = 男; // 为stu对象添加gender属性 stu.age = 18; // 为stu对象添加age属性 // 访问属性 alert(); // 访问stu对象的name属性，输出结果：小明 示例 1.3 JavaScript入门 对象——自定义对象 除了直接使用JavaScript中的内置对象，用户也可以自己创建一个自定义对象。 // 添加方法 roduce = function () { return 我叫 + + ，今年 + this.age + 岁。; }; // 调用方法 alert(roduce()); // 输出结果：我叫小明，今年18岁。 示例 1.3 JavaScript入门 事件 概念 ：事件是指可以被JavaScript侦测到的交互行为。 举例：在网页中滑动、点击鼠标，滚动屏幕，敲击键盘等。 用处：当发生事件以后，可以利用JavaScript编程来执行