这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
JavaScript 中级笔记
一,回顾 首先先来回顾下 DOM 和事件。 1,DOM DOM 在 JavaScript 中是应用最广泛的,大部分 web 开发的编程语言都提供了相关的实现。给了开发者一个统一的接口。 看下面的例子:
[Ctrl+A 全选 注:
- <html>
- <head>
- <title>
- demo
- </title>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <script type="text/javascript">
- /*
- 示例操作DOM元素
- */
- window.onload = function() {
- //给Dom元素添加颜色
- var li = document.getElementsByTagName("li");
- for (var i = 0; i < li.length; i++) {
- li[i].style.color = "red";
- }
- }
- </script>
- </head>
- <body>
- <ul>
- <li>
- 李老师-英语
- </li>
- <li>
- 张老师-数学
- </li>
- <li>
- 刘老师-物理
- </li>
- </ul>
- </body>
- </html>
如需引入外部 Js 需刷新才能执行
]等待页面所有内容加载完毕后,通过 getElementsByTagName() 方法获取页面中的 li 元素,然后循环改变 li 元素颜色为红色。 再看第二个 DOM 例子,例子将把第二个 li 元素从页面中删除。
[Ctrl+A 全选 注:
- <html>
- <head>
- <title>
- demo
- </title>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <script type="text/javascript">
- /*
- 示例操作DOM元素
- */
- window.onload = function() {
- //给Dom元素添加颜色
- var li = document.getElementsByTagName("li");
- for (var i = 0; i < li.length; i++) {
- li[i].style.color = "red";
- }
- //删除第二个li元素
- var ul = document.getElementsByTagName("ul")[0]; //索引从0开始
- ul.removeChild(li[1]); //索引从0开始
- }
- </script>
- </head>
- <body>
- <ul>
- <li>
- 李老师-英语
- </li>
- <li>
- 张老师-数学
- </li>
- <li>
- 刘老师-物理
- </li>
- </ul>
- </body>
- </html>
如需引入外部 Js 需刷新才能执行
]现获取到 li 元素的父节点 ul 元素,然后使用 removeChild() 方法删除 ul 元素下 指定的 li 元素。 当然也可以直接使用 parentNode 来直接获取 li 元素的父节点。代码如下:
2,事件
- window.onload = function(){
- //给Dom元素添加颜色
- var li = document.getElementsByTagName("li");
- for(var i=0;i<li.length;i++){
- li[i].style.color = "red";
- }
- //删除第二个li元素
- //var ul = document.getElementsByTagName("ul")[0]; //索引从0开始
- //ul.removeChild( li[1] ); //索引从0开始
- li[1].parentNode.removeChild( li[1] ); //索引从0开始,直接使用parentNode来获取li元素的父节点
- }
事件是黏合应用程序中所有用户交互的胶水。DOM 和事件的是 JavaScript 中的黄金搭档(呵呵,来句广告词),它们决定着现代 Web 应用程序形态的根本所在。 看下面的例子:
[Ctrl+A 全选 注:
- <html>
- <head>
- <title>
- demo
- </title>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <script type="text/javascript">
- /*
- 示例操作DOM元素
- */
- window.onload = function() {
- //给Dom元素添加颜色
- var li = document.getElementsByTagName("li");
- for (var i = 0; i < li.length; i++) {
- li[i].style.color = "red";
- li[i].onmouseover = function() {
- this.style.color = "blue";
- }
- li[i].onmouseout = function() {
- this.style.color = "red";
- }
- }
- }
- </script>
- </head>
- <body>
- <ul>
- <li>
- 李老师-英语
- </li>
- <li>
- 张老师-数学
- </li>
- <li>
- 刘老师-物理
- </li>
- </ul>
- </body>
- </html>
如需引入外部 Js 需刷新才能执行
]本例中,获取的 li 元素后,然后循环给元素添加事件,添加了 onmouseover 和 onmouseout 事件。当滑入时,改变颜色,滑出时,恢复颜色。 事件是复杂多变的,上例是一个最简单的例子,所以基本上没遇到问题。在以后,我们将遇到 比如 事件冒泡,事件传递 ,取消事件等问题。 3,DOM 和事件 在 DOM 和事件交互的基础上产生了 DHTML,它的实质就是 JavaScript 事件和 DOM 元素上 CSS 属性之间的交互。DHTML 存在的意思就是组合这两个技术,然后做它的事情。
二,简单的面向对象开发我们先来感受一下 JavaScript 面向对象是怎么一个写法。下面代码展示了学校中的课程名和老师的信息。
[Ctrl+A 全选 注:
- <script type="text/javascript">
- /*
- 示例用一个对象组合表示学校中的课程
- 'Lecture'类
- 用name和teacher作为参数
- */
- function Lecture(name,teacher){
- this.name=name;
- this.teacher=teacher;
- }
- //'Lecture'类的一个方法,用于生成一条信息
- Lecture.prototype.display=function(){
- return this.name + " 是教 "+this.teacher +" 的。" ;
- }
- //下面用new来构造一个新的函数,然后调用display方法
- var L = new Lecture("李老师","英语");
- var L_msg = L.display();
- alert(L_msg);
- </script>
如需引入外部 Js 需刷新才能执行
]最终结果会输出 "李老师 是教 英语 的。" 在此例子的基础上,我们再定义个函数,用来输出所有的课程信息。代码如下所示:
[Ctrl+A 全选 注:
- <script type="text/javascript">
- /*
- 示例用一个对象组合表示学校中的课程
- 'Lecture'类
- 用name和teacher作为参数
- */
- function Lecture(name,teacher){
- this.name=name;
- this.teacher=teacher;
- }
- //'Lecture'类的一个方法,用于生成一条信息
- Lecture.prototype.display=function(){
- return this.name + " 是教 "+this.teacher +" 的。" ;
- }
- //下面用new来构造一个新的函数,然后调用display方法
- var L = new Lecture("李老师","英语");
- var L_msg = L.display();
- //alert(L_msg);
- //新定义一个'AllLecture'类
- //用'lec'作为参数,lec是一个数组
- function AllLecture( lec ){
- this.lec = lec;
- }
- //'AllLecture'类的一个方法,用于生成所有的课程信息
- //需要循环输出'lec'
- AllLecture.prototype.display=function(){
- var str = "";
- for(var i=0;i<this.lec.length;i++){
- str += this.lec[i] + "\n";
- }
- return str;
- }
- //下面使用new来够造一个新的函数,用于生成所有的信息
- //函数的参数是数组。
- //使用'Lecture'类来生成数组的值。
- var B = new AllLecture( [ new Lecture("李老师","英语").display() , new Lecture("张老师","数学").display() , new Lecture("刘老师","物理").display() ] );
- var B_str = B.display();
- alert(B_str);
- </script>
如需引入外部 Js 需刷新才能执行
]最终结果会输出:
本例中, 数组的值都调用了 display() 方法。 改进如下: 在
- AllLecture.prototype.display=function(){
- var str = "";
- for(var i=0;i<this.lec.length;i++){
- str += this.lec[i] + "\n";
- }
- return str;
- }
中的 this.lec[i] 处,统一调用 display() 方法。然后去掉数组的值调用 display()。修改后的代码如下:
[Ctrl+A 全选 注:
- <script type="text/javascript">
- /*
- 示例用一个对象组合表示学校中的课程
- 'Lecture'类
- 用name和teacher作为参数
- */
- function Lecture(name,teacher){
- this.name=name;
- this.teacher=teacher;
- }
- //'Lecture'类的一个方法,用于生成一条信息
- Lecture.prototype.display=function(){
- return this.name + " 是教 "+this.teacher +" 的。" ;
- }
- //下面用new来构造一个新的函数,然后调用display方法
- var L = new Lecture("李老师","英语");
- var L_msg = L.display();
- //alert(L_msg);
- //新定义一个'AllLecture'类
- //用'lec'作为参数,lec是一个数组
- function AllLecture( lec ){
- this.lec = lec;
- }
- //'AllLecture'类的一个方法,用于生成所有的课程信息
- //需要循环输出'lec'
- AllLecture.prototype.display=function(){
- var str = "";
- for(var i=0;i<this.lec.length;i++){
- //str += this.lec[i] + "\n";
- str += this.lec[i].display() + "\n"; //把display()放到这里调用
- }
- return str;
- }
- //下面使用new来够造一个新的函数,用于生成所有的信息
- //函数的参数是数组。
- //使用'Lecture'类来生成数组的值。
- //var B = new AllLecture( [ new Lecture("李老师","英语").display() , new Lecture("张老师","数学").display() , new Lecture("刘老师","物理").display() ] );
- var B = new AllLecture( [ new Lecture("李老师","英语") , new Lecture("张老师","数学") , new Lecture("刘老师","物理") ] );
- var B_str = B.display();
- alert(B_str);
- </script>
如需引入外部 Js 需刷新才能执行
]同样也可以输出跟上例一样的结果。 这是一个简单的面向对象开发的例子,随着 JavaScript 逐渐被程序员所接受,设计良好的面向对象代码也日益普及。在后面的笔记中,你将会看到更多的面向对象程序代码。
三,小结本章回顾了 DOM 和事件,然后通过例子简单的讲解了面向对象的开发。
来源: http://www.phperz.com/article/17/0427/286668.html