前端开发基础（3）—JavaScript

最新推荐文章于 2024-06-08 23:30:00 发布

猫猫不喝茶

最新推荐文章于 2024-06-08 23:30:00 发布

阅读量1.6k

点赞数

分类专栏： javaweb考试一个专栏就1够了文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/2301_77162163/article/details/131178306

版权

javaweb考试一个专栏就1够了专栏收录该内容

12 篇文章 2 订阅

订阅专栏

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的特点包括：

跨平台性：JavaScript可以在多个操作系统和不同的浏览器上运行，不需要任何修改。
与HTML和CSS集成：JavaScript通常与HTML和CSS结合使用，用于创建交互式Web应用程序和用户界面。
前端脚本语言：JavaScript主要用于前端开发，可以实现动态网页效果、交互式用户界面和数据验证等功能。
解释型语言：JavaScript是一种解释型语言，不需要编译器，而是由浏览器直接解释执行。
客户端脚本语言：JavaScript在客户端执行，可以响应用户事件如鼠标点击，键盘输入等。
面向对象编程：JavaScript支持面向对象编程，可以使用类、继承、封装和多态等机制。
动态类型：JavaScript是一种动态类型语言，变量可以随时改变其数据类型。
支持闭包：JavaScript支持闭包机制，使得函数可以访问其外部作用域中的变量和参数。
可扩展性：JavaScript支持插件和框架，可以通过第三方库和工具进行扩展和增强功能。

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

3.JavaScript书写位置

JavaScript可以写在HTML文档中的

内联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>标签中，并在浏览器加载该页面时直接执行。

外部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属性引用，当浏览器加载该页面时，会自动下载并执行该文件。

内部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的基础语法包括以下内容：

变量声明和赋值

使用var关键字声明变量，例如：


var x;

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


var y = 5;

变量的值可以随时改变：


y = 10;

数据类型

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; // 空

运算符

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


var x = 5, y = 10;

var z = x + y; // 加法

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

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

函数定义和调用

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


function add(x, y) {

  return x + y;

}



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

条件语句

JavaScript中的条件语句包括if/else和switch/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!"作为参数传递给它。当浏览器加载该页面时，会弹出一个警告框，将该字符串显示在其中。

循环语句

JavaScript支持多种循环语句，包括for、while和do/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事件处理的基本步骤：

选取DOM元素：使用Document Object Model（DOM）API来选取要操作的HTML元素。
绑定事件处理函数：使用addEventListener()方法将事件处理函数与选取的元素绑定起来。
编写事件处理函数：编写一个JavaScript函数来定义所需的行为或响应。例如，可以向元素添加可见样式、更新页面上的文本或执行其他JavaScript代码。
处理事件：当事件被触发时，浏览器会调用绑定的事件处理函数，执行所需的操作。

下面是一个示例，演示如何使用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对象的几种常见方式：

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


var person = {

  name: 'John',

  age: 30,

  sayHi: function() {

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

  }

};

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


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);

使用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
评论
前端开发基础（3）—JavaScript

1.什么是JavaScriptJavaScript是一种广泛用于Web开发的编程语言，它可以实现动态网页效果、交互式用户界面和数据验证等功能。JavaScript是一种解释型语言，不需要编译器，而是由浏览器直接解释执行。JavaScript最初由Netscape公司的Brendan Eich于1995年创建，当时它被称为LiveScript。后来，它被重命名为JavaScript，并在1996年被提交给ECMA（欧洲计算机制造商协会）进行标准化。
复制链接

扫一扫