Javascript笔记（更新中）

倍特佳

已于 2022-03-28 16:26:17 修改

阅读量1.1k

点赞数 2

分类专栏：前端 javascript 笔记文章标签： javascript 前端 html5

于 2022-03-22 10:49:31 首次发布

本文链接：https://blog.csdn.net/KANGCHUNHUANG/article/details/123355552

版权

前端同时被 3 个专栏收录

6 篇文章 0 订阅

订阅专栏

javascript

4 篇文章 0 订阅

订阅专栏

笔记

4 篇文章 0 订阅

订阅专栏

Javascript的介绍

一、为什么学习 JavaScript?

JavaScript 是 web 开发人员必须学习的 3 门语言中的一门：
1、HTML 定义了网页的内容
2、CSS 描述了网页的布局
3、JavaScript 控制了网页的行为

二、javascript的是什么呢？

1、JavaScript 是脚本语言
2、JavaScript 是一种轻量级的编程语言。
3、JavaScript 是可插入 HTML 页面的编程代码。
4、JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

三、JavaScript 如何使用？

HTML 中的脚本必须位于 <script> 与 </script> 标签之间。

您可以在 HTML 文档中放入不限数量的脚本。

脚本可位于 HTML 的 <body> 或 <head> 部分中，或者同时存在于两个部分中。

通常的做法是把函数放入 <head> 部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。

也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。
外部 JavaScript 文件的文件扩展名是 .js。
如需使用外部文件，请在 <script> 标签的 “src” 属性中设置该 .js 文件。
例：<script src="myScript.js"></script>

四、JavaScript 如何输出？

JavaScript 可以通过不同的方式来输出数据：

1、使用 window.alert() 弹出警告框。
2、使用 document.write() 方法将内容写到 HTML 文档中。
3、使用 innerHTML 写入到 HTML 元素。
4、使用 console.log() 写入到浏览器的控制台。

javascript的基础知识

一、JavaScript 字面量
1、数字（Number）字面量可以是整数或者是小数，或者是科学计数(e)；
2、字符串（String）字面量可以使用单引号或双引号；
3、数组（Array）字面量定义一个数组。

二、JavaScript 变量
在编程语言中，变量用于存储数据值。
1、JavaScript 使用关键字 var 来定义变量，使用等号来为变量赋值。

三、JavaScript 操作符
JavaScript使用算术运算符来计算值。

四、JavaScript 语句
在 HTML 中，JavaScript 语句向浏览器发出的命令，语句是用分号分隔。

五、JavaScript 关键字用于标识要执行的操作。
和其他任何编程语言一样，JavaScript 保留了一些关键字为自己所用。
var 关键字告诉浏览器创建一个新的变量。
以下是 JavaScript 中最重要的保留关键字（按字母顺序）：
在这里插入图片描述

六、JavaScript 注释
不是所有的 JavaScript 语句都是"命令"。双斜杠 // 后和/* */内的内容将会被浏览器忽略。

七、数据类型的概念
编程语言中，数据类型是一个非常重要的内容；
为了可以操作变量，了解数据类型的概念非常重要。
八、JavaScript 函数
JavaScript 语句可以写在函数内，函数可以重复引用；
引用一个函数 = 调用函数(执行函数内的语句)。

九、JavaScript 字母大小写
JavaScript 对大小写是敏感的。
当编写 JavaScript 语句时，请留意是否关闭大小写切换键。
函数 getElementById 与 getElementbyID 是不同的。
同样，变量 myVariable 与 MyVariable 也是不同的。

十、JavaScript 字符集
JavaScript 使用 Unicode 字符集。
Unicode 覆盖了所有的字符，包含标点等字符。

十一、JavaScript对象
创建对象
使用关键字调用的函数，是构造函数constructor,构造函数是专门用来创建对象的函数 var obj = new boject();console.log(obj);
在对象中保存的值称为属性，向对象添加属性
语法：对象 . 属性名=属性值；obj.name="属性值"
读取对象中的属性值
语法：对象 . 属性名 console.log(obj.name);
然后对象读取的对象中没有属性，不会报错而是会返回undefined.
修改对象的属性值
语法:对象 . 属性名=新值
obj.name = "tom";
删除对象属性
语法：delete 对象.属性名
delete obj.name;
注：对象的属性名不强制遵守标识符的规范，但是尽量按照标识符的规范去写，特殊的属性名不能采用 . 的方法操作，而使用另外一种方式。
语法：对象[“属性名”] = 属性值
obj.["123"] = 456;
JS对象的属性值可以是任意的数据类型。
对象字面量
使用对象字面量，可以在创建对象是，直接指定对象中的属性。
语法：{属性名：属性值，属性名：属性值…}
var obj = {name:"小马", age:23};
注：对象字面量的属性名可以家引号，也可以不加，建议不加。如果要使用一些特殊的名字，则必须加引号。

十二、Javascript函数
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

函数就是包裹在花括号中的代码块，前面使用了关键词 function：

function functionname()
{
    // 执行代码
}

当调用该函数时，会执行函数内的代码。
可以在某事件发生时直接调用函数（比如当用户点击按钮时），并且可由 JavaScript 在任何位置进行调用。

注：JavaScript 对大小写敏感。关键词 function 必须是小写的，并且必须以与函数名称相同的大小写来调用函数。

在调用函数时，您可以向其传递值，这些值被称为参数。
这些参数可以在函数中使用。
您可以发送任意多的参数，由逗号 (,) 分隔：

myFunction(argument1,argument2)

当您声明函数时，请把参数作为变量来声明：

function myFunction(var1,var2)
{
代码
}

变量和参数必须以一致的顺序出现。第一个变量就是第一个被传递的参数的给定的值，以此类推。

有时，我们会希望函数将值返回调用它的地方。
通过使用 return 语句就可以实现。

在使用 return 语句时，函数会停止执行，并返回指定的值。

function myFunction()
{
    var x=5;
    return x;//5
}

整个 JavaScript 并不会停止执行，仅仅是函数。JavaScript 将继续执行代码，从调用函数的地方。

函数调用将被返回值取代：

var myVar=myFunction();

myVar 变量的值是 5，也就是函数 “myFunction()” 所返回的值。

即使不把它保存为变量，您也可以使用返回值：

document.getElementById("demo").innerHTML=myFunction();

demo" 元素的 innerHTML 将成为 5，也就是函数 “myFunction()” 所返回的值。

JavaScript 变量的生存期
JavaScript 变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。

在函数内部在声明一个函数

function fun3(){
        function fun4(){
        alert("这是另外一个函数")；
        }
}
   return fun4;
   //return fun4() 将fun4函数作为返回值
   a  = fun3();
   
   fun3()()； //返回fun4

立即执行函数

函数对象（）

函数定义完，立即被调用，这种函数叫做立即执行函数，而立即执行函数往往只会执行一次

（function(){
        alert("我是一个立即执行函数")；
}）（）；//我是一个立即执行函数

注：javascript函数需要return作为返回值，如果return语句后不跟任何值相当于返回一个undefined，函数中不写return，则也会返回undefined，并且return后可以跟任意类型的值

十三、javascript作用域
javascript作用域有两种，分别是局部作用域和全局作用域。

avaScript 局部作用域
变量在函数内声明，变量为局部作用域。

局部变量：只能在函数内部访问。

// 此处不能调用 carName 变量
function myFunction() {
    var carName = "Volvo";
    // 函数内可调用 carName 变量
}

JavaScript 全局变量
变量在函数外定义，即为全局变量。

全局变量有全局作用域: 网页中所有脚本和函数均可使用。

var carName = " Volvo";
 
// 此处可调用 carName 变量
function myFunction() {
    // 函数内可调用 carName 变量
}

JavaScript 变量生命周期

JavaScript 变量生命周期在它声明时初始化。
局部变量在函数执行完毕后销毁。
全局变量在页面关闭后销毁。

HTML 中的全局变量
在 HTML 中, 全局变量是 window 对象: 所有数据变量都属于 window 对象。

//此处可使用 window.carName
 
function myFunction() {
    carName = "Volvo";
}

十四、javascript - this关键字
面向对象语言中 this 表示当前对象的一个引用。
但在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变。

在方法中，this 表示该方法所属的对象。
如果单独使用，this 表示全局对象。
在函数中，this 表示全局对象。
在函数中，在严格模式下，this 是未定义的(undefined)。
在事件中，this 表示接收事件的元素。
类似 call() 和 apply() 方法可以将 this 引用到任何对象。

var person = {
  firstName: "John",
  lastName : "Doe",
  id       : 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

方法中的 this
在对象方法中， this 指向调用它所在方法的对象。

在上面一个实例中，this 表示 person 对象。

fullName 方法所属的对象就是 person。

fullName : function() {
  return this.firstName + " " + this.lastName;
}

单独使用 this
单独使用 this，则它指向全局(Global)对象。

在浏览器中，window 就是该全局对象为 [object Window]:

var x = this;

严格模式下，如果单独使用，this 也是指向全局(Global)对象。

"use strict";
var x = this;

函数中使用 this（默认）
在函数中，函数的所属者默认绑定到 this 上。
在浏览器中，window 就是该全局对象为 [object Window]:

function myFunction() {
  return this; //[object Window]
}

函数中使用 this（严格模式）
严格模式下函数是没有绑定到 this 上，这时候 this 是 undefined。

"use strict";
function myFunction() {
  return this;
}

事件中的 this
在 HTML 事件句柄中，this 指向了接收事件的 HTML 元素：

<button onclick="this.style.display='none'">
点我后我就消失了
</button>

对象方法中绑定
下面实例中，this 是 person 对象，person 对象是函数的所有者：

var person = {
  firstName  : "John",
  lastName   : "Doe",
  id         : 5566,
  myFunction : function() {
    return this;
  }
};

注: this.firstName 表示 this (person) 对象的 firstName 属性。

显式函数绑定
在 JavaScript 中函数也是对象，对象则有方法，apply 和 call 就是函数对象的方法。这两个方法异常强大，他们允许切换函数执行的上下文环境（context），即 this 绑定的对象。

在下面实例中，当我们使用 person2 作为参数来调用 person1.fullName 方法时, this 将指向 person2, 即便它是 person1 的方法：

var person1 = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
var person2 = {
  firstName:"John",
  lastName: "Doe",
}
person1.fullName.call(person2);  // 返回 "John Doe"

倍特佳

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Javascript笔记（更新中）

学习Javascript的一个月Javascript的介绍一、为什么学习 JavaScript?JavaScript 是 web 开发人员必须学习的 3 门语言中的一门：1、HTML 定义了网页的内容2、CSS 描述了网页的布局3、JavaScript 控制了网页的行为二、javascript的是什么呢？1、JavaScript 是脚本语言2、JavaScript 是一种轻量级的编程语言。3、JavaScript 是可插入 HTML 页面的编程代码。4、JavaScript 插入 HT
复制链接

扫一扫