1. 内联脚本
可以在 HTML 元素内部使用 <script>
标签来插入 JavaScript 代码。这种方式被称为内联脚本。
<!DOCTYPE html>
<html>
<head>
<title>内联脚本</title>
</head>
<body>
<h1>JavaScript 示例</h1>
<button onclick="alert('Hello, World!')">点我</button>
<script>
console.log('这是一个内联脚本');
</script>
</body>
</html>
2. 外部脚本
可以将 JavaScript 代码保存到一个独立的文件中,并通过 <script>
标签引入。
<!DOCTYPE html>
<html>
<head>
<title>外部脚本</title>
<script src="main.js"></script>
</head>
<body>
<h1>JavaScript 示例</h1>
<button onclick="alertMessage()">点我</button>
</body>
</html>
其中,main.js
是一个包含 JavaScript 代码的文件。
function alertMessage() {
alert('Hello, World!');
}
3. 基础语法
(1)变量
JavaScript中的变量必须先声明后使用。可以使用 var
、let
或 const
关键字来声明变量。
TypeScript是JavaScript类型的超集(当前我们处于ES5),它可以编译成纯JavaScript。
TypeScript给JavaScript加上可选的类型系统,给JavaScript加上静态类型后,就能将调试从运行期提前到编码期,诸如类型检查、越界检查这样的功能才能真正发挥作用。 TypeScript的开发体验远远超过以往纯JavaScript的开发体验,无需运行程序即可修复潜在bug。
TypeScript支持未来的ES6甚至ES7。在TypeScript中,可以直接使用ES6的最新特性,在编译时它会自动编译到ES3或ES5。
TypeScript可以构建大型程序,并在任何浏览器、任何计算机和任何操作系统上运行,且是开源的。
其中,var
是 ES5 中使用的关键字,let
和 const
则是 ES6 中新增的关键字。
// 使用 var 声明变量
var num = 10;
// 使用 let 声明变量
let str = 'Hello, World!';
// 使用 const 声明常量
const PI = 3.14;
(2)数据类型
JavaScript 中有六种基本数据类型:数字(Number)、字符串(String)、布尔值(Boolean)、空(Null)、未定义(Undefined)和对象(Object)。
// 数字类型
let num = 10;
// 字符串类型
let str = 'Hello, World!';
// 布尔值类型
let bool = true;
// 空类型
let empty = null;
// 未定义类型
let undef = undefined;
// 对象类型
let obj = { name: 'Tom', age: 20 };
(3)运算符
JavaScript 中常用的运算符包括算术运算符、比较运算符、逻辑运算符等。
// 算术运算符
let a = 10;
let b = 2;
console.log(a + b); // 输出 12
console.log(a - b); // 输出 8
console.log(a * b); // 输出 20
console.log(a / b); // 输出 5
// 比较运算符
let c = 10;
let d = 20;
console.log(c > d); // 输出 false
console.log(c < d); // 输出 true
console.log(c == d); // 输出 false
console.log(c != d); // 输出 true
// 逻辑运算符
let e = true;
let f = false;
console.log(e && f); // 输出 false
console.log(e || f); // 输出 true
console.log(!e); // 输出 false
(4)条件语句
JavaScript 中的条件语句包括 if...else
、switch...case
两种。
// if...else 语句
let age = 18;
if (age >= 18) {
console.log('成年人');
} else {
console.log('未成年人');
}
// switch...case 语句
let day = 3;
let weekday;
switch (day) {
case 1:
weekday = '星期一';
break;
case 2:
weekday = '星期二';
break;
case 3:
weekday = '星期三';
break;
default:
weekday = '未知';
}
console.log(weekday); // 输出 星期三
(5)循环语句
JavaScript 中的循环语句包括 for
、while
和 do...while
三种。
// for 循环
for (let i = 0; i < 10; i++) {
console.log(i);
}
// while 循环
let j = 0;
while (j < 10) {
console.log(j);
j++;
}
// do...while 循环
let k = 0;
do {
console.log(k);
k++;
} while (k < 10);
(6)函数
JavaScript 中的函数可以通过 function
关键字定义。函数可以接受任意数量的参数,并且可以返回一个值。
function add(a, b) {
return a + b;
}
console.log(add(1, 2)); // 输出 3
(7)对象Object
对象 Object
是ECMAScript 中使用最多的一个类型。我们常将数据和方法封装在对象中。
创建对象有如下两种方式,我们常用第二种。
//方式一new
var person = new Object();//生成空对象
person.name = 'Elon Musk';//设置对象的属性
person.age = 46;
person.job = 'SpaceX Rocket';
person.sayName = function(){ //设置对象的方法/函数,注意此处
console.log(this.name);
};
//方式二字面量
var person = {
name: 'Lary Page',
age: 47,
job: 'Software Engineer',
sayName: function(){ //注意此处
console.log(this.name);
}
};
console.log(person.job);
person.sayName();
虽然 Object
构造函数或对象字面量都可以用来创建单个对象,但这些方式有个明显的缺点:使用同一个接口创建很多对象,会产生大量的重复代码。为解决这个问题,人们开始使用工厂模式的一种变体。代码如下:
function createPerson(name, age, job){
var o = new Object();
o.name = name;
o.age = age;
o.job = job;
o.sayName = function(){
console.log(this.name);
};
return o;
}
var person1 = createPerson('Steve Jobs',56 , 'Inventor');
var person2 = createPerson('Linus Torvalds', 49, 'Software Engineer');
var person2 = createPerson('Julian Assange', 47, 'Ethical Hacker');
(8)数组Array
用数组的第一个位置来保存字符串,用第二位置来保存数值,用第三个位置来保存对象,以此类推。
创建数组有以下两种方法,我们常用第二种。
//方式一new
var colors = new Array('red', 'blue', 'green');
//方式二字面量
var colors = ['red', 'blue', 'green']; // 创建一个包含 3 个字符串的数组
console.log(colors[1]);
colors[3] = 'brown';
console.log(colors.length);
var names = []; // 创建一个空数组
var hyBird = [1, 2, 'haha', {firstName: 'Yong', lastName: 'Wang'}]; //不推荐!
console.log(hyBird[3].firstName);
4. DOM 操作
JavaScript 可以通过 DOM(文档对象模型)操作 HTML 元素。
<!DOCTYPE html>
<html>
<head>
<title>DOM 操作</title>
<script src="main.js"></script>
</head>
<body>
<h1>JavaScript 示例</h1>
<p id="myParagraph">这是一个段落</p>
<button onclick="changeText()">点我</button>
</body>
</html>
function changeText() {
let paragraph = document.getElementById('myParagraph');
paragraph.textContent = 'Hello, World!';
}
上面的示例演示了如何使用 getElementById
方法获取 HTML 元素,并通过 textContent
属性修改元素内容。
5. 事件处理
JavaScript 可以通过事件处理程序响应用户操作。例如,可以为按钮添加点击事件处理程序。
<!DOCTYPE html>
<html>
<head>
<title>事件处理</title>
<script src="main.js"></script>
</head>
<body>
<h1>JavaScript 示例</h1>
<button id="myButton">点我</button>
</body>
</html>
let button = document.getElementById('myButton');
button.addEventListener('click', function() {
alert('Hello, World!');
});
上面的示例演示了如何使用 addEventListener
方法为按钮添加点击事件处理程序。
总结
学习 JavaScript 的好处:
-
增强 Web 开发技能:JavaScript 是 Web 开发中最重要的一种编程语言之一,学习它可以让我们成为一个更优秀的 Web 开发人员。
-
提高职业竞争力:随着 Web 技术的不断演进,对 JavaScript 开发者的需求也在日益增加。掌握 JavaScript 可以提高在职场上的竞争力。
-
创造交互性的用户体验:JavaScript 可以用于创建动态和交互式的 Web 页面,使用户体验更加出色。
-
节省开发时间和成本:JavaScript 库和框架可以简化 Web 开发过程,减少代码量,节省开发时间和成本。
-
学会一门通用的编程语言:除了 Web 开发,JavaScript 还可以用于开发桌面应用程序、游戏、移动应用程序等多个领域。学习 JavaScript 可以让你掌握一门通用的编程语言。
-
掌握前沿技术:JavaScript 社区不断推陈出新,引入新特性和工具,学习 JavaScript 可以让你掌握前沿技术。
总之,学习 JavaScript 对于 Web 开发人员来说是必要的,它有助于提高职业竞争力、节省开发时间和成本,创造出色的用户体验,并掌握一门通用的编程语言。