JavaScript 入门教程

JavaScript是一门非常基础和重要的编程语言,对于Website的交互功能都需要依赖它。本教程将通过简单的图文向JavaScript初学者介绍基本语法和使用方法,让大家快速上手。

JavaScript简介

JavaScript一种轻量级的编程语言,用于向HTML页面添加交互性。
JavaScript代码直接插入HTML页面,或者通过扩展名为.js的外部JS文件引入。
JavaScript可以获取页面元素,操作DOM,也可以响应用户操作等,实现交互效果。
JavaScript既可以在浏览器运行,也可以通过Node.js等环境运行在服务器端。

一个简单的JavaScript示例:

1
2
3

<script>
alert("Hello World!");
</script>

JavaScript特点

JavaScript是一门非常重要的编程语言,它具有以下关键特点:

JavaScript是一种解释执行的脚本语言,用于向网页添加交互性和动态效果。
JavaScript可以直接嵌入HTML页面或通过外部文件引用,并由浏览器解析执行。
JavaScript可以访问和修改网页的DOM结构,响应用户行为,实现交互逻辑。
JavaScript有变量、函数、循环、判断等基础语法,还有面向对象编程能力。
JavaScript可以操作网页各种元素、HTTP请求、事件处理等,实现复杂效果。
浏览器提供了调试控制台,可以交互执行和测试JavaScript代码。
JavaScript是单线程执行,有异步编程能力,可以避免阻塞线程。
Node.js等 Runtime 使用 JavaScript 语言编写应用程度,实现服务端功能。
JavaScript拥有大量框架和丰富生态,能简化复杂应用的开发。
JavaScript是每一个Web开发者必学的基础语言,也是目前最流行的编程语言之一。

掌握JavaScript对于Web开发极为重要,它赋予网页交互性和动态效果,是一个功能强大和不可或缺的编程语言。

JavaScript基础语法

JavaScript的基础语法包括变量、数据类型、运算符、函数、流程控制等方面。

变量

使用var、let和const关键字声明变量:

1 2	let name = 'John'; const age = 20;

数据类型

JavaScript的数据类型包括:

Number:数字类型
String:字符串类型
Boolean:布尔类型,true或false
null:空值
undefined:未定义
Object:对象类型

可以使用typeof操作符检查变量类型:

1 2	let num = 1; console.log(typeof num); // 'number'

运算符

赋值运算符、算术运算符、比较运算符、逻辑运算符等,例如:

let a = 1;
let b = 2;

let c = a + b; // 算术运算符
let d = a >= b; // 比较运算符

函数

使用function关键字定义函数:

1
2
3

function add(a, b) {
  return a + b;
}

条件语句

使用if、else、else if控制代码流程:

if(a > b) {
  // dosomething
} else if(a == b) {
  // dosomething
} else {
  // dosomething
}

循环语句

for循环、while循环、forEach等:

1
2
3

for(let i = 0; i < 5; i++) {
  // dosomething
}

DOM和BOM

DOM (Document Object Model) 把文档表示为节点树。

使用方法如getElementsByTagName获取节点:

1	let elems = document.getElementsByTagName('p');

修改节点属性,如innerHTML:

1	elems[0].innerHTML = 'New paragraph';

添加事件监听:

1
2
3

btn.addEventListener('click', function(){
  // do something
});

BOM (Browser Object Model) 提供独立于内容的对象,如:

1	let url = window.location.href; // 获取页面URL

JavaScript数组

创建数组:

1	let fruits = ['Apple', 'Banana'];

数组常用方法:

1 2	fruits.push('Orange'); // 末尾添加元素 fruits.pop(); // 删除末尾元素

数组遍历:

1
2
3

fruits.forEach(fruit => {
  console.log(fruit);
});

JavaScript对象

对象表示一组无序的相关属性和方法。

创建对象:

let person = {
  name: 'John',
  age: 20
};

构造函数:

function Person(name, age) {
  this.name = name;
  this.age = age;
}

浏览器本地存储

sessionStorage 和 localStorage API可以在浏览器保存键值对。

// 保存数据
localStorage.setItem('key', 'value');

// 获取数据
let data = localStorage.getItem('key');

AJAX

原生AJAX请求:

let xhr = new XMLHttpRequest();
xhr.open('GET', '/data.json');
xhr.onload = function() {
  // todo
}
xhr.send();

错误处理

try/catch 捕获异常:

try {
  // 可能出错代码
} catch(error) {
  console.log(error);
}

在HTML中使用JavaScript

创建一个HTML文件,通过<script>标签引入JavaScript:

<!DOCTYPE html>
<html>
<body>

<script>
function sayHi() {
  alert("Hi");
}
</script>

</body>
</html>

使用<script>标签也可以引入外部的js文件:

1	<script src="main.js"></script>

页面中可以通过onclick等给元素绑定JavaScript事件:

1	<button onclick="sayHi()">Click me</button>

浏览器调试

大多数浏览器都提供了调试控制台,可以实时测试JavaScript代码:

通过Console我们可以交互式地运行JavaScript语句。

一些简单示例

输出内容到页面:
1
document.write("Hello World!");
弹出警告框:
1
alert("Warning!");
控制台输出:
1
console.log("Hello Console!");
等待用户点击确认:
1
confirm("Continue?");
提取用户输入:
1
prompt("Your name:");

通过一些简单的示例可以让JavaScript初学者快速上手,立即在页面看到结果。接下来就可以针对交互功能不断深入学习了。

常见使用示例

这里给出一些JavaScript的常见使用示例:

操作DOM

// 获取元素
let div = document.querySelector('div');

// 改变样式
div.style.color = 'red';

// 添加事件处理
div.addEventListener('click', function(){
  alert('Div clicked');
});

AJAX请求

// 使用Fetch API发送异步请求
fetch('/api/users')
  .then(res => res.json())
  .then(data => {
    // 处理返回数据
  });

表单验证

// 用户名验证
function validateUsername(){
  let username = document.getElementById('username').value;
  if(username.length < 6){
    alert('用户名不可少于6位');
    return false;
  }
}

动画效果

// 使用setInterval实现动画
let id = setInterval(frame, 100);

function frame() {
  // 每100毫秒执行一次
}

网页特效

// 滚动触发固定导航栏
window.addEventListener('scroll', function() {
  let navbar = document.getElementById('navbar');
  if(window.scrollY > 100){
    navbar.classList.add('fixed');
  } else {
    navbar.classList.remove('fixed');
  }
})