JavaScript

JavaScript与Java的关系类似于雷锋与雷峰塔的关系,没有什么关系。。。。。。

在html页面中写js代码的方式

  1. 直接写在script标签内
    <script type="text/javascript">内容</script>
  2. 单独写一个js文件,在html中引入这个js文件,通过script的src属性引入
    <script type="text/javascript" src="js文件相对路径">(空内容)</script>

变量

  • 变量类型
  1. 数值类型:number
  2. 字符串类型:string
  3. 对象类型: object
  4. 布尔类型: boolean
  5. 函数类型: function
  • 特殊的值的含义
  1. undefined----->未定义
  2. null---------->空值
  3. NAN----------->not a number 非数值
  • 变量的定义格式
    var 变量名;

几个函数

  1. alert();------>弹出一个警示弹窗
  2. typeof();----->返回参数的类型

特殊的关系(比较运算)

  1. 等于 : ==
  2. 全等于:===
    等于是简单的字面值相等,全等于不仅字面值相等,数据类型也要相等

逻辑运算

js中,所有的变量都可以作为一个boolean类型使用
所以在进行逻辑运算时,只有0、null、undefined、""(空串)才是false

  1. 与&&运算
  • 当表达式全为真时,返回最后一个表达式的值
  • 当表达式的值为假时,返回第一个为假的表达式的值
  1. 或||运算
  • 当表达式全为假时,返回最后一个表达式的值
  • 只要有一个表达式为真,就会返回第一个为真的表达式的值

数组

  1. 数组定义
    var 数组名 = [];
    var 数组名 = [1,"abc"];

js中,只要通过数组下标赋值(只是赋值会,读不会),最大的下标就会给数组扩容,不存在越界


函数

  1. 通过function定义
    function 函数名(形参列表){函数体};
    形参不需要类型,之直接写变量名---function fun(a,b){}

  2. 第二种定义
    var 函数名 = function(形参列表)

  3. js中函数不支持重载,否则会覆盖之前的函数

js函数的参数列表,实际上是一个arguments数组,参数都传进了这个数组里面,我们称arguments为隐形参数,可以通过arguments来操作这个参数数组,例如arguments[1],arguments.length

对象

  1. 创建方式
  • var 对象名 = new object();
    对象名.属性名=赋值;
    对象名.函数名=function(){}

  • var 对象名={
    属性名:赋值,
    函数名:function(){}
    }

js事件

  1. 常用的事件
  • onload 加载完成事件
    页面加载完成后,常用于做页面js代码初始化

  • onclick单击事件
    常用于按钮的点击响应操作

  • onblur失去焦点事件
    常用于输入框失去焦点后验证其输入内容是否合法

  • onchange内容发生改变事件
    常用于下拉列表和输入框内容发生改变后操作

  • onsubmit表单提交事件
    常用于表单提交前,验证所有表单项是否合法

  1. 事件注册
    事件使用前需要先注册绑定
  • 静态注册
    通过html标签的事件属性直接赋予事件响应后的代码

  • 动态注册
    先通过js代码得到标签的dom对象,再通过dom对象.事件名=function(){}赋予事件响应后的代码
    固定写法:window.onload = function(){ 事件响应代码 }
    window.onload表示页面加载完毕后执行的代码
    dom对象
    document是js提供的一个对象,表示整个html页面文档
    document.getElementById("id名")可以获取到某个控件的id

<script>
  window.onload=function(){
    var objName = documents.getEm=lementById("btn");
    objName.onclick=function(){
      alert("onclick事件动态注册成功!!!");
    }
  }
</script>
<body>
  <button id="btn">按钮</button>
</body>
  1. onload事件
    加载页面是就会触发的事件。(测试发现,写在body中的alert弹窗相比于其他script标签中的alert,总是最后一个弹出执行)
    <body onload="alert('原来要写到body属性里面!!!')">

  2. onclick事件

  • 静态注册<button onclick="函数名"></button>
  • 动态注册与上面例子一样
  1. onblur事件
  • 静态注册
<script>
  function fun1(){
    console.log("onblur静态注册");  
  }
</script>

<input onblur="fun1" />

console.log()可以实现在网页控制台打印信息

  1. onchange事件
    与其他事件类似

  2. onsubmit事件

  • 静态注册
<script>
  function fun(){
    alert("表单错误!");
    return false;  //这里return false,阻止错误表单的提交
  }
</script>

<body>
  <form action="http://www.baidu.com" method="get" onsubmit="return fun()"> //一定要return 才能阻止成功,函数返回的是false
    <input type="submit" value="静态注册"/>
  </form>
</body>

  • 动态注册类似
posted @ 2021-10-18 21:09  这个世界会好的  阅读(26)  评论(0编辑  收藏  举报