什么是JavaScript?
JavaScript,简称JS,是一种轻量级的编程语言,主要用于网页开发。它使网页具有交互性,能够响应用户的操作,如点击、按键等。JavaScript不仅可以在浏览器中运行,还可以在服务器端运行,如Node.js。
JavaScript基础语法
变量
在JavaScript中,变量用于存储数据。声明变量使用关键字var、let或const。
let age = 25;
console.log(age); // 输出:25
数据类型
JavaScript有几种基本数据类型:数字、字符串、布尔值、对象和函数。
let name = "张三";
let isStudent = true;
let scores = [90, 92, 85];
控制结构
JavaScript使用条件语句和循环来控制程序流程。
if (age > 18) {
console.log("你已成年");
} else {
console.log("你还未成年");
}
for (let i = 0; i < 5; i++) {
console.log(i);
}
函数
函数是JavaScript的核心概念之一,用于封装可重用的代码。
function sayHello() {
console.log("你好!");
}
sayHello(); // 输出:你好!
HTML和CSS基础
HTML(超文本标记语言)用于构建网页结构,CSS(层叠样式表)用于美化网页。
HTML基础
HTML文档由<html>、<head>和<body>三个部分组成。
<!DOCTYPE html>
<html>
<head>
<title>我的网页</title>
</head>
<body>
<h1>欢迎来到我的网页</h1>
<p>这里是网页内容</p>
</body>
</html>
CSS基础
CSS通过选择器来应用样式。
h1 {
color: red;
font-size: 24px;
}
实战:构建第一个网页应用
第一步:创建HTML文件
创建一个名为index.html的文件,并添加以下内容:
<!DOCTYPE html>
<html>
<head>
<title>我的第一个网页应用</title>
<style>
body {
font-family: Arial, sans-serif;
}
h1 {
color: blue;
}
</style>
</head>
<body>
<h1>欢迎来到我的第一个网页应用</h1>
<p>这里将展示JavaScript的强大功能。</p>
<button onclick="sayHello()">点击我</button>
<script>
function sayHello() {
alert("你好!");
}
</script>
</body>
</html>
第二步:运行网页
使用浏览器打开index.html文件,点击按钮,你会看到一个弹窗显示“你好!”
总结
通过本文的学习,你已经掌握了JavaScript的基础语法、HTML和CSS的基本知识,以及如何构建一个简单的网页应用。希望这些知识能帮助你开启网页开发的旅程。
