javascript复习

最新推荐文章于 2024-05-23 16:08:37 发布
最新推荐文章于 2024-05-23 16:08:37 发布
阅读量542 收藏
点赞数
文章标签： javascript function json button layer prototype

1.       JavaScript数据类准换

转换为Number：根据parseInt()来转化。

转换String：任何类型加字符串即为字符串。

转换Boolean：true,false,所有非0数字为true,否则为false

Undefind  / null 直接转换为false

 

2.       JavaScript数据专递

 基本数据类型采用值传递：

 

3.       JavaScript语法  函数与事件

函数和事件通常是一种绑定关系，通过事件调用函数。如果绑定多个函数，中间用分号隔开。

l       常用事件

l       Onload

l       OnClick

l       MouseOver 鼠标移动到指定目标上

l       MouseOut 鼠标离开指定目标

l       Focus 当元素获得焦点

l       Blur 当元素失去焦点

l       Change 1.输入内容发生改变，2.select选项发生改变

l       Onkeyup 键盘案件弹起

l       常用事件

l       Onload

l       OnClick

l       MouseOver 鼠标移动到指定目标上

l       MouseOut 鼠标离开指定目标

l       Focus 当元素获得焦点

l       Blur 当元素失去焦点

l       Change 1.输入内容发生改变，2.select选项发生改变

l       Onkeyup 键盘案件弹起

 

4.       JavaScript面向对象编程

JavaScript定义属性和方法

方法一：

function Test(){

      //javascript定义属性

       Test.prototype.name="zsw";

       //javascript定义方法

       Test.prototype.say = function(){

              alert(this.name + " love hy!");

       };

}

 

function a(){

       new Test().say(); //javascript调用方法

}

 

  方法二：

function boy(){

       //js通过this定义属性

       this.name = "zsw";

       this.age = 21;

       //js通过this定义方法

       this.say = function(){

              alert(this.name + " love hy!");

       }

};

 

function b(){

       var _boy = new boy();

       alert(_boy.name);

       alert(_boy.age+"");

       _boy.say();

};

总结:

定义属性，方法

1.使用prototype创建

2.使用this创建

 

 

5.       Json的方式创建对象

       var json = {name:'zsw',age:20};

       alert(json.name);

 

 

function showName(o){

       alert(o.name);

       alert(o["name"]);

}

 

function showObject(){

       var json = "{name:'zsw',age:20}";

      

      

       showName(eval("("+json+")"));

}

 

Json对象是可以传递的

原理：JSON可以在字符串和对象间转换。

可以通过JavaScript的eval()方法将字符串转换成对象。

 

6．动态添加属性和方法

function test1(){};

function runTest1(){

       var t1 = new test1();

       t1.name = "zsw";

       t1.age = 21;

       t1.say = function(){

              alert("Hello World!!!");

       };

       alert(t1.name);

       t1.say(); 

};

 

7.在内置对象添加属性和方法

 

 

8.Javascript面向对象中的继承

function Person(){

       Person.prototype.name = "zsw";

       Person.prototype.age = 21;

       Person.prototype.say = function(){

              alert("Javascript 面向对象的继承");

       };

}

 

function Student(){

       Student.prototype.schoolName = "bdqn";

}

 

function TestStu(){

       Student.prototype = new Person();

       var s = new Student();

       alert(s.schoolName);

       s.say();

}

 

9．定义私有属性

function Person(){

       Person.prototype.name = "zsw";

       Person.prototype.age = 21;

       Person.prototype.say = function(){

              alert("Javascript 面向对象的继承");

       };

}

 

function Student(){

       Student.prototype.schoolName = "bdqn";

       //定义私有属性

       var gfName = "hy";

}

 

function TestStu(){

       Student.prototype = new Person();

       var s = new Student();

       alert(s.schoolName);

       s.say();

      

       alert(s.gfName); //不可见，因为访问的私有属性

 

}

 

10.定义静态属性

function Person(){

       Person.prototype.name = "zsw";

       Person.prototype.age = 21;

       Person.prototype.say = function(){

              alert("Javascript 面向对象的继承");

       };

}

 

function Student(){

       Student.prototype.schoolName = "bdqn";

       //定义私有属性

       var gfName = "hy";

       Student.cityName = "深圳";

}

 

function TestStu(){

       Student.prototype = new Person();

       var s = new Student();

       alert(s.schoolName);

       s.say();

      

       alert(s.gfName); //不可见，因为访问的私有属性

      

       //访问静态属性

       alert(Student.cityName);

}

 

 

11.Json对象

定义Json对对象，在对象中添加属性：

function jsonTest(){

       var jsonObj = {

              name:'周尚武',

              sex:'男',

              age:21

       };

      

       alert(jsonObj.name);

}

Json添加方法：

function jsonTest(){

       var jsonObj = {

              name:'周尚武',

              sex:'男',

              age:21,

              say:function(){

                     alert("Json对象中添加方法!");

              }

       };

      

       alert(jsonObj.name);

       jsonObj.say();

}

Json添加子对象：

function jsonTest(){

       var jsonObj = {

              name:'周尚武',

              sex:'男',

              age:21,

              say:function(){

                     alert("Json对象中添加方法!");

              }

       };

      

       alert(jsonObj.name);

       jsonObj.say();

      

      

       var jsonArray = ["A","B","C"];

       alert(jsonArray[0]);

}

在此复习一下静态方法

function test(){

       test.prototype.name="huangyi";

       test.cityName="深圳";

}

function T(){

       alert(test.cityName); //将输出undefined

}

以上调用test.cityName必须先把test实例化一下：

function test(){

       test.prototype.name="huangyi";

       test.cityName="深圳";

}

function T(){

       new test();

       alert(test.cityName);

}

总结：

Javascript面向对象和所有面向对象编程语言一样，都是通过实例化的方式进行访问，两个对象间的非静态变量不会被干扰。

JSON中，属性可以是方法，甚至可以是一个子对象。

使用静态变量，需要实例化一下function，告诉浏览器它不是函数，而是对象。

 

 

12.方法覆盖

function test(){

       test.prototype.name = "zsw";

       test.prototype.age = 21;

       test.prototype.say=function(){

              alert("Hello World!");

       }

}

 

function T(){

       var t = new test();

       t.say = function(){

              alert("你好!");

       }

       t.say();

}

 

13.重写window.alert();提示框

<script type="text/javascript">

function run(){

       window.alert = function(s){

              var o = document.getElementById("Layer1");

              o.innerHTML = "<input name='button' type='button' οnclick='closeWin()' value='关闭' />"+s;

              o.style.display = "block";

       }

      

       window.show = function(s){

              alert(s);

       }

      

       show('zsw love hy！！');

}

 

function closeWin(){

       var o = document.getElementById("Layer1");

       o.style.display = "none";

}

</script>

<style type="text/css">

<!--

#Layer1 {

       position:absolute;

       left:341px;

       top:168px;

       width:296px;

       height:142px;

       z-index:1;

       color:#FFFFFF;

       display:none;

       background-color:#00CC99;

}

-->

</style>

</head>

 

<body>

<div id="Layer1">

 

</div>

<input type="button" value="点击" οnclick="run()" />

</body>

 

 

补充：javascript复制继承法

[javascript] view plain copy print ?
  1. <mce:script type="text/javascript"><!--  
  2.     function dw(s){  
  3.         alert(s);  
  4.     }  
  5.       
  6.     Function.prototype.extend_p = function(obj){  
  7.         for(var i in obj){  
  8.             this.prototype[i] = obj[i];  
  9.         }  
  10.     }  
  11.       
  12.     Person = function(){  
  13.         this.name = "accp";  
  14.         this.setName = function(obj){  
  15.             this.name = obj;  
  16.         }  
  17.         this.getName = function(){  
  18.             return this.name;  
  19.         }  
  20.     }  
  21.       
  22.       
  23.     Student = function(){  
  24.       
  25.     }  
  26.       
  27.     Student.extend_p(new Person());  
  28.       
  29.     var s = new Student();  
  30.     s.setName('黄翊');  
  31.     dw(s.getName());  
  32.       
  33. // --></mce:script>  

 

Javascript 原始继承法

[javascript] view plain copy print ?
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  5. <title>javascript原始继承法</title>  
  6. <mce:script type="text/javascript"><!--  
  7.     function ds(s){  
  8.         alert(s);  
  9.     }  
  10.       
  11.     Person = function(){  
  12.         this.name = "hy";  
  13.         this.setName = function(obj){  
  14.             this.name = obj;  
  15.         }  
  16.         this.getName = function(){  
  17.             return this.name;  
  18.         }  
  19.     }  
  20.       
  21.     Student = function(){  
  22.         this.stuNo = "0001";  
  23.     }  
  24.       
  25.     Student.prototype = new Person();  
  26.       
  27.     var stu = new Student();  
  28.       
  29.     stu.setName('黄翊');  
  30.     alert("名字："+stu.getName());  
  31.     alert("编号："+stu.stuNo);  
  32. // --></mce:script>  
  33. </head>  
  34. <body>  
  35. </body>  
  36. </html> 

阿托斯之棍
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript复习资料
10-15
免费下载！JavaScript复习资料中包含JavaScript的各种用法，有助于我们更好的学习。不管对学生还是其他行业的人都是有一定的帮助。
JavaScript复习笔记
08-03
JavaScript的学习笔记
js-Object类型
qq_53239252的博客
08-10 100
js-Object类型。
重学原型链
好记性不如烂笔头~
03-11 163
一切源于一个简单的案例： function Foo(){ this.name = name; // 原始属性or方法 } Foo.prototype.say = function(){ // 原型属性or方法 f } var f1 = new Foo(); f1.say(); //hello Foo.prototype = {}; var f2 = new Foo()...
13-JS中的面向对象
05-29 96
创建对象的几种常用方式 1.使用Object或对象字面量创建对象 2.工厂模式创建对象 3.构造函数模式创建对象 4.原型模式创建对象 1.使用Object或对象字面量创建对象 JS中最基本创建对象的方式： var student = new Object(); student.name = "easy"; student.age = "20"; 这样，一个s...
Javascript复习
hghjjj的博客
11-07 129
javascript
JAVASCRIPT复习笔记
weixin_43492536的博客
02-28 498
JAVASCRIPT教程笔记Js简介一、JavaScript 教程二、使用步骤1.引入库2.读入数据总结 Js简介 js是脚本语言 JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。 一、JavaScript 教程 二、使用步骤 1.引入库 2.读入数据 总结 ...
javascript 复习总结
Hello World!
11-17 1044
javascript和html代码结合的方式 1.使用script标签来写javascript代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> // alert是JavaScript语言提供的一个警告
JavaScript复习总结
myroncham的博客
01-17 250
Javascript教程-小白的零基础JavaScript全栈教程-瘳雪峰 JavaScript 标准参考教程 You-Dont-Know-JS -- 不建议初学者查看 You-Dont-Know-JS -- 翻译版 重新介绍 JavaScript（JS 教程） 前端入门教程 前端开发者手册 JavaScript学习总结-trigkit4 温故js系列-对知识点进行回顾知新 JS...
javascript复习五
hghjjj的博客
11-08 78
javascript复习
JavaScript复习之JavaScript简介
Java学习之乐的博客
05-13 208
今日目录        1、JavaScript简介        2、HelloWorld一、JavaScript简介    1、JavaScript 是一种轻量级的编程语言。    2、JavaScript 是可插入 HTML 页面的编程代码。    3、JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。二、HelloWorld添加小编微信可以获取免费资源，二维码要用到的...
JavaScript复习记录-基础篇
qq_33274797的博客
11-01 135
JavaScript JavaScript 是一种轻量级的编程语言。 JavaScript 是可插入 HTML 页面的编程代码。 HTML输入流 点击事件 改变HTML内容 改变HTML图像 改变HTML样式 JavaScript对大小写敏感 JavaScript变量 变量必须以字母开头 变量也可以以$或者_开头 变量对大小写敏感 JavaScript...
JavaScript 复习
11-21
JavaScript 复习个人记录了！说不定可以帮助到你，看看吧
Javascript-Refresher:Javascript 复习挑战
06-07
#Javascript 复习 ##Context 该项目使用 Javascript 和 Jasmine 重新创建了 Makers Academy 。 ＃＃学习目标 在不使用 underscore.js 的情况下通过失败的测试 ＃＃技术 Javascript 茉莉花
ant design DatePicker日期选择框指定分钟的间隔minuteStep属性
u010234868的专栏
05-17 237
在上面的例子中，DatePicker 将只允许用户以 15 分钟为间隔选择分钟。是 Ant Design 的 TimePicker时间选择框组件的一个属性。设置为 30，则用户可以选择以 30 分钟为间隔的分钟值。如果你想让分钟选项只能以 15 分钟为间隔选择，你可以将。
js知识点汇总之let const 和 var的区别
最新发布
fyw1789的博客
05-23 1302
声明的变量会先在作用域中被创建出来，但因此时还未进行词法绑定，所以是不能被访问的，如果访问就会抛出错误。因此，在这运行流程进入作用域创建变量，到变量可以被访问之间的这一段时间，就称之为暂时死区。其实上面不存在变量提升的例子中，其实也是暂时性死区，因为它有暂时性死区的概念，所以它压根就不存在变量提升了。实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动。中的作用域有：全局作用域、函数作用域，命令声明变量之前，该变量都是不可用的。，导致绑定这个块级作用域，
springboot+vue2+elementui实现时间段查询
2301_76604664的博客
05-20 360
将前端传来的时间数组，赋值给对应的属性；
React函数式组件的父子方法互相调用，父组件调用子组件方法，子组件调用父组件方法
SongZhengxing_的博客
05-18 243
子组件需要使用 forwardRef 函数包裹，然后使用 useImperativeHandle 暴露属性和方法。编写子组件 Child。
TS中的InstanceType函数和Typeof 操作符
05-23 109
【vue中的instanceType用法】父组件用ref获取子组件时，通过 instanceType获取子组件的类型。此外，typeof 操作符除了可以获取对象的结构类型之外，它也可以用来获取函数对象的类型。尽管ES6引入了更清晰的类语法，但从类型检查的角度看，类仍然被视为函数。函数：该函数返回（构造） 由某个构造函数构造出来的实例类型组成的类型。操作符除了可以获取对象的结构类型之外，它也可以用来获取函数对象的类型。获取由某个构造函数构造出来的实例类型组成的类型。操作符可以用来获取一个变量或对象的类型。
大一期末希望可以提供一些关于javascript的复习建议
06-09
以下是一些关于 JavaScript 复习的建议： 1. 了解 JavaScript 的基本语法和数据类型，包括变量、函数、数组、对象、字符串、数值等等。 2. 学会使用条件语句和循环语句，例如 if/else 语句、switch 语句、for 循环...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值