JavaScript浅入学习

---

前言

  JavaScript这个名称听起来和Java感觉有关系，当其实它们两者之间没有任何关系。但是对应学习Java后进入社会找工作还是很重要的，后端的内容始终是要和前端内容进行交互的，所有对JavaScript有一定的了解对应后端开发人员也是十分重要的。

---

一、JavaScript基础

1.JavaScript是什么？

  JavaScript是一门客户端脚本语言。脚本语言是不需要编译的，它运行于浏览器中，会被浏览器自动解析。

2.JavaScript功能

  可以控制用户和HTML的交互过程，可以控制html元素，让页面有一些动态的效果，增强用户的体验。

3.ECMAScript

3.1.ECMAScript是什么？

  它是JavaScript的核心，它规定了JS的语义规范。

3.2.ECMAScript内容

1. 基本语法
   数据类型：
   
   变量定义
   什么是变量？
     一小块存储数据的内存空间
   Java语言是强类型的语言，而Javascript语言是弱类型的语言。
     强类型：在开辟变量存储空间时，定义了空间将来存储的数据类型。只能存储固定类型的数据
     弱类型：在开辟变量存储空间时，不定义了空间将来存储的数据类型。可以存储任意类型的数据
   语法：
     var 变量名 = 初始化值；

运算符
3.1: typeof（变量名）：判断变量的类型
3.2:一元运算符：只有一个运算数的运算符
++ :自增
– ：自减
+（正号）
 注意：
  在JS中如果运算数不是运算符所要求的类型，那么js引擎会自动将运算数进行类型转换
-(负号)
 注意：
  在JS中如果运算数不是运算符所要求的类型，那么js引擎会自动将运算数进行类型转换
 其它类型转number
  string转number：按照字面值转换。如果字面不是数字，那么转为NaN（不是数字的数字）
  boolean转number：true转为1，false转为0
3.3: 算数运算符
+
-
/
%
*
3.4:赋值运算符
=
+=
-=
3.5:比较运算符
>
<
===(全等于)
在比较之前，先判断类型，如果类型不一样，直接返回false
<=
>=
==
比较方式
 类型相同:
   直接比较
 类型不同:
   先进行转换，在比较
 字符串比较：按字典顺序比较。按位逐一比较，直到的出大小
3.6:逻辑运算符
&&
||
!
 其它类型转boolean
  number:0或NaN为假，非零为真
  string:除了空字符串("")为false，其他都为true
  null && fined:都是false
  对象:都是true
3.7:三元运算符
？：
语法：表达式 ？ 值1：值2
判断表达式的值，如果true则取值1，如果式false则取值2

2. 基本对象
   2.1: Function 对象
   描述一个函数的对象
   创建
       1.var fun= new Function(形式参数列表，方法体);
       2.function 方法名称(形式参数列表){
   方法体；
   }
       3.var 方法名=function(形式参数列表){
   方法体
   }
   属性：length：代表形参的个数
   特点
       1.方法定义时，形参的类型不用写，返回值类型也可不写
       2.方法是一个对象，如果定义名称相同的方法，会覆盖（后面定义的会覆盖前面的）
       3.在js中，方法的调用，值与方法的名称有关，和实际的参数列表无关
       4.在方法声明中，有一个隐藏的内置对象是数组，叫arguments，封装所有的实际参数
   调用:方法名称(实际参数列表);
   2.2: Array 对象
   数组对象
   创建
       1.var arr =new Array(元素列表);
       2.var arr = new Array(默认长度);
       3.var arr = [元素列表]
   方法
       join(参数)：将数组中的元素按照指定的分隔符拼接成字符串
       push(参数)：向数组的尾部添加一个或者多个元素
   属性:length:数组长度
   特点
       1.js中，数组元素的类型可变的
       2.js中，数组的长度是可变的，值只有3个，但是访问了第四个，数组就会自动扩容，值为undefined
   **2.3:Date 对象
   日期对象
   **创建：**var date = new Date();
   方法：
       toLocaleString():返回当前date对象对应的时间本地字符串格式
       getTime():获取毫秒值。返回当前日期对象描述的时间到1970年1月1日的毫秒值差
   2.4:Math 对象
   特点：不用创建，直接使用。Math.方法名();
   方法：
       random():返回0~1之间的随机数。含0不含1
       cell():对数进行上舍人
       floor():对数进行下舍入
       round():把数四舍五入为最接近的整数
   **属性:**PI：圆周率

二、JavaScript高级

1.BOM

概念：Browser Object Model 浏览器对象模型。将浏览器的各个组件封装成对象

组成：

1. Window对象：也叫窗口对象
   1.1 与弹出框有关的
   方法
   alter(“值”):弹出一个警告框.
   confirm():显示带有一段消息以及确认按钮和取消的对方框
   如果用户点击确定按钮，则返回true，否则返回false。
   prompt(“输入要提示用户的信息”):显示可提示用户输入的对话框返回值为用户输入的值。
   属性
   1.获取其它BOM对象（history,location,Navigator,Screen）。
   2.获取DOM对象（document）。
   特点：
   Window对象不需要创建直接使用window使用。window.方法名();
   window引用可以省略，方法名();
   1.2 与开发关闭有关的方法：
   close():关闭浏览器窗口，关闭调用者的窗口。
   open():打开一个新窗口,返回一个新的window对象。
   1.3 与定时器有关的方式
   setTimeout():在指定的毫秒数后调用函数或计算表达式。
       参数：
       1.js代码或者方法函数对象
       2.毫秒值
   返回值：唯一标识，用于取消定时器
   clearTimeout():取消由setTimeout()方法设置的timeout
   setInterval():按照指定的周期(以毫秒计)来调用函数或计算表达式。
       参数：
       1.js代码或者方法函数对象
       2.毫秒值
   返回值：唯一标识，用于取消定时器
   clearInterval():取消由setInterval()设置的timeout。
   Navigator对象：浏览器对象
   Screen对象：显示器屏幕对象
   History对象：历史记录对象
   创建（获取）：
       window.history
       history
   方法：
   back:加载history 列表中的前一个URL
   forward()：加载history 列表中的下一个URL
   go(参数):
       加载history 列表中的某个具体页面
       参数是正数，前进几个历史记录；负数，后退几个历史记录
   属性：
       length： 返回当前窗口历史列表中的URL数量。
   Location对象：地址栏对象
   创建（获取）
       window.location
       location
   方法
       reload():重新加载当前文档
   属性
       href：设置或返回完整的URL

2.DOM

Document object Model 文档对象模型
将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD（增删改查）的动态操作
W3C DOM 标准被分为3个不同的部分：
核心DOM - 针对任何结构化文档的标准模型
Document:文档对象
创建(获取)：在dom模型中可以使用window对象来获取
    window.document
    document
方法：
获取Element对象
    getElementById():根据id属性值获取元素对象。id属性值一般唯一
    getElemtnsByTagName():根据元素名称获取元素对象们。返回值是一个数组
    getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组
    getElementsByName():根据name属性值获取元素对象们。
创建其他DOM对象
    createAttribute(name) 创建拥有指定名称的属性节点，并返回新的 Attr 对象。
    createComment() 创建注释节点。
    createElement() 创建元素节点。
    createTextNode() 创建文本节点。
Element:元素对象
**创建(获取)：**通过document来获取和创建
方法：
    removeAttribute() 删除指定的属性。
    setAttribute() 添加新属性。
Attribut:属性对象
Text:文本对象
Comment:注释对象
Node：节点对象，其他5个的父对象
特点：所有dom对象被认为是一个节点
方法：
CRUD dom数
    appendChild() 向节点的子节点列表的结尾添加新的子节点。
    removeChild() 删除（并返回）当前节点的指定子节点。
    replaceChild() 用新节点替换一个子节点。
属性： parentNode 返回节点的父节点。
HTML DOM - 针对HTML文档的标准模型
    标签体的设置和获取：innerHTML
    使用html元素对象的属性
控制元素样式
    两种方式：
    使用元素的style属性来设置
如：//修改样式方式1
div1.style.border=“1px solid red”;
div1.style.width=“200px”;
    提前定义好类选择器的样式，通过元素的className属性来设置元素的样式

---

总结

JavaScript的学习会让我们在和前端进行交互时提供很大的帮助。