JavaScript小白基础学习教程

约定不等于承诺〃 2023-02-18 03:15 4阅读 0赞

### JavaScript学习 ###

*   *   *  javaScript基础
         *   *  概念：
             *   *  功能：
             *  javaScript发展史
         *  基本语法
         *   *  与html的结合方式
             *  注释
             *  数据类型
             *  变量
             *  运算符
             *   *  1.一元运算符
                 *  2.二元运算符
                 *  3.赋值运算符
                 *  4.比较运算符
                 *  5.逻辑运算符
                 *  6.三元运算符
         *  基本对象
         *   *   *  1.fuction对象
                 *  2.Array对象
                 *  3.Date对象
                 *  4.Math对象
                 *  5.RegExp对象
                 *  6.Global对象
         *  弹出窗口
         *  显示页面
         *  Java特定对象的获取
         *  BOM
         *   *   *  概念
                 *  组成
                 *  Window窗口对象
                 *   *  方法
                     *  属性
                 *  Location对象
                 *   *  方法
                     *  属性
                 *  History对象
                 *   *  方法
                     *  属性
         *  DOM简单学习
         *   *  DOM对象
             *   *  Document对象
                 *  Element元素对象
                 *   *  方法
                 *  Node节点对象
                 *   *  方法
                     *  属性
         *  事件
         *   *   *  绑定事件方式
                 *  常见的事件
                 *   *  点击事件
                     *  焦点事件
                     *  加载事件
                     *  鼠标事件
                     *  键盘事件
                     *  选择和改变
                     *  表单事件

### javaScript基础 ###

#### 概念： ####

一门**客户端脚本语言**  
\*运行在客户端浏览器中，每一个浏览器都有一个JavScript的解析引擎  
\*脚本语言：不需要编译，直接被浏览器解析执行

##### 功能： #####

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

#### javaScript发展史 ####

*  1992年，Nombase公司开发了第一门客户端脚本语言，命名为C–（为了蹭C++的热度），后来更名为：**scriptEase**
 *  1995年，Netscape（网景）基于C–开发了一门**LiveScript**，后来请SUN公司的专家修改变成了**JavaScript**
 *  1996年，微软抄袭JavaScript开发了**Jscript**
 *  1997年，ECMA（欧洲计算机制造协会）规定了ECMA为所有客户端脚本语言的标准。

所以说，**JavaScript = ECMAScript+JavaScript特有的对象**

### 基本语法 ###

#### 与html的结合方式 ####

*  1.内部js，定义<script>标签体，标签体里的内容就是js代码，可以定义在html页面的任何位置，但会影响执行顺序
 *  2.外部js，定义<script>,通过src属性引入外部js

#### 注释 ####

*  单行：//注释内容
 *  多行：/ \*注释内容 \* /

#### 数据类型 ####

*  原始数据类型（**5种**）
    
     *  number:整数，小数，NAN
     *  string：字符串，不分单引号和双引号，没有字符的概念
     *  boolean：布尔值，true&false
     *  null：一个对象为空的占位符
     *  undefined：未定义，如果一个变量没有初始化，默认为undefined
 *  引用数据类型：对象

#### 变量 ####

变量其实就是一小块数据存储的空间，JavaScript是属于弱类型语言，不定义空间存储的数据类型，可以存放任意数据，也就是说当空间内存放了number类型的数据时，你可以把它更改成string类型的数据，

var 变量名=初始化值
    document.write(typeof（变量名））//null的类型是object

#### 运算符 ####

##### 1.一元运算符 #####

++   --  +(正号)

##### 2.二元运算符 #####

+ -  *  /   %

##### 3.赋值运算符 #####

+=   -=   *=     /=

##### 4.比较运算符 #####

< <= > >= ==   类型相同直接比较，类型不同转换成相同类型后比较
    ===    类型不同直接返回false

##### 5.逻辑运算符 #####

&&(与)   ||（）或    ！（非）   具有短路效果

##### 6.三元运算符 #####

a>b ？a：b

### 基本对象 ###

##### 1.fuction对象 #####

**重点：function对象中实际传入的参数会被放在arguements数组中，只要调用arguments数组就能得到所有的参数**

//创建方式1
    function fun1(a,b){ 
    	alert(a+b);
    	}
    //创建方式2
    var fun2=function(a,b){ 
    	alert()a+b);
    	}
    //调用方式
    fun1（3，4）；
    
    alert（fun1.length）;//显示形参的个数

##### 2.Array对象 #####

Array对象长度可变，内容的类型也可变，非常的灵活

//创建方式1
    var arr=new Array(元素列表：1，2，3);
    //创建方式2
    var arr=new Array(元素长度：2);//注意括号中只有一个元素时代表数组长度
    //创建方式3
    var arr=[元素列表：1，2，3，4];

##### 3.Date对象 #####

var date =new Date();
    document.write((data.toLocalString()+"<br>")//转换成本地时间格式
    document.write((data.getTime()+"<br>")//转换成从1970年0时0分至今的毫秒数

##### 4.Math对象 #####

document.write((Math.PI+"<br>")//π
    document.write((Math.random()+"<br>")//随机数
    document.write((Math.round(3.14)+"<br>")//四舍五入
    document.write((Math.floor(3.14)+"<br>")//向上取整
    document.write((Math.ceil(3.14)+"<br>")//向下取整

##### 5.RegExp对象 #####

正则表达式

*  单个字符：\[\]
    
        [a]	[abc]    [a-f]  
         /d :单个数字字符
         /w：单个单词字符[a-zA-Z0-9]
 *  量词符号
    
        ？：出现0或1次
          *：出现0或多次
          +：出现至少一次
          {m，n}：出现次数在m与n之间，缺省表示至多或至少的意思
 *  结束和开始标记
    
        ^：开始标记
          $：结束标记

//创建方式1
    var reg=new RegExp("正则表达式:\\w{6,12}")//注意需要\\来表达\
    //创建方式2
    var reg=/正则表达式/

通过test方法判断对象是否满足正则表达式

##### 6.Global对象 #####

Global对象封装的方法不需要对象就能调用

encodeURI(str) //url编码
    decodeURI(str)//uri解码
    encodeURIComponent(str) //url编码，编码的字符更多
    decodeURIComponent(str)//uri解码
    parseInt(str) //逐一判断每一个字符是否为数字，如果不是数字则停止判断，并将前面部分转化成number
    isNaN() //只有这个可以判断NaN，因为NaN参与的==均返回false；
    eval() //将字符串代码作为脚本代码执行

### 弹出窗口 ###

alert（"欢迎光临"）

### 显示页面 ###

document.write（"你好"）

### Java特定对象的获取 ###

window对象不用创建就能调用，其他的BOM对象和Document对象可以通过window的方法创建，而DOM的其他对象可以通过Document的方法创建。

### BOM ###

##### 概念 #####

Brower Object Model （浏览器对象模型）

##### 组成 #####

*  Window:窗口对象
 *  Navigator：浏览器对象
 *  Screen：显示器屏幕对象
 *  History：历史记录对象
 *  Location：地址栏对象

##### Window窗口对象 #####

Window对象不需要创建可以直接使用window实例对象，并且调用方法时可以省略对象名

alert("hello world")
    window.alert("hello world")

###### 方法 ######

1.与弹出框有关的方法

alert()   //显示带有一段消息和确认按钮的警告框
    confirm()  //显示带有一段消息和确认和取消按钮的对话框，方法返回一个布尔值
    prompt()  //显示可提示用户输入的对话框，返回值为输入内容

2.与打开关闭有关的方法

open(“http：/ /www.baidu.com”)  //打开新窗口，返回值为一个窗口对象
    close() // 关闭当前窗口，如果传入窗口对象，则关闭对应窗口

3.与定时器有关的方法

setTimeout(js,time)  //经过time毫秒后执行js代码，返回值为var id
    clearTimeout(var id)    //取消
    setInterval(js，time) //周期执行，返回唯一标识var id
    clearInterval(var id)//取消

###### 属性 ######

1.调用其他BOM对象:history,screen,location,navigator  
2.获取DOM对象：Document

##### Location对象 #####

创建通过window.location调用

###### 方法 ######

window.history.reload()
    history.reload()   //重新加载页面

###### 属性 ######

<table> 
 <thead> 
  <tr> 
   <th>属性名</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>host</td> 
   <td>设置或返回主机名和当前 URL 的端口号。</td> 
  </tr> 
  <tr> 
   <td>hostname</td> 
   <td>设置或返回当前 URL 的主机名。</td> 
  </tr> 
  <tr> 
   <td>href</td> 
   <td>设置或返回完整的 URL。</td> 
  </tr> 
  <tr> 
   <td>pathname</td> 
   <td>设置或返回当前 URL 的路径部分。</td> 
  </tr> 
  <tr> 
   <td>port</td> 
   <td>设置或返回当前 URL 的端口号。</td> 
  </tr> 
  <tr> 
   <td>protocol</td> 
   <td>设置或返回当前 URL 的协议。</td> 
  </tr> 
  <tr> 
   <td>search</td> 
   <td>设置或返回从问号 (?) 开始的 URL（查询部分）。</td> 
  </tr> 
 </tbody> 
</table>

##### History对象 #####

###### 方法 ######

history.back() // 等同于在浏览器点击后退按钮
    history.forward()// 等同于在浏览器中点击前进按钮
    history.go(参数);  //正数向前跳转，负数向后跳转

###### 属性 ######

length 返回当前页面的 URL的历史数量

### DOM简单学习 ###

概念：Docunment Object Model(文档对象语言)，将标记语言文档的各个部分封装成对象，对标记对象文档进行CRUD操作  
功能：控制html文档内容

#### DOM对象 ####

*  Document：文档对象
 *  Element：元素对象
 *  Attribute：属性对象
 *  Text：文本对象
 *  Comment：注释对象
 *

##### Document对象 #####

1.获取Element对象

document.getElementById()//返回一个唯一对象
    document.getElementByName()//返回一个数组
    document.getElementByTagName()//返回一个数组