js中创建类和对象？

null、undefined、NaN的区别

等同和全等运算符

js常用事件

回调函数的概念

回调函数的特点：

注册事件的两种方式：

常用的写法：

代码的执行顺序

load事件解决：
** 通过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"/>

【JavaScript】注册事件

js中创建类和对象？

null、undefined、NaN的区别

等同和全等运算符

js常用事件

回调函数的概念

回调函数的特点：

注册事件的两种方式：

常用的写法：

代码的执行顺序

load事件解决：

相关文章

热门标签

最新文章

目录

【JavaScript】注册事件

js中创建类和对象？

null、undefined、NaN的区别

等同和全等运算符

js常用事件

回调函数的概念

回调函数的特点：

注册事件的两种方式：

** 常用的写法：**

代码的执行顺序

load事件解决：

相关文章

热门标签

最新文章

目录

常用的写法：