• 阶段02JavaWeb基础day02&03JavaScript


    javascript知识体系
    ECMAScript
    javascript与html结合方式
    内部: <script type="text/javaScript">***</script>
    外部文件引入: <script type="text/javaScript" src="外部js路径(***.js)" ></script>
    javascript数据类型
    原始数据类型
    null
    string
    number
    boolean
    undefined
    当初始化一个变量,并且没有为该变量赋值时,系统会默认初始化为undefined
    对象的占位符,当我们声明一个变量,并准备在之后为该变量赋值为对象类型时,我们可以先为该变量赋值为null
    对象数据类型
    javascript这两种数据类型 在内存中的状态 与 java中 一模一样
    基本语法
    javascript是弱类型语言,声明变量时不用声明变量类型. 全都使用var关键字;
    一行可以声明多个变量.并且可以是不同类型(区别java语法);
    声明变量时 可以不用var. 如果不用var 那么它是全局变量;(推荐使用var)
    变量命名,首字母只能是 字母、下划线、$美元符 三选一;
    命名推荐 匈牙利标记法;
    每行结束可以不加分号。没有分号会以折行符作为每行的结束(推荐加分号);
    注释:支持多行注释和单行注释。 /* */ 、 //
    EcmaScript语句
    if语句
    for语句
    while语句
    do-while语句
    swith语句
    注意:语法规则 与 java 一样
    javascript运算符
    一元运算符
    赋值运算符“=”
    正数“+”
    特殊案例:

    +"10" => 10(字符串类型转换成数字类型)

    +"abc12" => NaN (NaN无效数字)

    NaN特点:参与所有运算都返回false,除了 != ;如:NaN != NaN 返回true
    Boolean运算符
    !、&&、||
    转换规律:(弱类型)
    string 向 boolean 转换 : 除了空字符串("") 转换为false , 其他都为true;
    number 向 boolean 转换 : 除了 +0 -0 和 NaN 转换为false, 其他都为true;
    null 向 boolean 转换 : false;
    undefined 向 boolean 转换 : false;
    Object 向 boolean 转换 : true;
    关系运算符
    >、<、>=、<=
    两个数字类型进行比较 : 直接比较即可.
    一边是其他类型 一边是数字类型 : 将其他类型试图 转换为数字类型. 然后进行比较.
    两边都是字符串时 : 从最高为比较 asc码. 如果相同 继续向后比较.
    等性运算符
    ==、!=、===
    特殊说明:

    undefined == null : true (规定为true)

    "NaN" == NaN : false

    NaN != NaN : true

    true == 1 : true (true转换为 1)

    false == 0 : true (false转换为0)

    true == 2 : false

    "10" == 10 : true

    null == 0 : false (null 转换为NaN)

    undefined == 0 : false (undefined 转换为NaN)
    全等运算符
    比较的时候 包括变量的类型也必须相同
    ECMA对象分类(两类): 本地对象(native object) 和 主机对象(host object)!!

    注意:

    以下介绍的都是本地对象 (native object)

    主机对象(host object) 包括BOM和DOM
    本地对象
    Object
    Object对象是所有对象的超类. Object中的属性和方法,子类中都有;
    toString()
    打印一个对象时,默认调用的就是toString方法(跟java一样)
    Function
    创建方式三种:

    1、function fun1(a,b){alert(a+b)}

    2、var fun2 = new Function("a","b","alert(a+b)");

    3、var fun3 = function(a,b){alert(a+b);};
    调用时的特性:调用时 只看函数名称 跟参数没有关系。
    函数的内置对象
    arguments : 函数运行时的实际参数列表
    arguments.length : 获得实际参数个数
    arguments[n] : 获取第n个实际参数
    内置对象的应用 : 使用arguments完成重载功能!!
    return 关键字
    方法返回结果
    结束当前方法运行
    void 运算符:拦截方法返回值。
    以下三个对象,是三个原始类型的包装对象
    说明:

    三个原始类型是伪对象,可以直接使用对应包装对象的方法!

    这三个包装对象的构造方法可以用来做类型转换!!
    Number
    Boolean
    String
    属性:
    length : 返回字符串长度
    方法:
    不常用的方法(了解):
    anchor( ) : 创建 HTML 锚
    big( ) : 用大号字体显示字符串
    sup( ) : 把字符串显示为上标
    sub( ) : 把字符串显示为下标
    重要的方法:
    charAt( ) : 返回在指定位置的字符
    charCodeAt( ) : 返回在指定的位置的字符的 Unicode 编码
    indexOf( ) : 检索字符串
    lastIndexOf( ) : 从后向前搜索字符串
    subString( ) : 提取字符串中两个指定的索引号之间的字符
    slice( ) : 提取字符串的片断,并在新的字符串中返回被提取的部分 ( 支持负数 )
    与正则结合的方法:
    match( ) : 找到一个或多个正则表达式的匹配(了解)
    search( ) : 检索与正则表达式相匹配的值(了解)
    split( ) : 把字符串分割为字符串数组
    replace( ) : 替换与正则表达式匹配的子串
    Array
    创建方式:
    var arr1 = [1,2,3,4]; //初始化元素 var arr2 = [];
    var arr2 = new Array(1,2,3,4); //初始化元素
    //构造函数只填一个参数并且是数字的话,这个数字是数组的初始化长度

    var arr3 = new Array(3);
    属性:
    length : 获得数组长度
    方法:
    concat( ) 将两个数组结合成一个数组
    join( ) 按照参数的连接符连接元素返会连接后的字符串
    pop( ) 弹出并返回最后一个元素
    push( ) 向数组末尾添加一个元素并返回数组的最新长度
    reverse( ) 将数组元素反转
    sort( ) 将数组排序 默认排序规则是按照字符串比较。

    如果希望自定义比较规则 需要准备一个比较器(函数)!!
    特性
    1.数组中的类型,可以任意.不要求是同类型的.
    2.数组的长度,使用到哪就有多长.
    Date
    构造方法:new Date( ) 获取当前时间
    方法:
    1.new Date() 获取当前时间

    2.getFullYear() 获取年份

    3.getMonth() 获取月份注意 1月份结果为0

    4.getHours() 小时

    5.getDate() 日期

    6.getMinutes() 分钟

    7.getSeconds() 获取秒

    8.getDay();获得星期

    9.getTime() 获取毫秒值.

    10.toLocalString() 获取本地的时间格式字符串.
    RegExp
    创建方式:
    var reg1 = new RegExp("正则表达式","gi");

    参数1:正则表达式 、 参数2:匹配模式

    g 全局匹配 i 匹配是忽略大小写
    var reg2 = /正则表达式/gi;
    方法:
    test( ) 按照正则的规则匹配某个字符串。 匹配正确返回true 错误返回false
    与string结合的4个方法
    本地对象(native object)中有一部分特殊的对象: 内建对象 (build in object)

    特点: 不需要创建实例,直接使用即可。
    Global
    方法:
    encodeURI( ) 对字符串进行编码 只对中文进行编码
    decodeURI( ) 对字符串进行解码
    encodeURIComponent( ) 对字符串进行编码 范围比encodeURI要大。

    包括一些特定字符 例如 / , : , ? , &
    decodeURIComponent( ) 对字符串进行解码
    escape( ) 现已过时
    unescape( ) 现已过时
    isNaN( ) 对某个变量进行判断,是否是NaN。因为NaN == NaN : false;
    parseInt( ) 对字符串向数字(整数)转换
    parseFloat( ) 对字符串向数字(小数)转换;

    以上这两种转换,在转换时是从左到右寻找可以被转换的字符依次转换。
    Math
    属性:
    PI
    方法:
    random( ) 获得0~1之间的随机数
    round( ) 四舍五入取整
    min( )/max( ) 返回两个参数中的最小/最大值
    pow( 参数1,参数2 ) 获得参数1的参数2次方的值.
    BOM(Browser Object Model)
    功能上讲: 控制浏览器窗口的. 使用上讲: 与Global 类似.window对象同样不需要创建对象,直接使用即可.
    window
    一个window对象代表一个html文档。
    属性:
    self : 自己的所在窗口的window对象
    parent : 指向自己父窗口的window对象
    top : 指向自己顶层窗口的window对象
    frames : 获得所有自己子窗口的window对象数组
    opener : 如果一个窗口是使用window.open方法打开的,

    那么在新打开的窗口中 要获得打开自己窗口的window对象使用该属性
    方法:
    alert( ) 提示框
    confirm( ) 确认框,返回值是 true / false
    prompt( ) 提示输入框,返回值是 用户输入的值
    open( ) 打开新窗口

    参数1: 新窗口的地址;

    参数2(用的比较少): 新窗口的名字;

    参数3: 新窗口打开时的一些参数(窗口的宽 高 有没有滚动条, 地址栏,可否调整大小)
    close( ) 关闭当前window对象(关闭当前窗口)
    setInterval( ) 设置定时器方法(循环执行)

    参数1: 要执行的函数;

    参数2: 间隔的事件 (毫秒);

    返回值是定时器的ID;
    clearInterval( ) 停止一个定时器

    参数: 要停止的定时器的ID
    setTimeout( ) 设置定时器方法(只执行一次)

    参数1: 要执行的函数;

    参数2: 间隔的事件 (毫秒);

    返回值是定时器的ID;
    clearTimeout( ) 停止一个定时器.

    参数: 要停止的定时器的ID
    history
    属性:
    length : 该窗口访问过的 页面个数
    方法:
    back( ) 后退
    forward( ) 前进
    go( ) 跳转

    参数接受一个整数;

    0代表当前页面;

    1代表下一页面;

    -1代表上一页面;
    location
    属性:
    href 当前窗口的地址。可以用来做跳转
    方法:
    reload( ) 重新加载当前页面 !刷新
    DOM(Document Object Model)
    DOM : Document Object Model (文档对象模型)

    整合javascript和html、css,控制html文档行为 ;

    DOM就是把页面当中所有内容全部封装成对象 ;

    HTML文档中万物皆对象 ;
    DOM五类对象
    Document(掌握)
    Element(掌握)
    Attribute(理解)
    Text(理解)
    Common(理解)
    DOM中5类对象,抽象出的父类:Node
    自身属性:
    nodeName(了解)
    nodeValue(了解)
    nodeType(了解)
    导航属性
    firstChild(了解)
    lastChild(了解)
    parentNode(掌握)
    nextSibling(了解)
    previousSibling(了解)
    childNodes(了解)
    Document
    获取(文档下的)元素对象
    getElementById( )
    getElementsByClassName( )
    getElementsByTagName( )
    getElementsByName( )
    Element
    获取(该元素下的)元素对象
    getElementsByClassName( )
    getElementsByTagName( )
    事件
    javascript是基于对象和事件驱动的脚本语言。

    给Element对象附加事件属性 ;

    属性的类型是Function类型 ;
    事件类别:
    onclick : 单击时触发
    ondblclick : 双击时触发
    onblur : 失去焦点时触发
    onfocus : 得到焦点时触发
    onchange : 用于表单元素, 当元素被修改时触发
    onkeydown : 当键盘按键被按下时
    onmousemove : 当鼠标移动时触发
    onmousedown : 当鼠标按键按下时触发
    onmouseover : 当鼠标指向时触发
    onmouseout : 当鼠标移出时触发
    onsubmit : 当表单提交时触发
    onload : 只给body标签使用.当页面加载完成后 执行
    事件详情获得:
    我们获得事件详情要找到“侦探”来知道(事件Event对象);

    Event对象是在事件发生时被创建, 并传递给我们的事件Function中,所以我们直接使用即可;
    Event对象
    属性:
    keyCode : 按键的ASC码返回值
    button : 鼠标按钮(左中右)
    clientX : 返回当事件被触发时,鼠标指针的水平坐标。
    clientY : 返回当事件被触发时,鼠标指针的垂直坐标。
    方法:
    preventDefault( ) : 阻止默认关联事件的发生
    stopPropergation( ) : 阻止事件的向下传播
    页面对象的增删改查
    Document对象
    createElement( )
    Element对象
    属性:
    innerHTML
    方法:
    appendChild( ) 追加子节点
    removeChild( ) 删除子节点
    replaceChild( ) 替换子节点
    cloneNode( ) 克隆节点
    setAttribute(key,value) 设置属性值
    getAttribute(key) 获得属性值
    insertBefore() 插入到某元素之前
    DHTML(动态网页技术)
    整合4门技术 : DOM HTML CSS JavaScript
    用通俗的话说: DHTML就是 对我们的之前学的DOM对象进行增强(增加新的属性、获得方法).

  • 相关阅读:
    Solr学习笔记(5)—— Spring Data Solr入门
    Redis学习笔记(6)——SpringDataRedis入门
    SpringDataRedis java.net.UnknownHostException: 127.0.0.1 错误
    Spring Security 入门
    基于Laravel框架下使用守护进程supervisor实现定时任务(毫秒)
    laravel框架中Job和事件event的解析
    Laravel源码解析之model(代码)
    Laravel框架下路由的使用(源码解析)
    Laravel服务容器的绑定与解析
    laravel框架中超实用的功能介绍
  • 原文地址:https://www.cnblogs.com/MessiXiaoMo3334/p/10055834.html
Copyright © 2020-2023  润新知