前端开发基础(3)—JavaScript

1.3JavaScript

1.3.1 JavaScript概述

1.什么是JavaScript

JavaScript是一种广泛用于Web开发的编程语言,它可以实现动态网页效果、交互式用户界面和数据验证等功能。JavaScript是一种解释型语言,不需要编译器,而是由浏览器直接解释执行。

JavaScript最初由Netscape公司的Brendan Eich于1995年创建,当时它被称为LiveScript。后来,它被重命名为JavaScript,并在1996年被提交给ECMA(欧洲计算机制造商协会)进行标准化。因此,JavaScript有时也被称为ECMAScript。

JavaScript可以用于客户端和服务器端开发。在客户端,JavaScript通常与HTML和CSS结合使用,用于创建交互式Web应用程序和用户界面,比如表单验证、页面交互效果、动画和游戏等。在服务器端,JavaScript可以使用Node.js等平台进行开发,处理业务逻辑、数据存储和处理等任务。

2.JavaScript的特点

JavaScript的特点包括:

  1. 跨平台性:JavaScript可以在多个操作系统和不同的浏览器上运行,不需要任何修改。

  2. 与HTML和CSS集成:JavaScript通常与HTML和CSS结合使用,用于创建交互式Web应用程序和用户界面。

  3. 前端脚本语言:JavaScript主要用于前端开发,可以实现动态网页效果、交互式用户界面和数据验证等功能。

  4. 解释型语言:JavaScript是一种解释型语言,不需要编译器,而是由浏览器直接解释执行。

  5. 客户端脚本语言:JavaScript在客户端执行,可以响应用户事件如鼠标点击,键盘输入等。

  6. 面向对象编程:JavaScript支持面向对象编程,可以使用类、继承、封装和多态等机制。

  7. 动态类型:JavaScript是一种动态类型语言,变量可以随时改变其数据类型。

  8. 支持闭包:JavaScript支持闭包机制,使得函数可以访问其外部作用域中的变量和参数。

  9. 可扩展性:JavaScript支持插件和框架,可以通过第三方库和工具进行扩展和增强功能。

总之,JavaScript是一种非常灵活、易学易用的语言,能够帮助开发人员快速地构建交互式Web应用程序和用户界面。

3.JavaScript书写位置

JavaScript可以写在HTML文档中的

  1. 内联JavaScript

内联JavaScript是指将JavaScript代码直接写在HTML文档中的<script>标签中。这种方法最简单,适合于处理少量的JavaScript代码。

例如:


<!DOCTYPE html>

<html>

  <head>

    <title>Inline JavaScript Example</title>

  </head>

  <body>

    <script>

      alert("Hello, world!");

    </script>

  </body>

</html>

在这个例子中,JavaScript代码被包含在<script>标签中,并在浏览器加载该页面时直接执行。

  1. 外部JavaScript文件

外部JavaScript文件是指将JavaScript代码存放在一个独立的.js文件中,并通过<script>标签的src属性引用该文件。这种方法适用于处理大量的JavaScript代码,可以使HTML文档更加清晰和易于维护。

例如:


<!DOCTYPE html>

<html>

  <head>

    <title>External JavaScript Example</title>

    <script src="scripts.js"></script>

  </head>

  <body>

    <h1>Hello, world!</h1>

  </body>

</html>

在这个例子中,JavaScript代码被放在名为"scripts.js"的文件中,而不是在HTML文档中。该文件通过<script>标签的src属性引用,当浏览器加载该页面时,会自动下载并执行该文件。

  1. 内部JavaScript

内部JavaScript是指将JavaScript代码写在HTML文档的<head><body>标签中间。这种方式比较灵活,可以根据需要在不同的标签之间编写JavaScript代码。

例如:


<!DOCTYPE html>

<html>

  <head>

    <title>Internal JavaScript Example</title>

    <script>

      function sayHello() {

        alert("Hello, world!");

      }

    </script>

  </head>

  <body>

    <button onclick="sayHello()">Click me</button>

  </body>

</html>

在这个例子中,JavaScript代码被放在<head>标签中,并定义了一个名为"sayHello"的函数。该函数可以通过onclick事件绑定到按钮上,在用户点击按钮时触发。

1.3.1JavaScript基础语法

JavaScript的基础语法包括以下内容:

  1. 变量声明和赋值

使用var关键字声明变量,例如:


var x;

可以同时初始化一个变量:


var y = 5;

变量的值可以随时改变:


y = 10;

  1. 数据类型

JavaScript中有多种数据类型,包括数字、字符串、布尔值、数组、对象和null等。


var num = 10; // 数字

var str = "hello"; // 字符串

var flag = true; // 布尔值

var arr = [1, 2, 3]; // 数组

var obj = {name: "Tom", age: 18}; // 对象

var nothing = null; // 空

  1. 运算符

JavaScript支持各种运算符,包括算术运算符、比较运算符、逻辑运算符等。


var x = 5, y = 10;

var z = x + y; // 加法

var k = x > y; // 大于运算

var b = x || y; // 或运算

  1. 函数定义和调用

函数在JavaScript中也是一种数据类型,可以通过函数定义来创建并重复使用。函数可以带有参数,并返回结果。


function add(x, y) {

  return x + y;

}



var result = add(3, 4); // 调用函数

  1. 条件语句

JavaScript中的条件语句包括if/elseswitch/case等。


var x = 5;

if (x > 10) {

  console.log("x is greater than 10");

} else {

  console.log("x is less than or equal to 10");

}

alert()是一个JavaScript内置的函数,用于弹出一个警告框,显示一条消息和一个确定按钮。它可以在网页中向用户显示一些信息或提示,并等待用户点击确认按钮后继续执行程序。

alert()函数的语法如下:


alert(message);

其中,message参数是要显示的消息内容,可以是字符串、数字或表达式等。当浏览器执行到alert()函数时,会弹出一个警告框,将message参数的内容显示在警告框中。用户可以点击“确定”按钮关闭警告框。

以下是一个简单示例,使用alert()函数在网页中弹出一条消息:


<!DOCTYPE html>

<html>

  <head>

    <title>Alert Example</title>

  </head>

  <body>

    <script>

      alert("Hello, world!");

    </script>

  </body>

</html>

在这个例子中,在<script>标签中调用alert()函数,将字符串"Hello, world!"作为参数传递给它。当浏览器加载该页面时,会弹出一个警告框,将该字符串显示在其中。

  1. 循环语句

JavaScript支持多种循环语句,包括forwhiledo/while等。


for (var i = 0; i < 5; i++) {

  console.log(i);

}



var j = 0;

while (j < 5) {

  console.log(j);

  j++;

}



var k = 0;

do {

  console.log(k);

  k++;

} while (k < 5);

这些是JavaScript的基础语法。掌握这些语法后,可以开始构建更复杂的JavaScript程序。

1.3.2 JavaScript事件处理

JavaScript事件处理是一种编程技术,用于在Web页面中对用户行为做出响应。事件可以是用户的鼠标单击、键盘输入等操作,也可以是Web浏览器中发生的其他事件,如页面加载完成。 以下是一些JavaScript事件处理的基本步骤:

  1. 选取DOM元素:使用Document Object Model(DOM)API来选取要操作的HTML元素。

  2. 绑定事件处理函数:使用addEventListener()方法将事件处理函数与选取的元素绑定起来。

  3. 编写事件处理函数:编写一个JavaScript函数来定义所需的行为或响应。例如,可以向元素添加可见样式、更新页面上的文本或执行其他JavaScript代码。

  4. 处理事件:当事件被触发时,浏览器会调用绑定的事件处理函数,执行所需的操作。

下面是一个示例,演示如何使用JavaScript来处理按钮单击事件:


<!DOCTYPE html>

<html>

<head>

 <title>JavaScript Event Handling Example</title>

</head>

<body>

 <button id="myButton">Click Me!</button>



 <script>

  // 选取按钮元素

  var button = document.getElementById("myButton");



  // 绑定事件处理函数

  button.addEventListener("click", function(event) {

   // 按钮被单击时执行此函数

   alert("Button was clicked!");

  });

 </script>

</body>

</html>

在这个例子中,我们首先选取了一个按钮元素,然后使用addEventListener()方法将一个匿名函数与按钮的单击事件绑定起来。当按钮被单击时,浏览器会调用这个函数,并在屏幕上显示一个警告框。

这只是JavaScript事件处理的一个简单示例。通过使用各种不同的事件类型和处理函数,可以创建更复杂的交互体验。

1.3.3 JavaScript的对象

在JavaScript中,对象是一种非常重要的数据类型,它允许我们组织和存储相关的数据和功能。对象可以包含属性和方法,并且可以通过点符号或方括号来访问它们。

以下是创建JavaScript对象的几种常见方式:

  1. 对象字面量:使用花括号 {} 创建一个新对象,并在其中定义属性和方法。

var person = {

  name: 'John',

  age: 30,

  sayHi: function() {

    console.log('Hi, my name is ' + this.name);

  }

};

  1. 使用构造函数:使用构造函数创建新对象。构造函数是一个特殊的函数,用于初始化新对象的属性和方法。

function Person(name, age) {

  this.name = name;

  this.age = age;

  this.sayHi = function() {

    console.log('Hi, my name is ' + this.name);

  };

}



var person = new Person('John', 30);

  1. 使用Object.create()方法:使用Object.create()方法创建一个新对象,并将其原型设置为另一个对象。这种方式通常用于创建继承关系。

var personProto = {

  sayHi: function() {

    console.log('Hi, my name is ' + this.name);

  }

};



var person = Object.create(personProto);

person.name = 'John';

person.age = 30;

无论使用哪种方式,创建的对象都可以使用点符号或方括号来访问其属性和方法。例如,在上面示例中,我们可以使用 person.name 或者 person['name'] 来获取 “John”。

对象在JavaScript中非常灵活,可以使用它们来表达几乎任何类型的数据和功能。它们是JavaScript编程的基础之一,值得花时间深入学习。

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值