一芜蓬蒿

仰天大笑出门去

JavaScript 简单入门

发布于 2023-02-20 | 标签: 前端 、 技术 | 9分钟 | 2000字数

本文需要你：

  • 有一定的 Java 基础，大致了解面向对象编程的概念
  • 有一定的 HTML 基础，了解标签、标签属性等概念

JavaScript介绍

JS 是弱类型，Java 是强类型。

什么是弱类型？

js定义的变量类型不强制确定，并可以更换，使用 var 声明：

var x;
x = 12;
alert(x); // 这个函数的含义是输出提示框，运行的结果是输出12
x = "abc";
alert(x); // 输出abc

JavaScript 的特性：

  • 交互性：目标是实现信息的动态交互。
  • 安全性：不直接访问本地硬盘。
  • 跨平台性：只要是可以解释JS的浏览器都可以执行，和平台无关。

将JS代码嵌入HTML

  1. 直接嵌入 script 标签

    <script type="text/javascript">
    alert("hello javascript!");
</script>

  2. 导入 js 文件

    <script type="text/javascript" src="script.js"></script>

注意：两种形式选其中之一，使用了src导入就不要再在标签中写代码，否则标签中的代码将不被执行。

变量

变量类型

  • 数值类型：number
  • 字符串类型：string
  • 对象类型：object
  • 布尔类型：boolean
  • 函数类型：function

特殊的值：

  • undefined：未定义，所有js变量未被赋予初始值时，默认的值
  • null：空值
  • NAN：not a number，意思是非数字，非数值。

变量声明和赋值

var i;
i = 12;

变量的关系运算和逻辑运算

基本和 Java 一致。

注意，在js中的特殊运算符号：

  • ==：只做字面值的比较，例如：12 == "12"，结果为true
  • ===：字面值和类型比较，例如：12 === "12"，结果为false

在js中，所有变量都可以直接当作布尔变量判断，0、null、undefined、""（空串）都认为是false。

var c = null;
if(c) {
    alert("null为真");
} else {
    alert("null为假");
}
// 输出"null为假"

基于以上规则，js的与运算有以下规则：

  • 当表达式全为真，返回最后一个表达式的值。
  • 当表达式有一个为假，返回第一个为假的值。

其他逻辑运算也有类似的规则。

数组

定义和赋值：

// 数组的声明
var arr = [];// 此时数组长度为0

arr[0] = 12;// 此时数组长度为1

arr[2] = "abc";// 此时数组长度为3，[12, undefined, "abc"]

函数（重要）

函数的定义

// 第一种定义方式
function func(){
    alert("无参函数func()被调用了");
}
function func2(a, b) { // js中，无需声明参数类型
    alert("有参函数func2()被调用了 a = " + a + ", b = " + b);
}
function sum(num1, num2) { // js中，无需声明返回值类型，如果有返回值，直接返回即可
    var result = num1 + num2;
    return result;
}

// 第二种定义方式
var func = function (){
    alert("无参函数func()被调用了");
}
var func2 = function (a, b) { // js中，无需声明参数类型
    alert("有参函数func2()被调用了 a = " + a + ", b = " + b);
}
var sum = function (num1, num2) { // js中，无需声明返回值类型，如果有返回值，直接返回即可
    var result = num1 + num2;
    return result;
}

注意：js不允许函数重载，如果重载，会覆盖掉上次的定义。

隐形参数

js的function机制实际上是将传入的参数当作一个数组处理。可以在函数体中使用arguments调用，称为隐形参数。

function fun(a) {
	alert(arguments.length + ", " + a);
}
fun(1, "abc", 3); // 输出为 3, 1

例子：利用隐形参数的机制求输入所有参数的和。

function sum(num1, num2) { // 这里传递两个参数是为了可读性好一些
    var result = 0;
    for(var i = 0; i < arguments.length; i++) {
        if(typeof(arguments[i]) == "number") { // 防止用户可能输入的字符串类型影响结果
            result += arguments[i];
        }
    }
    return result;
}

对象

  • Object形式的自定义对象

    var obj = new Object();
obj.name = "setsuna";
obj.age = 18;
obj.fun = function() {
    alert("姓名：" + this.name + ", 年龄：" + this.age);
}
obj.fun();

  • 使用{}定义对象

    var obj = {
    name: "setsuna", // 注意使用冒号而不是等于号声明！！！属性之间需要有逗号隔开
    age: 18,
    fun: function() {
        alert("姓名：" + this.name + ", 年龄：" + this.age);
    }
}
obj.fun();

事件

事件的注册

  • 静态注册：通过html标签的时间属性直接赋予事件响应后的代码。
  • 动态注册：先通过js代码得到标签的dom对象，然后再通过dom对象.事件名 = function(){}注册。
    1. 获得标签对象
    2. 标签对象.事件名 = function(){}

onload事件

页面加载完成后执行，常用于页面js代码的初始化操作。

  • 静态注册

    <body onload="alert("静态注册");">
    
</body>

    由于代码很可能不止一条，所以常用的写法是这样的：

    ...
<script type="text/javascript">
	function onloadFun(){
        ...
        代码
    }
</script>
...
<body onload="onloadFun();">
    
</body>

  • 动态注册

    <script type="text/javascript">
	window.onload = function() {
        alert("动态注册的onload事件");
    }
</script>

onclick事件

用户点击某个元素时执行，常用于按钮等与用户交互的元素。

  • 静态注册：

    <button onclick="alert("静态注册");">按钮</button>

  • 动态注册：

    // 在js文件或者script标签中
window.onload = function() {
    // 加载时，完成onclick事件的注册
    var buttonObj = document.getElementById("btn01");
    buttonObj.onclick = function () {
     	alert("动态注册onclick");   
    }
}

onblur事件

元素失去焦点时执行，常用于输入框。

  • 静态注册：和onclick类似

  • 动态注册：

    // 在js文件或者script标签中
window.onload = function() {
    // 加载时，完成onblur事件的注册
    var pwdObj = document.getElementById("passwd");
    pwdObj.onblur = function () {
     	console.log("密码框失去焦点");
    }
}

onchange事件

内容发生改变时执行，常用于输入框、下拉列表。

  • 静态注册：和onblur类似。

  • 动态注册：

    // 在js文件或者script标签中
window.onload = function() {
    // 加载时，完成onchange事件的注册
    var selectObj = document.getElementById("sel01");
    selectObj.onchange = function () {
        console.log("选择已经发生改变");
    }
}

onsubmit事件

发生表单提交事件时执行。

  • 静态注册：

    注意：在静态注册中，onsubmit的return不能省。

    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function onsubmitFun(){
            alert("静态注册表单提交事件---发现不合法的输入");
            return false;
        }
    </script>

</head>
<body>
    <!--return false 可以阻止表单提交-->
    <form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun();">
        <input type="submit" value="静态注册"/>
    </form>
</body>
</html>

  • 动态注册：

    注意：对于动态注册，需要阻止提交就返回false，正常提交就返回true。

    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        window.onload = function () {
            var formObj = document.getElementById("form01");
            formObj.onsubmit = function () {
                alert("动态注册表单提交事件---发现不合法");
                return false;
            }
        }
    </script>

</head>
<body>
    <!--return false 可以阻止表单提交-->
    <form action="http://localhost:8080" id="form01" method="get">
        <input type="submit" value="动态注册"/>
    </form>
</body>

DOM模型（重要）

DOM，Document Object Model：文档对象模型

  • 将文档中的标签、属性、文本转换为对象来管理。

Document对象

image-20230220140948745
  • Document管理了所有的HTML文档内容
  • Document是一种树结构的文档，有层级关系
  • Document让我们把所有的标签和文本都对象化（体现在树中为一个结点）
  • 我们可以通过Document访问所有的标签对象
image-20230220141100374

Document对象的查询

  • getElementById：通过id查询
  • getElementsByName：通过name查询，返回的是一个集合，里面有所有满足要求的dom对象引用
  • getElementsByTagName：通过标签名查询，返回集合

示例一：

检验输入的用户名是否符合以下规则：长度为5-12个字符，只能包括字母、数字或下划线。

示例二：

操作复选框，实现「全选」、「全不选」、「反选」功能。

# 前端 # 技术
jQuery 简单入门 上一篇
「密码学基础」学习笔记 下一篇
已运行:
浏览数: 次 | 访客数: 人
粤ICP备2022139875号 粤公网安备 44030502009612号
0%