JavaScript快速入门 | 易学教程

JavaScript:

概念 :一门客户端脚本语言
- 运行在客户端浏览器中的,每一个浏览器都有一个JavaScript的解析引擎
- 脚本语言:不需要编译,直接就可以被浏览器解析执行了
功能:
- 可以用来增强用户和html页面的交互过程,用来控制html元素,让页面有一些动态效果,增强用户的体验
JavaScrpit=ECMAScript+JavaScript(BOM+DOM);
ECMAScript:客户端脚本语言的标准
1. 基本语法:
  1. 与html结合方式
    1. 内部js:
      - 定于<script>,标签体内容就是js代码
    2. 外部js:
      - 定义<script>,可以通过src属性引用外部的js文件
    - 注意:
      1. <script>可以定义在html页面的任何地方,但是定义的位置会影响执行顺序
      2. <script>可以定义多个
  2. 注释:
    1. 单行注释://注释内容
    2. 多行注释:/注释内容/
  3. 数据类型
    1. 原始数据类型
      1. number:数字.整数/小数/NaN(not a number 一个不是数字的数字类型)
      2. string:字符串."abc" "a" 'abc''
      3. boolean:true/false
      4. null:一个对象为空的占位符
      5. undefined:未定义.如果一个变量没有给初始值,则会被默认赋值为underfined
    2. 引用数据类型:对象;
  4. 变量
    - 变量:一小块储存数据的内存空间
    - Java语言是强类型语言,而JavaScript是弱类型语言
      - 强类型:在开辟变量储存空间时,定义了空间用来存储数据的数据类型,只能储存固定数据类型的数据
      - 弱类型:在开辟变量空间时,不定义空间的储存数据类型,可以存放任意类型的数据
    - 语法:
      - var 变量名 =初始化值;
      - type of运算符:获取变量的类型
        注意: null运算后得到的结果时object
  5. 运算符
    1. 一元运算符: 只有一个运算数的运算符 ++,--,+,-
      - ++,--:自增,自减
        ++(--)在前,先自增(自减),再运算
        
        ++(--)在后,先运算,再自增(自减)
      - +,-:正号,负号
        注意:在JS中如果运算数不是运算符所要求的类型,那么JS引擎谁自动将其他类型转为number类型
        string转number:按照字面值转换,如果字面值不是数字,则转为 NaN(不是数字的数字)
        
        boolean转number:true转为1,false转为0
    2. 算数运算符 +,-,*,/,%...
    3. 赋值运算符 = += -=
    4. 比较运算符
      
      < >= <= == ===(全等于)
      - 比较方式
        类型相同,直接比较
        字符串,按照ASCII比较,按位逐一比较,直到得出大小为止
        
        类型不同,先进行类型转化再比较
        ===,全等于,在比较之前先判断类型,如果不同直接返回false
    5. 逻辑运算符 && || !
      - 其他类型转boolean
        number:0或NaN为假,其他为真
        
        string:除了空字符串(""),其他都是true
        
        null&underfined:都是false
        
        对象:所有对象都是true
    6. 三元运算符 * 语法: * 表达式?值1:值2; * 判断表达式的值,如果是true则取值1,如果是false则取值2;
  6. 流程控制语句
    1. if...else..
    2. switch
      - 在java中switch语句可以接受的数据类型: byte int short char 枚举(1.5) string
        switch(变量): case 值:
      - 在JS中,switch语句可以接受任意的原始数据类型
    3. while
    4. do...while
    5. for
  7. JS中特殊用法
    1. 语句以;结尾,如果一行只有一条语句则;可以省略(不建议);
    2. 变量的定义使用var关键词,也可以不使用
      - 用:定义的变量是局部变量
      - 不用:定义的变量是全局变量(不建议)
2. 基本对象
  1. function:函数(方法)对象
    1. 创建:
      1. var fun=new Function(形参,方法体);
      2. function 方法名(形参){ 方法体 }
      3. var 方法名=function(形参){ 方法名 }
    2. 方法:
    3. 属性:
      - length长度
    4. 特点
      1. 方法定义形参的类型不用写,返回类型也不用写
      2. 方法是一个对象,如果定义名称相同的方法会被覆盖
      3. 在JS中,方法的调用只与方法的名称有关,与参数列表无关
    5. 调用: 方法名称(实际参数列表)
  2. Array:数组对象
    1. 创建
      1. var arr=new Array(元素列表);
      2. var arr=new Array(默认长度);
      3. var arr=new Array[元素列表];
    2. 方法
      1. join(参数):将数组中的元素按照指定的分隔符拼接为字符串
      2. push():向数组的末尾添加一个或更多元素,并返回新的长度
    3. 属性 length:数组的长度
    4. 特点
      1. JS中,数组元素类型是可变的
      2. JS中,数组长度可变的
  3. Date:日期对象
    1. 创建: var date=new Date();
    2. 方法: toLocalString():返回当前date对象对应的时间本地字符串格式 getTime():获取毫秒值.返回当前日期对象描述的时间到1970年1月1日零点的毫秒值差
  4. Math
    1. 创建
      - 特点:Math对象不用创建,直接使用,Math.方法名
    2. 方法:
      - random():返回0~1之间的随机数.含0不含1
      - ceil(x):对数进行向上舍入,大于等于x
      - floor(x):对数进行向下舍入,小于等于x
      - round(x):将数进行四舍五入最接近的整数
  5. RegExp:正则表达式对象
    1. 正则表达式:定义字符串的组成规则
      1. 单个字符:[]
        如 [a] [ab] [a-zA-Z0-9]
        
        特殊符号代表特殊含义的单个字符: \d:单个数字字符[0-9] \w:单个单词字符[a-zA-Z0-9]
      2. 量词符号: ?:表示出现0次或1次 *:表示出现0次或多次 +:表示出现1次或多次 {m,n}:表示出现m<=数量<=n * m如果缺省:{,n}:最多n次 * n如果缺省:{m,}:最少m次
      3. 开始结束符号
        ^:开始
        
        $:结束
      4. 正则对象
      5. 创建:
        var reg=new RegExp("正则表达式");
        
        var reg=/正则表达式/;
      6. 方法: test(参数):验证指定的字符串是否符合正则定义的规范
  6. Global
    1. 特点:全局对象,直接调用.方法名();
    2. 方法:
      - encodeURI():url编码
      - decodeURI():url解码
      - encodeURIComponent():url编码,编码的字符更多
      - decodeURIComponent():url解码
      - isNaN:判断一个值是否是NaN
        NaN参与的==比较中全部为false
      - paseInt:将字符串转为数字
        逐一判断每一个字符是否是数字,直到不是数字为止将前面的数字部分转为number
      - eval():将javascript字符串作为脚本语言执行
3. BOM
  1. 概念:Browser Object Model 浏览器对象模型
    - 将浏览器的各个组成部分封装成对象
  2. 组成:
    - windows:窗口对象
      1. 创建
      2. 方法:
        与弹出框有关的方法:
        alter():显示带有一段消息和一个确认按钮的警告框
        
        confirm():显示带有一段消息以及确认按钮和取消按钮的对话框
        点击确认返回true
        
        点击取消返回false
        
        pompt():显示可提示用户输入的对话框
        返回值:获取用户输入的值
        
        与打开关闭有关的方法
        
        close()关闭浏览器当前窗口
        
        open()打开一个新的浏览器窗口
        返回新的window对象
        
        与定时器有关的方法
        setTimeout():在指定毫秒后调用函数或计算表达式
        参数:
        js代码或者方法对象
        
        毫秒值
        
        返回值:唯一标识,用于取消定时器
        
        clearTimeout():取消由steTimeout()方法设置的timeout
        
        setInterval():按照指定的周期(以毫秒计)来调用函数或计算表达式
        
        clearInterval():取消由steInterval()方法设置的timeout
      3. 属性:
        获取其他BOM对象
        
        获取DOM对象
      4. 特点:
        window对象不需要创建可以直接使用,window.方法名();
        
        window引用可以省略.方法名().
    - Navigator:浏览器对象
    - Screen:显示器对象
    - History:历史记录对象
    - Location:地址栏对象
      1. 创建(获取):
        windows.location
        
        location
      2. 方法:
        reload():重新加载当前文档
      3. 属性 :
        href:设置或返回完整的url

DOM
1. 概念:Document Object Model文档对象模型
  - 将标记语言文档的各个组成部分,封装为对象,可以使用这些对象,对标记语言文档进行CRUD的动态操作
  1. W3C DOM标准分为3个不同的部分:
    1. 核心DOM-针对任何结构化文档的标准模型
    2. Documnet:文档对象
      1. 创建:在html dom模型中可以使用window对象获取
        window.document
        
        document
      2. 方法:
        获取Element对象
        getElenmetById():根据id属性获取元素对象,id值一般唯一
        
        getElenmetByTagName():根据元素名称获取元素对象们,返回值是一个数组
        
        getElenmetByClassName():根据ClassName():根据Class属性值获取元素对象们,返回值是一个数组
        
        getElenmetByName():根据name属性值获取元素对象们,返回值是一个数组
        
        创建其他DOM对象
        
        属性:
      3. Element:元素对象
        获取/创建:通过document来获取和创建
        
        方法:
        removeAttribute():删除属性
        
        setAttribute():设置属性
        
        Attribute:属性对象
        
        Text:文本对象
        
        Comment:注释对象
        
        Node:节点对象,以上五个对象的父对象
        特点:所有dom对象都可以被认为是一个节点
        
        方法:
        CRUDdom树:
        appendChild():向节点列表的结尾添加一个新的子节点
        
        removeChild():删除(并返回当前节点的指定节点),由其父对象调用
        
        replaceChild():用新节点替换一个子节点
        
        属性:
        
        parentNode:返回节点的父节点
  2. XML DOM:针对XML文档的标准模型
  3. HTML DOM:准对HTML文档的标准模型
    1. 标签体的设置和获取:innerHTML
    2. 使用html元素对象的属性
    3. 控制元素样式
      1. 使用元素的style属性来设置
        <script> var div1 = document.getElementById("div1"); div1.onclick = function() { div1.style.color = "red"; div1.style.fontFamily = "微软雅黑"; div1.style.fontSize ="100px"; } </script>
      2. 使用className
        <script> var div1 = document.getElementById("div1"); div1.onclick = function() { div1.className="d1"; } </script>
2. 事件监听机制
  1. 概念:某些组件被执行了某些操作后,触发了某些代码的执行
    1. 事件:某些操作.如单击,双击,鼠标移动,键盘按下
    2. 事件源:组件,如按钮,文本输入框
    3. 监听器:代码
    4. 注册监听:将事件,事件源,监听器结合在一起,当事件源发生了某个事件,则触发执行某个监听器代码
  2. 常见事件:
    1. 点击事件:
      1. onclick当用户点击某个对象时调用的事件句柄。
      2. ondblclick当用户双击某个对象时调用的事件句柄。
    2. 焦点事件:表单校验
      1. onfocus元素获得焦点
      2. onblur元素失去焦点。
    3. 加载事件,window body
      1. onload一张页面或一幅图像完成加载
    4. 鼠标事件(定义方法时,定义一个形参,接受event对象,event对象的button属性可以获取鼠标按钮的键值)
      1. onmousedown鼠标按钮被按下
      2. onmousemove鼠标被移动。
      3. onmouseout鼠标从某元素移开。
      4. onmouseover鼠标移到某元素之上。
      5. onmouseup鼠标按键被松开。
    5. 键盘事件(定义方法时,定义一个形参,接受event对象,event对象的button属性可以获取鼠标按钮的键值)
      1. onkeydown某个键盘按键被按下。
      2. onkeypress某个键盘按键被按下并松开。
      3. onkeyup某个键盘按键被松开。
    6. 选择和改变:
      1. onselect文本被选中。
      2. onchange域的内容被改变。 1. 表单事件
      3. onsubmit确认按钮被点击。
        表单校验:判断表单是否提交
        
        return false;
      4. onreset重置按钮被点击。

原文出处：https://www.cnblogs.com/JaminYe/p/10437883.html

来源：oschina

链接：https://my.oschina.net/u/4391471/blog/3268976

标签

java

javascript

element

ECMAScript