js基础

诨号无敌鸭
81 阅读4分钟

js

  • 基本说明：(前端三剑客之一，行为）

  • 特点：解释型，基于对象的脚本语言，弱类型的（变量的数据类型在运行中可以变化）

  • 使用方式：

    1.（可以在head和body里面使用，）引入js代码

    2.引入js文件：

    注意：两种方式二选一，不可以混用两种方式都使用不会报错，但是只有一个生效

<script type="text/javascript">
 var name = "888";
alert("name=" + name);//弹窗显示
alert(typeof name);//输出变量的类型
console.log(name + "真的帅爆了");//在调试输出 F12调出控制台
</script>

  • 查看js错误信息浏览器控制台 进入调试器 ctrl+shift+i

  • js变量

    1.变量表示存储数据的容器

    2.var age=10; //定义方式，非常自由，弱

  • 数据类型

    1.数据类型介绍数值类型：number字符串类型：string对象类型：object布尔类型：boolean函数类型：fuction(方法)

    2.特殊值！！undefined 变量未赋值null 空值NaN 非数值 Not a Number(比如100 * "hello")

    3.数据类型注意事项string 单引号双引号都可以

  • 运算符关系运算符：= = =全等（值和类型都相等）

  • 逻辑运算符：

    1. 所有变量都可以作为一个boolean使用
    2. 0,null,undefined,NaN,""(空串)都认为是false
    3. && 返回值遵循 短路与 机制表达式全为真时，返回最后一个表达式的值。表达式中有一个为假时，返回第一个假的表达式
    4. || 返回值遵循 短路或 机制表达式全为假时，返回最后一个表达式的值。只要有一个表达式为真，就会返回第一个为真的表达式

  • 数组定义

    1. var a = ["zhezi","雨晴"]
    2. var a = new Array("zhezi","yuqing")//创建对象
var a = [];//空数组
a[0] = "zhezi"//添加元素
var a = new Array();
a[0] = "zhezi";
a[1] = "yuqing";

  • 数组遍历

    1. 数组长度 a.length;(log 方法自动换行)

  • js函数快速入门

    1. 第一种方式直接调用
    2. 第二种方式，通过事件触发函数
<script>
  //怎么执行？两种方式
  function hi() {
    alert("hi zhezi");
  }
hi();//主动调用的
</script>
<body>
<button onclick="hi()">
别点我</button>
<!--  //通过事件触发 -->
</body>

  • js函数定义方式

    1. fuction关键字 方法
    2. 将函数赋值给变量
<script>
 function hi() {
            alert("hi zhezi");
        }
    </script>
<script>
    //可以理解成hi指向了函数
  var hi = function () {
            alert("hi zhezi");
        }
    </script>

  • js函数注意事项和细节

    1. js无函数重载，会直接覆盖
    2. 隐形参数，在function函数中不需要定义，可以直接用来获取所有参数的变量
    3. 如果函数中有形参，在传入实参的时候，仍然按照顺序匹配。匹配上的赋值给他。仍然把所有实参赋值给arguments。形参个数大于实参个数，该形参为undefined
<script>
        function hi() {
            //隐形参数 arguments是数组
            //如果用console.log输出对象的数据用,连接
            console.log("arguments= ", arguments);
        }
        hi(20, 20, 30);
    </script>
  • js自定义对象
  1. object方式
<script>
        //自定义对象的方式1  var 对象名 = new Object();
        var person = new Object();
        person.name = "zhezi";
        person.age = 20;
        person.say = function () {
            console.log(this.name+" "+this.age);
        }
        alert(person.name);//访问属性
        person.say();//访问方法
        //小细节，如果没有定义属性，直接使用，就会出现变量提升，显示undefined
    </script>

2.{}方式

//自定义对象的方式2 注意要有逗号分隔
var person = {
            name:"zhezi",
            age:20,
            say:function (){
                console.log(this.name+" "+this.age);
            }
        }
  • js事件

  1. onload 加载完成事件

    1）静态注册

function sayok(){
  alert("静态注册");
}
<body onload="sayok()">
  </body>

2）动态注册

刷新后出现弹窗

2.onclick鼠标点击某个对象

静态注册(略)

动态注册 ：鼠标点击按钮出现弹窗

<script>
  //当页面加载完毕后，我们再进行动态注册可以使得在事件之前进行动态注册!!!!
  window.onload = function () {
    //动态注册 onclick 事件
    //1.先拿到 id=zhezi 的button 对应dom 对象
    //2.通过dom对象动态的绑定onclick事件
    //3，通过document 的 getElementById获取对应的dom对象
    var niubi = document.getElementById("zhezi");
    niubi.onclick = function () {
      alert("你点击了按钮");
    }
  }

  </script>
  </head>
  <body>
  <button id="zhezi">
  哲子点这里
  </button>
  </body>

3.onblur失去焦点事件（鼠标移开）

静态绑定:实现鼠标光标移开时，转化为大写的操作

<title>onblur失去焦点事件</title>
  <script>
  //静态绑定
  function up() {
    //先得到zhezi 1 输入框的value->得到对应dom对象
    var zhezi1 = document.getElementById("zhezi1");
    zhezi1.value = zhezi1.value.toUpperCase();//转化为大写
  }
  </script>
  </head>
  <body>
  输入英文单词
  <input type="text" id="zhezi1" onblur="up()"><br>

动态绑定

//页面加载完毕，完成动态绑定
window.onload = function () {
  //得到zhezi2的dom对象
  var zhezi2 = document.getElementById("zhezi2");
  zhezi2.onblur = function (){
    zhezi2.value = zhezi2.value.toUpperCase();//转化为大写
  }

}
  <body>
  输入英文单词
  <input type="text" id="zhezi2"><br>
  </body>

4.onchange内容发生改变事件：比如下拉列表选择改变后出现弹窗，不改变则不出现弹窗

动态注册（静态注册略）

<head>
  <meta charset="UTF-8">
  <title>onchange</title>
  <script>
  //动态注册
  window.onload = function () {
    //获取dom对象
    var niubi = document.getElementById("zhezi");
    //绑定onchange事件
    niubi.onchange = function () {
      alert("你换女友啦");
    }
  }
  </script>
  </head>
  <body>
  你当前的女友
  <select id="zhezi">
  <option>狄雨晴</option>
  <option>亲自梦</option>
  <option>迪丽热巴</option>
  </select>
  </body>

  1. onsubmit表单提交事件

    1）静态表单提交

<script>
//静态表单提交事件
function zhehh() {
    //先得到用户名和密码
    var zhe1 = document.getElementById("zhezi1");
    var zhe2 = document.getElementById("zhezi2");
    //判断是否为空
    if("" == zhe1.value || "" == zhe2.value){//细节1
        alert("用户名和密码不能为空");
        return false;//不提交
    }
    return true;
}
</script>
</head>
<body>
<h1>注册用户</h1>
<form action="ok.html" onsubmit="return zhehh()">//细节2：方法前要有return 才不会跳转，否则不输入密码出现弹窗，但仍然跳转到ok.html界面
u: <input type="text" id="zhezi1" name="username"/><br/>
p:<input type="password" id="zhezi2" name="psd"/><br/>
<input type="submit" value="注册用户"/>
</form>
</body>

2）动态表单提交正则表达式

avatar
文章
阅读
粉丝