一、如何使用js?
head标签中添加<script type="text/javascript"></script>
二、第一个js程序
<html> <head> <title></title> <style type="text/css"> </style> <script type="text/javascript"> //alert("Hello World"); //相当于C#的Messagebox.show console.log("Hello World"); //前台不显示,打印在后台 </script> </head> <body> </body> </html>
三、注释
// 行注释
/* */ 块注释
四、快捷键
notepad++快捷键
Ctrl+K:多行注释
Ctrl+q:取消多行注释
Ctrl+shift+K:
五、命名规则
C# :帕斯卡,GetMax(int num1,int num2)
js:骆驼命名规则,getMax(num1,num2)
六、特点
- 大小写敏感
- js不编译,直接解释执行
七、打印
Alert("Hello World"); (弹出警告框。相当于C#的Messagebox.Show,缺点:会阻塞程序)
console.log("Hello World"); 写入到浏览器的控制台
?? alert和console有什么区别?
相当于C#的Messagebox.Show
前台不显示,打印在后台
?? 既然有了alert为什么还有console?
每执行一次alert就会阻塞程序,console不需要阻塞程序就直接在后台打印内容
思维导图
C#:从类继承
js:从对象继承
什么叫继承?
模板(类)
原型继承(实体)
有一个对象存在,构造函数设置原型为这个对象
创建出来的对象就继承与这个对象(从对象那里继承)
<script type="text/javascript"> onload = function () { var Person= function(){ this.say = function(){ alert("你好"); }; }; var p1= new Person(); var p2 = new Person(); p1.say(); }; </script>
此时p1、p2用的不是同一个say方法
方法与变量name、age等字段一样,占据了对象的内存
也就是说,每创建一个这样的函数,就会浪费一段这样的内存空间
什么是原型继承?
原型就是函数的prototype属性
//使用继承后 var Person = function(){ }; Person.prototype ={say:function(){ alert("牛号"); }}; var p1 = new Person(); var p2 = new Person(); alert(p1.say===p2.say); //打印true
js可以实现多继承
<script type="text/javascript"> onload = function () { var inherite= function(name){ this.name= name; }; var o = { sayHello:function(){ alert("你好,我是"+ (this.name || "不存在")); } }; o.sayHello(); //此时打印”你好,我是不存在“ inherite.call(o,"赵晓虎"); o.sayHello(); //此时打印”你好,我是赵晓虎“ }; </script>
原型链
如果需要原型,那么就一定要有函数
每一个对象有一个属性叫:_proto_
对象有原型,那么原型也是对象,原型也有原型
所有的函数是对象,继承自Function.prototype
Function.prototype是对象,继承自Object.prototype
Object.prototype是对象,继承自null
obj是对象,继承自Object.prototype
Function是对象,继承自Function.prototype
Function是函数,继承自Function.prototype
js成员的访问规则
O.方法( )
首先在o当前这个类型中寻找该成员的定义,如果存在该成员的定义,那么就直接使用该成员
如果该成员不在当前类型中,就访问其原型(原型链中的上一级)
以此类推,直到null位置
什么是js框架库?
使用js代码封装为一些文件,使用时只要引用进来即可
常见的js库
Prototype、YUI、Dojo、ExtJS、Jquery等