JavaScript前端学习大全

② 一旦声明，常量的值就不能被改变

运行结果：

九.

数据类型：var test=20;
JavaScript中分为：原始类型和引用类型。

五种原始类型：

①number:数字（整数 ，小数，NaN（Not aNumber））

运行结果：

②string:字符，字符串，单双引皆可。

运行结果：

③boolean:布尔。一般用来判断false，true。

运行结果：

④null:对象为空

注意：为什么会弹出一个object？而不是null？

解答：在 JavaScript 中，使用 typeof 操作符检查 null 类型时，会返回 “object”，这是 JavaScript 的一个历史遗留问题，属于语言本身的设计特点。这个问题可以追溯到 JavaScript 最初的实现中。JavaScript 最初是在较短的时间内设计和实现的，因此在语言的早期版本中存在一些不完善之处。在 JavaScript 的早期版本中，typeof null 返回的确实是 “object”，这被视为 JavaScript 的一个缺陷。null 本质上是一种特殊的原始值，但在 typeof 操作中，它被错误地识别为对象。这个行为已经成为 JavaScript 的一个特性，并且为了保持向后兼容性，不能轻易改变。

⑤undefined:当声明的变量未初始化时，改变量的默认值是undefined.

使用typeof运算符可以获取数据类型
alert（typeof age）;

和=的代码例子

代码例子1

运行结果为：

注意：①

==a.会判断类型是否一样，如果不一样，则会进行类型转换b.再去比较两个值是否相等，相等则会返回true，反之则会返回false

②

===全等于，判断类型是否一样，如果一样就会返回true，反之

代码例子2

运行结果：

运行结果为：

十.运算符

一元运算符：++，–
算术运算符：+，-，*，/，%
赋值运算符：=，+=，-=…
关系运算符：>，<，>=，!=，,=
逻辑运算符：&&,‖,!
三元运算符：条件表达式？true_value:false_value

代码例子1

运行结果为：

注意:按照字符串的字面值，转为数字，如果字面值不是数字，则转为NaN.

代码例子2

运行结果为：

类型转换：     其他类型转换为number

1.String：按照字符串的字面值，转为数字，如果字面值不是数字，则转为NaN 一般使用parseInt
2.boolean:true转为1 false转为0.

其他类型转换为Boolean:

1.nember:0和NaN转换为false，其他的数字转换为true

2.String:空字符串转为false，其他的字符串转为true

3.null：false

4.undefined：false

十一.函数 函数定义方式一：

函数（方法）是被那些设计为执行特定任务的代码块。
①定义：JavaScript函数通过function关键字进行定义，语法为：
function  functionName（参数1,参数2…）{
         要执行的代码
}

注意：
①形式参数不需要类型。因为JavaScript是弱语言。
②返回值不需要定义类型，可以在函数内部直接使用return返回即可。

function add（a，b）{
         return a+b;
}

②调用：函数名称（实际参数列表）;
let result =add（1,2）;

函数定义方式二：

var functionName=funtion（参数列表）{
}

var add=function（a，b）{
return a+b;
}
调用：JS中，函数调用可以任意传递个数参数
let result=add（1,2,3）;

十二.Array

1.JavaScript对象：
Array：
String：
自定义对象：
定义：
①var 变量名=new Array（元素列表）;方式一
var arr =new Array（1,2,3）;

②var 变量名=[元素列表];方式二
  var arr =[1,2,3];

访问：
arr[索引]=值;
arr=[0]=1;

注意：JS数组类似于Java集合，长度，类型都可变

2.属性：length（字符串的长度）
方法：
①charAt:返回在指定位置的字符
②idexOf：检索字符串

String定义:
var 变量名 =new String（s）;方式一
var str=new String （“hello”）;方式二

var str=“hello”;
var str=‘hello’;

4.自定义对象
格式：
var 对象名称={
            属性名称1:属性值1
            属性名称2:属性值2
            …
           函数名称：function（形参列表）{}
          …
         };
例子：
var person={
         name:“张三”，
       age：23，
     eat：function（）{
       alert（“干饭～”）;
      }
};

十三.BOM:

Browser Object Model浏览器对象模型
JavaScript：将浏览器的各个组成部分封装为对象
组成：
① Window：浏览器窗口对象。
②Nacigator:浏览器对象。
③screen：屏幕对象
④ History：历史记录对象
⑤Location：地址栏对象

①

Window：浏览器窗口对象
获取：直接使用window，其中windows可以省略

运行结果：

confirm()方法：

运行结果：

注意：点击确定按钮会返回true，点击取消按钮会返回false

定时器：

单次定时器，只执行一次

①setTimeout（function，毫秒值）：在一定时间间隔后执行一个function，执行一次

②setInterval（function,毫秒值）：在一定的时间间隔后执行一个function，循环执行）

运行结果为：每三秒执行一次快乐

循环执行

运行结果为：每三秒重复循环天天快乐

④History：历史记录

获取：使用window.history获取，其中window.可以省略

语法：
history.方法（）;

常用的方法：
返回网页的上一步： history.back

进入下一个网页: history .forward

⑤Location:地址栏对象

使用window.location获取,其中window可以忽略.
语法：
Location.方法（）;

常用的方法：
跳转到指定的网页

跳转到百度的例子：
location.href=“https:∥www.baidu.com”

location跳转到百度的例子501dc14755494a31b25b492f04b2a1d8.png

运行结果为：

十四.DOM

①Document Object Modle文档对象模型

②将标记语言的各个组成部分封装为对象。
a: Document：整个文档对象
b: Element：元素对象
c:Atttibute：属性对象
d:Text：文本对象
e: Comment:注释对象

DOM树

JavaScript通过DOM，能够对HTML进行操作

①改变元素HTML的内容
②改变HTML元素的样式
③对HTML DOM事件作出反应。
④添加和删除HTML元素

获取Element
Element:元素对象
获取：使用Document对象的方法来获取
1.getElementByld：根据id属性值获取，返回一个Element对象

2.getElementByldTagName：根据标签名称获取，返回
Element对象数组。

3.getElementByldName
：根据name属性值获取，返回Element对象数组

4.getElementByldClassName：根据class属性值获取，返回Element对象数组

十五.事件监听

事件：HTML事件是发生在HTML元素上的"事情"，比如：
①按钮被点击
②鼠标移动到元素之上
③按下键盘按键
事件监听：JavaScript在事件被侦测到时执行代码

十六.事件绑定：

事件绑定有两种方式：
方式一：通过html标签中的事件属性进行绑定

方式二
通过DOM元素属性绑定

总结

=============================================================

从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。

个人将这段时间所学的知识，分为三个阶段：

第一阶段：HTML&CSS&JavaScript基础

第二阶段:移动端开发技术

第三阶段:前端常用框架

• 推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；如果因为我的笔记太过简陋不理解，可以关注我以后我还会继续分享。

• 大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。