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应该写在哪里?
- 第一种方式:直接写在HTML页面中,如上面的例子所示。
如需在 HTML 页面中插入 JavaScript,请使用 会告诉 JavaScript 在何处开始和结束。
- 第二种方式:外部的 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 协议》,转载必须注明作者和本文链接