JS入门（第三周预习博客）

1.JavaScript简单介绍

  1.JS的来源

首先我们来说一下JS的来源：

        JavaScript起源于1995年，主要由网景公司（Netscape）的程序员Brendan Eich（布兰登·艾奇）发明。最初，这门语言被命名为Mocha，随后在同年9月更名为LiveScript。然后，在1995年12月，Netscape公司与Sun公司（Java语言的发明者）达成协议，后者允许将这种语言叫做JavaScript。这一命名决策有助于借助Java语言的声势来推广新语言。

        JavaScript最初是为了满足在Navigator浏览器中嵌入一种处理网页上用户交互的脚本语言的需求而设计的。随着互联网的兴起和万维网的发展，JavaScript逐渐崭露头角，并成为了处理网页中前端验证的重要工具，用于检查用户输入的内容是否符合一定的规则，比如用户名的长度、密码长度、密码格式等。

        JavaScript是一种具有函数优先的轻量级、解释型或即时编译型的编程语言。尽管其语法风格与Self及Scheme更为接近，但由于Netscape与Sun的合作，其外观与Java相似，因此被命名为JavaScript。JavaScript的组成部分主要包括ECMAScript（语言的核心部分）、文档对象模型（DOM，用于操作网页文档）和浏览器对象模型（BOM，用于与浏览器进行交互）。这些组件共同构成了JavaScript的基础，并使其能够在网页上实现复杂的交互和功能。

  2.JS的组成部分

1. ECMAScript：这是JavaScript的核心部分，描述了该语言的语法和基本对象。它定义了语言的基础结构，包括变量、数据类型、运算符、控制结构（如if语句和循环）、函数等。
2. 文档对象模型（DOM）：DOM是网页文档操作标准。它允许程序和脚本能够动态地访问和更新文档的内容、结构和样式。通过DOM，JavaScript可以读取和修改HTML元素，响应用户交互，以及创建和更新页面内容。
3. 浏览器对象模型（BOM）：BOM提供了与浏览器进行交互的方法和接口。它包含了与浏览器窗口和框架、浏览器导航、浏览器历史和书签、屏幕和窗口大小、定位等相关的对象和方法。通过BOM，JavaScript可以控制浏览器窗口和标签页的行为，以及访问浏览器提供的某些功能和信息。

除了上述三个主要组成部分外，JavaScript还包括：

• 对象：JavaScript是一种基于对象的语言，具有很多内置对象，如String、Number、Boolean、Array、Date、Math等，以及用户自定义的对象。这些对象都有属性和方法，可以用来执行各种任务。
• 函数：函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。它们可以封装特定的功能，并在需要时调用。
• 事件处理：JavaScript具有事件驱动的特性，可以对用户输入（如鼠标点击、键盘输入等）和页面加载等事件作出反应。通过事件处理，可以实现交互式的网页应用。

  3.JS的特性

        

1. 解释型脚本语言：JavaScript是一种解释型的脚本语言，这意味着在程序的运行过程中，代码会逐行被解释并执行，与C、C++等需要先编译再执行的语言不同。
2. 基于对象：JavaScript是一种基于对象的脚本语言，它不仅可以创建对象，也能使用现有的对象。这种基于对象的特性使得JavaScript能够更高效地处理复杂的数据结构和交互。
3. 设计简单紧凑：JavaScript的设计简单紧凑，采用的是弱类型的变量类型，对使用的数据类型未做出严格的要求，使得编程更为灵活和便捷。
4. 动态性：JavaScript具有动态性，能够在运行时改变代码的行为，这对于实现交互式和响应式的网页应用非常重要。
5. 跨平台性：JavaScript不依赖于特定的操作系统，它只需要浏览器的支持就可以运行，这使得JavaScript成为开发网页应用的重要工具。

2.数据类型

        首先我们来说一下数据类型共分为数字型，字符串类型，数组，对象类型等等。

        我们就简单介绍一下这几类基础版的内容，高级教程这篇JS入门便不展开了，接下来的博客再详细展开高级内容。

var length = 7;                             // 数字
var lastName = "Gates";                      // 字符串
var cars = ["Porsche", "Volvo", "BMW"];         // 数组
var x = {firstName:"Bill", lastName:"Gates"};    // 对象

        首先我们可以看到，在上面四种类型已经分别写出了基础语句,然后我们介绍一下数据类型用处，先看下面的一串代码。

        因为911和Porsche看起来类型并不相同，当两者同时出现时我们应该怎么处理这个，不同的数据类型区分出现了问题，除了我们把相同类型的数据放在一起进行运算时，我们还有一些隐式的规则，遵从从左向右之外，911在和字符串类型的"Porsche"相加时，911会转变成字符串类型，因此，就会变成上图浏览器中内容，但是从左向右运算也是一个规则，

        var x = 911 + 7 + "Porsche";

        918Porsche

        var x = "Porsche" + 911 + 7;

        Porsche9117

        遵从从左向右的规律，第一个仍然是两个数字类型相加在变成字符串类型所以结果会是918Porsche，而第二个代码因为字符串类型在其那面，所以就会出现911和7均是字符串类型，因此一般不同类型的内容相加的顺序不同，出现的结果就会不同。

JavaScript 拥有动态类型

        简单来说就是变量可以被赋给任意值，例如：

        var x;

        var x=7;

        var x=m;

        x作为变量可以被赋予不同的类型值。（但是如果就是对一个变量赋予不同的值，输出结果是是只看最后一次变量所给赋予的值）

JavaScript 字符串值

        字符串（或文本字符串）是一串字符（比如 "Bill Gates"）。

        字符串被引号包围。您可使用单引号或双引号。

        并且JavaScript 只有一种数值类型。写数值时用不用小数点均可。

        因为上文说到了JS是动态类型的，所以你可以给某个变量赋任意的值，也就是说并不需要考虑整数还是小数等等。

  JavaScript 数组

        JavaScript 数组用方括号书写。

        数组的项目由逗号分隔。

        下面的代码声明（创建）了名为 cars 的数组，包含三个项目（汽车品牌）：

        

        var cars = ["Porsche", "Volvo", "BMW"];

由于数组数字是从0开始的，也就是说cars[0]里面的内容就是Porsche。

这张图中的代码便是对象类型，我们可以看到，他和数组类型不同的一点就是用的是花括号。其他的如图中代码所见较为清晰。

在了解一些基本的变量类型，如果我们拿不准那到底是什么变量类型，那我们应该怎么做，我们可以用到typeof,这个可以确定变量的类型，但是在这里面有一个特殊，因为数组返回值是object，也就是说明他和对象类型返回值是一致的。，还有一个bug就是null它的返回类型是对象类型，这哥也是我们需要关注的地方。

3.函数

1.函数定义，函数参数，函数调用

JavaScript 函数是通过 function 关键词定义的，让我们看下面一个简单的代码：

我们可以看到首先这个x变量是被输出的，而所对应的函数的代码在下面，经过做过一圈代码，就是将真实的值带入形式参数中，也就能获得函数的值。

var x = function (a, b) {return a * b};

也可以这样写，这样出现的值和上面都是12。

在变量中保存函数表达式之后，此变量可用作函数看下面的代码：

由此图中我们可以看到变量x最后也可以像是一个函数一样使用，但是必须是在自身被一个函数赋值之后

<p id="demo"></p>

<script>
var x = function (a, b) {return a * b};
document.getElementById("demo").innerHTML = x(4, 3);
</script>
 

<p id="demo"></p>

<script>
var myFunction = new Function("a", "b", "return a * b");
document.getElementById("demo").innerHTML = myFunction(4, 3);
</script>
像这两种都是和上面相同的结果。

看到这张图片时，是不是有点疑惑，这叫自调用函数，那么为什么这么写，看下面描述()的两个作用。

在 JavaScript 中，() 并不是类的表示。在您提供的代码中，() 有两个用途：

1. 定义匿名函数：第一个 () 用于包围函数定义，从而将其作为一个函数表达式，而不是函数声明。这样，您可以立即调用这个函数，而不必先给它命名。

2. 立即调用函数：第二个 () 用于立即调用前面定义的函数。这使得函数在定义后立即执行，从而形成一个立即调用的函数表达式（IIFE）。

3. 由此我们可以知道他立即执行并且是函数表达

4. 函数是对象：  JavaScript 中的 typeof 运算符会为函数返回 "function"。

   1. 但是最好是把 JavaScript 函数描述为对象。

      JavaScript 函数都有属性和方法。

      arguments.length 会返回函数被调用时收到的参数数目                                <script>function myFunction(a, b)                                                                         {         return arguments.length;}                                                                                                   document.getElementById("demo").innerHTML =myFunction(4,3);       </script>

        toString() 方法以字符串返回函数

        还有一个箭头函数和const函数

                        

                <p id="demo"></p>

                <script>
                const x = (x, y) => x * y;
                document.getElementById("demo").innerHTML = x(5, 5);
                </script>

                <p id="demo"></p>

                <script>
                const x = (x, y) => { return x * y };
                document.getElementById("demo").innerHTML = x(5, 5);
                </script>

                接下来我们简单介绍函数参数

函数参数（parameter）指的是在函数定义中列出的名称。

函数参数（argument）指的是传递到函数或由函数接收到的真实值。

2函数arguments 对象

JavaScript 函数有一个名为 arguments 对象的内置对象。

arguments 对象包含函数调用时使用的参数数组。

让我们看一下代码

<p id="demo"></p>

<script>
function findMax() {
  var i;
  var max = -Infinity;
  for(i = 0; i < arguments.length; i++) {
    if (arguments[i] > max) {
      max = arguments[i];
    }
  }
  return max;
} 
document.getElementById("demo").innerHTML = findMax(4, 5, 6);
</script>

这个便是简单使用arguements。

参数通过值传递

函数调用中的参数（parameter）是函数的参数（argument）。

JavaScript 参数通过值传递：函数只知道值，而不是参数的位置。

如果函数改变了参数的值，它不会改变参数的原始值。

参数的改变在函数之外是不可见的。

同样对象最终传递的也是值。

调用也是函数中极为重要的一部分，

今天我们来说一下三种调用函数的方法：

1.通过函数形式来调用

<p id="demo"></p>

<script>
function myFunction(a, b) {
  return a * b;
}
document.getElementById("demo").innerHTML = myFunction(10, 2); 
</script>

在 HTML 中，默认全局对象是 HTML 页面本身，所有上面的函数“属于”HTML 页面。

在浏览器中，这个页面对象就是浏览器窗口。上面的函数自动成为一个窗口函数。

作为方法来调用函数

在 JavaScript 中，您可以把函数定义为对象方法。

var myObject = {
    firstName:"Bill",
    lastName: "Gates",
    fullName: function () {
        return this.firstName + " " + this.lastName;
    }
}
myObject.fullName();    

如果函数调用的前面是 new 关键字，那么这是一个构造函数调用。

它看起来像你创建一个新的函数，但由于 JavaScript 函数是对象，你实际上创建一个新对象

function myFunction(arg1, arg2) {
    this.firstName = arg1;
    this.lastName  = arg2;
}

// 创建了一个新对象：
var x = new myFunction("Bill", "Gates");
x.firstName;  

2.函数call,函数Apply,函数绑定，闭包

                

在 JavaScript 中，函数是对象的方法。

如果一个函数不是 JavaScript 对象的方法，那么它就是全局对象的函数

var person = {
    firstName:"Bill",
    lastName: "Gates",
    fullName: function () {
        return this.firstName + " " + this.lastName;
    }
}
person.fullName();	

就看着一段代码，因为function他不是person对象的方法，那么他就是全局对象的函数，也就是说就应该输出"Bill Gates"。

 call() 方法是预定义的 JavaScript 方法。

   它可以用来调用所有者对象作为参数的方法。

   通过 call()，您能够使用属于另一个对象的方法

我们接下来在看代码：

        

var person = {
    fullName: function() {
        return this.firstName + " " + this.lastName;
    }
}
var person1 = {
    firstName:"Bill",
    lastName: "Gates",
}
var person2 = {
    firstName:"Steve",
    lastName: "Jobs",
}
person.fullName.call(person1); 

看这个最后是预定义了person1的方法，然后将person1的方法供person里面的函数使用。

接下来我们看的是有参函数的call（）方法，如图，同样相差不大。

apply（）和call（）作用相差不大。但是二者有所不同

call() 方法分别接受参数。

apply() 方法接受数组形式的参数

在数组上模拟 max 方法

您可以使用 Math.max() 方法找到（数字列表中的）最大数字

JavaScript 严格模式

在 JavaScript 严格模式下，如果 apply() 方法的第一个参数不是对象，则它将成为被调用函数的所有者（对象）。在“非严格”模式下，它成为全局对象。

在让我们看一下

函数借用（Function Borrowing）

通过使用 bind() 方法，一个对象可以从另一个对象借用一个方法。

下面的例子创建了 2 个对象（person 和 member）。

member 对象借用了 person 对象的 fullname 方法：

const person = {
  firstName:"Bill",
  lastName: "Gates",
  fullName: function () {
    return this.firstName + " " + this.lastName;
  }
}

const member = {
  firstName:"Hege",
  lastName: "Nilsen",
}

let fullName = person.fullName.bind(member);

bind() 方法解决了这个问题。

在下面的例子中，bind() 方法用于将 person.display 绑定到 person。

当函数用作回调时，this 会丢失。

引用哪个对象取决于调用（使用或调用）的方式。

根据其使用方式，关键字 this 引用不同的对象：

• 在对象方法中，this 引用该对象。
• 单独使用时，this 引用全局对象。
• 在函数中，this 引用全局对象。
• 在函数中，在严格模式下，this 是 undefined。
• 在事件中，this 引用接收事件的元素。
• call()、apply() 和 bind() 等方法可以将 this 引用到任何对象。                                                                                                                                   

        闭包

        

           全局变量

        函数能够访问函数内部定义的所有变量

        但是函数也能访问函数外部定义的变量

在最后这个例子中，a 是全局变量。

在网页中，全局变量属于 window 对象。

全局变量能够被页面中（以及窗口中）的所有脚本使用和修改。

在第一个例子中，a 是局部变量。

局部变量只能用于其被定义的函数内部。对于其他函数和脚本代码来说它是不可见的。

拥有相同名称的全局变量和局部变量是不同的变量。修改一个，不会改变其他。

不通过关键词 var 创建的变量总是全局的，即使它们在函数中创建。

JavaScript 嵌套函数

所有函数都有权访问全局作用域。

事实上，在 JavaScript 中，所有函数都有权访问它们“上面”的作用域。

JavaScript 支持嵌套函数。嵌套函数可以访问其上的作用域。

var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();

add();
add();
add();

变量 add 的赋值是自调用函数的返回值。

这个自调用函数只运行一次。它设置计数器为零（0），并返回函数表达式。

这样 add 成为了函数。最“精彩的”部分是它能够访问父作用域中的计数器。

这被称为 JavaScript 闭包。它使函数拥有“私有”变量成为可能。

计数器被这个匿名函数的作用域保护，并且只能使用 add 函数来修改。

闭包指的是有权访问父作用域的函数，即使在父函数关闭之后。

4.简单语法

1. 变量声明

JavaScript 使用 var、let 和 const 来声明变量。

javascript复制代码

	var x = 5;
	let y = 10;
	const z = 15; // 不可重新赋值

2. 数据类型

JavaScript 是动态类型语言，但还是有几种基本的数据类型，包括：

• Number: 42 或 3.14159
• String: 'Hello, World!'
• Boolean: true 或 false
• Null: null
• Undefined: 未定义的变量
• Object: 更复杂的数据结构，如数组、日期等

3. 运算符

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

javascript复制代码

	let a = 5;
	let b = 10;
	let sum = a + b; // 算术运算符
	let isGreater = a > b; // 比较运算符
	let isBothTrue = a > 3 && b < 20; // 逻辑运算符

4. 条件语句

使用 if...else 进行条件判断。

javascript复制代码

	let age = 15;
	if (age >= 18) {
	console.log("成年人");
	} else {
	console.log("未成年人");
	}

5. 循环语句

可以使用 for、while 和 do...while 进行循环。

javascript复制代码

	for (let i = 0; i < 5; i++) {
	console.log(i);
	}

6. 函数

使用 function 关键字定义函数。

javascript复制代码

	function greet(name) {
	console.log(`Hello, ${name}!`);
	}
	greet("Alice"); // 输出 "Hello, Alice!"

7. 对象和数组

JavaScript 是基于对象的，可以使用 {} 创建对象，使用 [] 创建数组。

javascript复制代码

	let person = {
	name: "Alice",
	age: 25
	};
	let numbers = [1, 2, 3, 4, 5];

8. 注释

JavaScript 支持单行注释和多行注释。

javascript复制代码

	// 这是一个单行注释
	/*
	这是一个多行注释
	可以跨越多行
	*/