js基础

test1-helloworld

新建test1.html文件,内容如下,然后用浏览器打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test1</title>
</head>
<body>
<h1>我的第一个 JavaScript 程序</h1>
<script>
    // 调用alert方法,浏览器会弹出一个提示框
    alert("Hello JavaScript");
</script>
</body>
</html>

js应该写在哪里?

  1. 第一种方式:直接写在HTML页面中,如上面的例子所示。

如需在 HTML 页面中插入 JavaScript,请使用 会告诉 JavaScript 在何处开始和结束。

  1. 第二种方式:外部的 JavaScript

也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。

外部 JavaScript 文件的文件扩展名是 .js。

如需使用外部文件,请在

将上面的代码改造成两个文件test1.html和test1.js,这两个文件处于同一个文件夹下,内容如下所示

test1.js的内容如下所示:

alert("Hello JavaScript");

test1.html的代码如下所示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test1</title>
</head>
<body>
    <h1>我的第一个 JavaScript 程序</h1>

    <script src="./test1.js"></script>
</body>
</html>

test2-点击事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test2</title>
</head>
<body>
<h1>点击事件</h1>
<!--点击这个按钮的时候,就会调用myFunction1函数-->
<button onclick="myFunction1()">按钮1</button>

<!--也可以传递参数-->
<button onclick="myFunction2(10)">按钮2</button>
<script>
    // 这里是定义了一个函数
    // 函数都是以function开头,然后空格加函数名,这里的myFunction1就是函数名
    function myFunction1() {
        alert("你点击了按钮1");
    }
    function myFunction2(x) {
        alert("你点击了按钮2,x的值为:" + x);
    }
</script>
</body>
</html>

test3-语法

创建test3.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test3</title>
</head>
<body>
<h1>语法</h1>

<script>
    // JavaScript 使用关键字 var 来定义变量, 使用等号来为变量赋值:
    var a = 6;
    alert("a = " + a);
    // if、for、while语句的用法跟Java类似的,下面以for循环为例
    // 计算1到10之间偶数的总和
    var sum = 0;
    for (var i = 1; i <= 10; i++) {
        if (i % 2 == 0) {
            sum = sum + i;
        }
    }
    alert("1到10之间偶数的总和sum = " + sum);
</script>
</body>
</html>

test4-对象

JavaScript的对象是一种无序的集合数据类型,它由若干键值对组成。

JavaScript的对象用于描述现实世界中的某个对象。例如,为了描述“小明”这个淘气的小朋友,我们可以用若干键值对来描述他:

创建test4.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test4</title>
</head>
<body>
<h1>对象</h1>

<script>
    var xiaoming = {
        name: '小明',
        birth: 1990,
        school: 'No.1 Middle School',
        height: 1.70,
        weight: 65,
        score: null
    };
    // 通过 xiaoming.name 访问属性name
    alert("修改前, name = " + xiaoming.name);
    // 修改属性name
    xiaoming.name = "小明666";
    alert("修改后, name = " + xiaoming.name);
</script>
</body>
</html>

JavaScript用一个{...}表示一个对象,键值对以xxx: xxx形式申明,用,隔开。注意,最后一个键值对不需要在末尾加,,如果加了,有的浏览器(如低版本的IE)将报错。

test5-操作HTML

创建test5.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test5</title>
</head>
<body>
<h1>操作HTML元素</h1>

<div id="demo">我的第一个段落,点我</div>

<script>
    // 在test2中我们使用的是onclick属性指定一个函数来执行点击事件
    // 下面我们换一种点击方式
    // 获取 id = “demo” 的HTML节点元素
    var demo = document.getElementById("demo");
    // 为 id = “demo” 的HTML节点元素添加一个点击事件,当这个节点被点击时就会触发这个函数
    demo.onclick = function () {
        // 改变段落内容,new Date()是返回当前时间
        demo.innerText = new Date();
    };
</script>
</body>
</html>

test6-操作表单数据并跳转

新建两个页面,login.html、index.html,分别代表登录页面和首页,登录成功后会跳转到首页

index.html代码如下,这个页面代码非常简单,主要来看下登录页面的代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
<h1>登录成功,进入首页</h1>
<script>
</script>
</body>
</html>

login.html代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
</head>
<body>
<h1>登录</h1>

名字: <input type="text" id="name">
密码: <input type="password" id="password">
<button onclick="login()">登录</button>

<script>
    // 点击登录按钮时就会调用这个函数
    function login() {
        // 获取名字
        var name = document.getElementById("name").value;
        // 获取密码
        var password = document.getElementById("password").value;

        // 这里判断名字与密码不能为空
        if (name == '' || password == '') {
            alert("名字或者密码不能为空");
            return; // 这一行代码代表不能继续往下执行了
        }

        alert("name = " + name + ", password = " + password);

        // 假设账号为admin,密码为123456
        if (name == "admin" && password == "123456") {
            // 登录成功,则跳转到index.html页面
            alert("登录成功");
            // 这里是跳转页面
            window.location.href="./index.html";
        } else {
            alert("账号密码错误,请重新输入");
        }
    }
</script>
</body>
</html>
本作品采用《CC 协议》,转载必须注明作者和本文链接
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!