第二章 前端开发——JavaScript

第二章 前端开发学习——JavaScript

一、初识JavaScript

二、JavaScript基础

三、JavaScript数据类型

四、JavaScript运算符

五、JavaScript流程控制

六、JavaScript函数与对象

七、JavaScript实用技巧

八、JavaScript事件Event

九、JavaScript内置对象 

 

一、初识JavaScript

什么是JavaScript（what）：

JavaScript，通常会简称为'JS', 是一种浏览器脚本语言。

JavaScript特点：

• JavaScript是一种脚本编程语言

• JavaScript是一种解释型语言

• Javas的语法结构与C++、java十分类似

• JavaScript是弱类型语言

• ***********************注释***************************

• 动态类型： 不需要提前为变量指定 数据类型

• 静态类型： 需要为变量提前指定 数据类型

• 强类型： 数据类型不能自动转换

• 弱类型： 数据库可以自动转换

• JavaScript： 弱类型 动态类型

• Python： 强类型 动态类型
• ********************************************************

• JavaScript是事件驱动的语言

• JavaScript是一种基于对象的语言

• JavaScript具有跨平台性

• JavaScript具有安全性与简单性

JavaScript版本：

• ECMAScript3.0

• ECMAScript5.0

• ECMAScript6.0 (ECMA2015、ECMAScript2016、ECMAScript2017)

JavaScript应用领域：

• WEB前端 (网页)

• 后端 （node.js）

• 混合APP(IOS 安卓)

• 游戏

 

二、JavaScript基础

1.如何在Html中使用JS

①引入外部脚本文件

 

②在

控制事件在捕获阶段触发

 

4.事件列表

①鼠标事件

onclick         单击
ondblclick       双击
oncontextmenu   右击
onmouseover/onmouseenter       鼠标悬浮到元素上
onmouseout/onmouseleave        鼠标离开元素
onmousemove   鼠标在上面移动
onmousedown   鼠标的按键按下
onmouseup     鼠标的按键抬起

②键盘事件

keydown        键盘按键 按下
keyup        键盘按键 抬起
keypress     键盘按键 按下 (只有字符按键)  (控制按键不可以 Ctrl shift 上下左右都不行)

通过keydown控制div移动位置

通过keyup控制用户输入内容实时交互

③表单事件

• submit 表单提交的时候, 绑定给form元素
• 
• reset 表单重置, 绑定给form元素
• blur 失去焦点
• 
• focus 获得焦点
• 
• change 表单控制的内容改变 通常绑定给 radio checkbox select 如果绑定给输入的input, 必须满足 内容改变和失去焦点才能触发
• 
• select input 或 textarea 内容被选中的时候触发
• 

    
    
    


    
选择地址
    

    
    

    

change事件实现地址联动

④文档事件

• load 加载完成
• 
• unload 文档关闭
• beforeunload 文档关闭 (兼容性好)
• 

⑤图片事件

• abort 图片加载中断
• load 图片加载完成
• error 图片加载错误

    
    
    


    
图片事件
    


    

        
        
        
        
        
        
        
    

    

error事件实现图片加载错误用其他图片替代

⑥其他事件

• scroll 元素内部的内容滚动 适合于有滚动条的元素
• 
• resize 绑定给window, 窗口尺寸发生变化
• 

 

5.Event对象

A）属性

• clientX 鼠标的x坐标

• clientY 鼠标的Y坐标

• button 鼠标按键的标示

• keyCode 键盘按键的值

• cancelBubble 阻止事件冒泡 设置为true

• target 返回触发此事件的元素

• 

• tyep 返回事件类型

• timeStamp 返回触发事件的那一刻的时间戳(从页面打开的那一刻开始

• altKey 返回当事件被触发时，"ALT" 是否被按下。

• ctrlKey 返回当事件被触发时，"CTRL" 键是否被按下。

• shiftKey 返回当事件被触发时，"SHIFT" 键是否被按下。

B）方法

• stopPropagation() 阻止事件冒泡

• preventDefault() 阻止元素默认的事件

• 

   

 

九、JavaScript内置对象

1.Number

A）属性

• MAX_VALUE JS可以表示的最大的数字
• 
• MIN_VALUE JS可以表示的最小的数字
• 

B）方法

• toFixed(length) 指定保留长度的小数
• 
• toExponential() 用科学计数法表示
• toPrecision(length) 要求数字按照指定长度显示 整数+小数
• toString(number) 把数字转换为字符串 可以按照指定的 进制 返回
• 

 

2.String

A）属性

• length 字符串长度
• 

B）方法

• charAt(index) 返回指定位置的字符
• 
• concat(string) 连接字符串
• indexOf(str) 返回小字符串在字符串对象中第一次出现位置 -1表示不存在
• 
• lastIndexOf() 返回小字符在字符串中最一次出现的位置
• 
• substr(start, length) 截取字符串 省略长度截取到结束
• 
• substring(start, end) 截取字符串, 省略结束位置 一直到最后
• 
• slice(start, end) 与substring 一模一样
• 
• split(char) 把字符串分割为数组
• 
• toUpperCase() 把字符串转为大写
• 
• toLowerCase() 把字符串转为小写
• 
• match() 匹配字符串 可用正则
• 
• search() 查找字符串 可用正则
• 
• replace() 替换字符串可用正则
• 
• charCodeAt() 返回在指定的位置的字符的 Unicode 编码。
• String.formCharCode() 从字符编码创建一个字符串。
• trim() 去掉两边空格
• 

 

3.Array

A）创建数组

方式一：

var list = [item1, item2, item3 ...]

方式二：

var list = new Array()

B）数组的添加、删除、修改

添加：

• 为新索引赋值
• 利用数组长度,在数组尾部插入新元素
• push() 在最后追加
• 
• unshift() 在最前面追加
• 
• splice(位置,0,新值)  指定位置加
• 

删除：

• 改变数组长度
• pop()
• 
• shift()
• 
• splice(位置,删除的个数)   指定位置删除指定个数
• 
• 运算符 delete

修改：

• list[index] = value
• 
• list.splice(位置，删除个数,值1,值2...)
•  

C）属性

• length 数组长度 元素个数

D）方法

• reverse() 翻转数组

• 
• sort() 数组排序

• 

• toString() 和 toLocalString() 把数组转换为字符串

• join() 把数组的元素拼接成字符串

• 
• slice() 截取数组中的一部分,返回新的数组 slice(start, end)

• 
• concat() 合并多个数组

• 
• indexOf() 搜索数组中的元素，并返回它所在的位置。

• 
• lastIndexOf() 返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。

• 

• map() 通过指定函数处理数组的每个元素，并返回处理后的数组。

• 
• filter() 检测数值元素，并返回符合条件所有元素的数组。

• 
• every() 检测数值元素的每个元素是否都符合条件。

• 
• some() 检测数组元素中是否有元素符合指定条件。

• 
• reduce() 将数组元素 索引值从低到高 进行组合 reduceRight() 将数组元素 索引值从高到低进行组合
• 

E）数组的遍历（迭代）

• for 循环遍历
• 
• for...in 循环
• 
• forEach 循环推荐
• 

   

4.类数组对象

• 类型不是Array，特性非常像Array

• 具有length属性

• 常见类数组对象： arguments， 元素的列表(NodeList)

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类数组对象title>
head>
<body>
    <div class="item">1div>
    <div class="item">2div>
    <div class="item">3div>
    <div class="item">4div>
    <div class="item">5div>


    <script>
        //for ... of
        var list = [1,2,3,4,5];  //纯的
        var itemList = document.querySelectorAll('.item');

        console.log(list);
        console.log(itemList);

        console.log(list.constructor);
        console.log(itemList.constructor);


        function demo(){
            console.log(arguments.constructor)
        }

        demo();


        console.log(itemList[0])
        console.log(itemList.length);


        for (var i = 0; i < itemList.length; i ++) {
            console.log(itemList[i])
        }

        console.log('');

        for (var i in itemList) {
            console.log(i, itemList[i])
        }


        itemList.forEach(function(value, index) {
            console.log(value)
        })
    script>
body>
html>

view code

 

5.Function

A）属性

• prototype 原型

• length 形参的数量

• 

B）方法

• apply() 将函数作为一个对象的方法调用
• 
• call() 将函数作为对象的方法调用
• 
• 

  function fn() {
              //遍历所有的实参
              [].forEach.call(arguments, function(val, index){
                  console.log(val)
              })
          }

  遍历所有的实参
• bind() 返回一个作为方法调用的函数

 

6.Math

A）属性

• PI 返回圆周率（约等于3.14159）
• 

B）方法

• abs(x) 返回数的绝对值。
• 
• sqrt(x) 返回数的平方根。
• pow(x,y) 返回 x 的 y 次幂。
• 
• ceil(x) 对数进行上舍入。
• 
• floor(x) 对数进行下舍入。
• 
• round(x) 把数四舍五入为最接近的整数。
• 
• max(x,y) 返回 x 和 y 中的最高值。
• 
• min(x,y) 返回 x 和 y 中的最低值。
• 
• random() 返回 0 ~ 1 之间的随机数。
• 

• //取 0到10之间的随机数
  console.log( Math.floor(Math.random() * 11));
  
  //0到11
  console.log( Math.round(Math.random() * 11));
  
  //0到28
  console.log(Math.floor(Math.random() * 29));
  
  
  //7-17随机数
  //取0~10 + 7
  console.log(Math.floor(Math.random() * 11) + 7);

   

7.Date

属性：

• getYear() 请使用 getFullYear() 方法代替。
• getFullYear() 从 Date 对象以四位数字返回年份。
• 
• getMonth() 从 Date 对象返回月份 (0 ~ 11)。
• 
• getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
• 
• getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。
• 
• getHours() 返回 Date 对象的小时 (0 ~ 23)。
• 
• getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。
• 
• getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。
• 
• getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)。
• 
• getTime() 返回 1970 年 1 月 1 日至今的毫秒数。
• 
• getTimezoneOffset() 返回本地时间与格林威治标准时间 (GMT) 的分钟差。
• getUTC.... 标准时区
• 
• set...
• setUTC...
• toTimeString() 把 Date 对象的时间部分转换为字符串。
• toDateString() 把 Date 对象的日期部分转换为字符串。
• toUTCString() 根据世界时，把 Date 对象转换为字符串。
• toLocaleString() 根据本地时间格式，把 Date 对象转换为字符串。
• toLocaleTimeString() 根据本地时间格式，把 Date 对象的时间部分转换为字符串。
• toLocaleDateString() 根据本地时间格式，把 Date 对象的日期部分转换为字符串。

 

8.RegExp

A）创建正则

• 

B）属性

• global RegExp 对象是否具有标志 g。
• ignoreCase RegExp 对象是否具有标志 i。
• lastIndex 一个整数，标示开始下一次匹配的字符位置。
• multiline RegExp 对象是否具有标志 m。
• source 正则表达式的源文本。

C）方法

• exec() 检索字符串中指定的值。返回找到的值，并确定其位置。
• 
• test() 检索字符串中指定的值。返回 true 或 fal
• 

转载于:https://www.cnblogs.com/neymargoal/p/9443086.html