通过prototype可以给一个类动态的扩展函数和属性
<script type="text/javascript"> Product=function(pno,pname,price){ //属性 this.pno=pno; this.pname=pname; this.price=price; //函数 this.getPrice=function(){ return this.price; } } var kong=new Product(100,"🍅",5); var pri=kong.getPrice(); alert(pri); </script>
//可以通过prototype这个属性来给类动态扩展属性和函数 Product.prototype.getName=function(){ return this.pname; } //调用后期动态扩展后的函数 var chao=kong.getName(); alert(chao);
也可以通过prototype给String类动态扩展属性和函数
String.prototype.hello=function(){ alert("hello 🍉") } //调用扩展后的函数 "abc".hello();
js中创建类和对象？
User=function(uname,uno){ this.uname=uname; this.uno=nuo; } //创建对象(下列都可以) var u1=new User(); var u2=new User("张三","1"); var u3=new User("李四","1",3);//传入多个参数只会取前两个
null、undefined、NaN的区别
<script type="text/javascript"> // null NaN undefined 数据类型不一致。 alert(typeof null); // "object" alert(typeof NaN);//"number" alert(typeof undefined);// "undefined" // null和undefined可以等同. alert(null==NaN);// false alert(null==undefined);// true alert(undefined==NaN);// false </script>
等同和全等运算符
在JS当中有两个比较特殊的运算符
(等同运算符"==":只判断值是否相等)
(全等运算符"===":既判断值是否相等，又判断数据类型是否相等)
alert(null===NaN);// false alert(null===undefined);// false alert(undefined===NaN);// false
小demo：
alert(1==true);//true,值等同所以为true，boolean()函数将1转换为true alert(1===true);//false，值等同但数据类型不同所以为false
js常用事件
JS中的事件:
blur失去焦点
focus获得焦点click鼠标单击
dblclick鼠标双击keydown键盘按下
keyup键盘弹起mousedown鼠标按下
mouseover鼠标经过
mousemove鼠标移动
mouseout鼠标离开
mouseup鼠标弹起reset表单重置
submit表单提交change下拉列表选中项改变，或文本框内容改变
select文本被选定
load页面加载完毕(整个html页面中所有元素全部加载完成后发生)
回调函数的概念
任何一个事件都会对应一个事件句柄，事件句柄就是在事件前添加on。
onXXX这个事件句柄出现在标签属性位置上。（事件句柄以属性的形式存在）
下面代码的含义是：将sayHello函数注册到按钮上，等待click事件发生后，该函数被浏览器调用我们称这个函数为回调函数。
如：
function sayHello(){ alert("hello"); } <input type="button" value="按钮" onclick="sayHello();"/>
当点击这个按钮时，会弹出hello
sayHello()被称为为回调函数
回调函数的特点：
自己把这个函数写出来，但是这个函数不是自己调用的，而是有其他程序调用这样的函数被称为回调函数。
java中也有回调函数的机制：
//java中也有回调函数机制: public class MyClass{ public static void main(Stringl] args){ //主动调用run()方法，站在这个角度看run()方法叫做正向调用。 run(); } //站在run方法的编写者角度来看这个方法，他把run方法叫做回调函数。 public static void run(){ System.out.println("run..."); } }
注册事件的两种方式：
方式①：前面提到的直接将onclick写入标签中：
<input type="button" value="按钮" onclick="sayHello();"/>
方式②：是使用纯js代码完成事件的注册。
函数在页面打开的时候只是注册上，不会被调用，在click事件发生之后才会调
一般步骤：
<input type="button" value="按钮1" id="mybtn" /> <script type="text/javascript"> function doSome(){ alert("do some!"); } //第一步:先获取这个按钮对象(document是全部小写，内置对象，可以直接用。document就代表整个HTML页面) var btnObj =document.getElementById("mybtn"); //第二步:给按钮对象的onclick属性赋值 btnObj.onclick=doSome;// 注意:千万别加小括号btnObj.onclick=doSome();这是错误的写法 //这行代码的含义是将回调函数doSome注册到click事件上，
<input type="button" value="按钮2" onclick="sayHello()"/> var mybtn1=document.getElementById("mybtn1"); mybtn1.onclick = function(){// 这个凶函没有名字,叫做匿名函数,这个匿名函故也是一个回调函故。 alert("test....");//这个函数在页面打开的时候只是注册上，不会被调用，在click事件发生之后才会调用。
常用的写法：
<input type="button" value="按钮3" id="mybtn2" /> <script type="text/javasvript"> document.getElementById("mybtn2").onclick =function(){ alert("🐅虎虎生威"); </script>
代码的执行顺序
错误示例：
//把input按钮放到script下面则getElementById访问不到id事件，因为是自上而下执行 <script type="text/javasvript"> document.getElementById("mybtn2").onclick =function(){//返回null，因为程序到这里id还没加载到内存 alert("🐅虎虎生威"); </script> <input type="button" value="按钮3" id="mybtn2" />
这时我们可以采用load事件
load事件页面全部元素加载完毕才发生
load事件解决：
写法①：
<body onload="ready()"> <script type="text/javascript"> function ready(){ var btn=document.getElementById("btn"); btn.onclick=function(){ alert("hello javascript"); } } </script> <input type="button" value="按钮" id="btn" /> </body>
写法② ：
<script type="text/javascript"> window.onload=read; function ready(){ var btn=document.getElementById("btn"); btn.onclick=function(){ alert("hello javascript"); } } </script> <input type="button" value="按钮" id="btn" />
常用写法③：
<script type="text/javascript"> window.onload =function(){//页面打开就注册 document.getElementById("btn").onclick=function(){//页面加载完就注册 alert("hello javascript"); } } </script> <input type="button" value="按钮1" id="btn" />
详细分析：
这是两个回调函数的结合，外层回调函数在页面加载完成后执行，内层在点击事件发生后执行。
外层起名叫a函数，内层叫b函数
页面加载的过程中，将a函数注册给了load事件
页面加载完毕之后load事件发生了，此时执行回调函数a
回调函数a执行的过程中，把b函数注册给了id="btn"的click事件当id="btn"的节点发生click事件之后，b函数被调用并执行。
运行结果：
小text：
点击将文本框变成复选框
<script type="text/javascript"> window.onload=function(){ document.getElementById("btn").onclick=function(){ var mytext=document.getElementById("mytext"); //一个节点对象只要有的都可以"." mytext.type="checkbox"; } } </script> <input type="text" id="mytext"/> <input type="button" value="点击将文本框变为复选框" id="btn"/>
