javascript概述

简介

示例
JavaScript是一种动态的编程语言，广泛应用于网页开发中。
JavaScript 是一种高级的、解释执行的编程语言，主要用于构建网页和应用的交互界面。
作为Web开发的核心技术之一，它与HTML和CSS共同协作。

HTML负责定义网页的内容结构

CSS处理样式和布局

JavaScript则控制网页的行为和交互

主要功能

事件处理

JavaScript能够响应用户操作，如点击、滚动、键入等，使得网页可以交互式地响应用户输入。

操作DOM

JavaScript可以操作HTML和CSS，改变网页内容、结构和样式，实现动态的页面效果。

JSON处理

作为网络传输中使用的主要数据格式，JavaScript原生支持JSON格式的解析和输出。

异步交互

通过回调函数、Promises、async/await等机制，JavaScript能够执行非阻塞的异步编程，特别适合处理网络请求和文件操作。

主要特点

动态类型（弱类型）

JavaScript是一种动态类型语言，变量的类型是在运行时确定的，而不是在编译时确定的。这使得JavaScript具有很高的灵活性，可以在不显式声明类型的情况下操作数据。

函数的灵活性

在JavaScript中，函数是一等公民，可以像其他变量一样被传递和操作。这意味着函数可以作为参数传递给其他函数，作为函数的返回值，甚至可以在函数内部定义函数。

应用环境多样性

JavaScript广泛支持所有现代浏览器，除了在浏览器中运行，JavaScript还可以在服务器端（使用Node.js）、移动设备（使用React Native）和桌面应用程序（使用Electron）中运行，这使得JavaScript成为全栈开发的理想选择。

模块化和丰富的库

自ECMAScript 2015（ES6）引入模块化语法以来，JavaScript支持使用import和export关键字来实现模块化开发。这有助于代码的组织和重用，使得大型应用程序更加可维护。JavaScript拥有丰富的标准库，并且有大量的第三方库和框架可供选择，如React、Vue.js、Angular、Express、Lodash等，极大地扩展了JavaScript的功能和应用场景。

javascript的引入方式

1.<script>标签引入外部js文件（外链式）

将JavaScript代码保存为一个独立的文件，并通过src属性链接到HTML文件中。
适用于大型项目，可以提高代码的可读性、可维护性和复用性。
需要单独加载外部脚本文件，增加了额外的网络请求。在初次加载时可能会有一定的延迟。


<!--相对路径-->
<!--JS文件和html在同目录下-->
<script src="main.js"></script>
<!--JS文件在html的父目录下-->
<script src="../js/main.js"></script>
<!--JS文件在html的子目录下-->
<script src="js/main.js"></script>

<!--绝对路径-->
<script src="http://www.cctv.com/js/main.js"></script>
<script src="/js/main.js"></script>

推迟加载：整个页面完全加载后，此脚本执行。


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

异步加载：在页面加载过程中已开始异步执行。


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

2.行内引入（内联式）

适用于非常简单的脚本，或者当脚本与特定的HTML元素紧密相关时。
会导致HTML和JavaScript代码混杂在一起，不利于代码的可读性和维护性。


<button type='button' onclick="javascript:alert('hello');">点击按钮</button>

3.页内代码块（嵌入式）

使用<script>标签将JavaScript代码嵌入到HTML页面中，可以放置在<head>或<body>中。
适用于需要在单个HTML文件中包含少量JavaScript代码的情况。
随着项目规模的增大，这种方式会导致HTML和JavaScript代码交织在一起，降低代码的可读性和可维护性。


<script type='text/javascript'>
function myfun{
  ......
  ......
}
</script>

或
<script language='javascript'>
<script>

4.动态加载js文件

使用JavaScript的createElement和appendChild方法来动态创建和插入script标签。


<script>
var script = document.createElement('script');
script.src = 'script.js';
document.body.appendChild(script);
</script>

5.模块引用

使用import引用另一js文件export的变量、函数、对象等。
import引用时，需要type='module'
示例：点击查看

假设，有other.js文件，代码如下


//暴露函数
export function add(a, b) {
    return a + b;
}
//暴露变量
const movieName = "哪吒";
export {movieName}

在html文件里直接引用other.js文件的部分作为module


<script type="module">
import { add, movieName } from './other.js';	//注意，当前目录用./，不可省略
// 使用引入的函数
const result = add(5, 6);
console.log("5+6="+result); 
//使用引入的变量
console.log("电影名为:"+movieName);
</script>

或在js文件里引用
如main.js文件引用了other.js文件的部分内容


import { add, movieName } from './other.js';	//注意，当前目录用./，不可省略
// 使用引入的函数
const result = add(5, 6);
console.log("5+6="+result); 
//使用引入的变量
console.log("电影名为:"+movieName);

html文件里加载main.js为模块


<script type="module" src="main.js"></script>

ES5和ES6

ECMAScript是一种由Ecma国际通过ECMA-262标准化的脚本程序设计语言。它在万维网上应用广泛，通常被称为JavaScript或JScript。
ECMAScript是一种基于对象的脚本语言，设计初衷是作为Web脚本语言，支持Web页面的动态表现和服务器端计算能力‌

ES5简介

ES5全称“ECMAScript 5”，也被称为ECMAScript 2009，是ECMAScript标准的第五版，于2009年正式发布。
ES5的主要目标是通过对现有JavaScript方法添加语句和原生ECMAScript对象来实现标准化。
ES5新增了许多功能，包括：

‌严格模式‌：通过“use strict”指令启用，限制一些用法。
‌数组方法‌：如every、some、forEach、filter、indexOf、lastIndexOf、isArray、map、reduce、reduceRight等。
‌函数方法‌：如Function.prototype.bind。
‌字符串方法‌：如String.prototype.trim。
‌日期方法‌：如Date.now。
‌对象方法‌：如Object.getPrototypeOf、Object.create、Object.getOwnPropertyNames等‌。

ES6简介

ES6全称“ECMAScript 6”，也称为ES2015，于2015年6月正式发布。
ES6的目标是使得JavaScript语言能够用于编写复杂的大型应用程序，成为企业级开发语言。
相对于ES5，ES6更加简洁，提高了开发效率，并提供了许多新特性：
‌‌块级作用域‌：引入了let和const关键字。
‌‌对象字面量的属性赋值简写‌：例如，var obj = {name: "John"}可以简写为{name: "John"}。
‌‌模板字符串‌：使用反引号（`)包围字符串，支持多行字符串和表达式嵌入。
‌‌解构赋值‌：允许从数组或对象中提取数据。
‌‌默认参数值‌：函数参数可以设置默认值。
‌‌箭头函数‌：提供了一种更简洁的函数写法。
‌‌Promise‌：用于异步编程的新对象。
‌‌Set和Map数据结构‌：提供了新的数据结构来处理集合数据‌