zoukankan      html  css  js  c++  java
  • Web前端学习——JavaScript

    一、JavaScript介绍
    JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。
    二、JavaScript使用
    1、JavaScript脚本定义
    (1)head标签内定义

    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script type="text/javascript">
            alert("警告");
    </script>
    </head>

    (2)head标签内引入

    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="js01.js">
        </script>
    </head>

    (3)body标签内部末尾

    <body>
        xxx
        <script src="js01.js">
        </script>
    </body>

    2、JavaScript注释
    (1)单行注释
        //
    (2)多行注释
        /* xxx */
    3、JavaScript常用数据类型
    (1)变量声明
        全局变量定义:name='Tom'
        局部变量:      var name='Tom'
    (2)数字类型
        a=18;
        age="18"
        parseInt(age);        ##转化为整数类型
        parseFloat(age);    ##转化为浮点数类型
    (3)字符串类型
        name="Tom"
        a.charAt(1)            ##根据下标取字符串值,0表示第一个字符
        a.substring(1,3)    ##获取字符串,起始结束为止,0表示第一个字符,范围是[m,n),即m=<name<n
        a.length            ##获取字符串长度
        a.trim()            ##移除空白
        a.trimleft()        ##移除左侧空白
        a.trimright()        ##移除右侧空白
        a.concat(value,...)    ##字符串拼接
        a.indexOf(sub,start)##子序列位置,正数
        a.lastIndexOf(sub,start)##子序列位置,倒数
        a.slice(start,end)    ##切片
        a.toLowerCase()        ##转换为大写
        a.toUpperCase()        ##转换为小写
        a.split(delimiter,limit)    ##分隔
        a.search(regexp)    ##从头开始匹配,返回匹配成功的第一个位置(g无效)
        a.match(regexp)        ##全局搜索,如果正则中有g表示找到全部,否则只知道第一个
        a.replace(regexp,replace)##替换,有g替换所有,否则只替换第一个,$数字:匹配的第n个组内容,$&当前匹配的内容,$`:位于匹配子串左侧的文本
    (4)布尔类型
        true
        false
    (5)数组
        a=[1,'a','','tom']
        a.length            ##数组长度
        a.splice(n,0,value)    ##从指定位置插入value
        a.splice(n,1,value)    ##从指定位置替换value
        a.splice(n,1)        ##从指定位置删除value
        a.slice(m,n)        ##从指定位置切片
        a.join(sep)            ##数组值按照指定分隔符拼接成字符串
        a.concat(val,...)    ##对数组元素进行排序
        a.sort()            ##对数据元素进行排序
        
    (6)字典
        a={'k1':'v1','k2':'v2'}

    4、常用语法
    (1)函数定义语法
    a.普通函数:

    function fname(){
    函数体
    }
    b.匿名函数
    fsetInterval(function(){
    console.log(123);
    },5000)

    c.自执行函数


    (2)if语法
        if(条件){
        
        }else if(条件){
        
        }else if(条件){
        
        }else{
        
        }
        
        ==:非严格意义等号,1=="1"为true
        ===:严格意义等号,1==="1"为false
        !=:不等号
        &&:逻辑与
        ||:逻辑或  

    name='1' ;
    switch(name){
    case '1':
    console.log(123);
    case '2':
    console.log(456);
    default:
    console.log(789);

    }

    <script>
    var name='1';
    switch (name){
    case '1':
    age=123;
    console.log(age)
    case '2':
    age=456;
    console.log(age)
    default:
    age=999;
    console.log(age)
    
    
    }
    </script>

    (3)for循环

        1)语法
        a=[1,'a','','tom']
        for(var item in a){
            console.log(a[item]);
        }
        2)语法
        a=[1,'a','','tom']
        for(var i=0;i<a.length;i++){
            console.log(a[i]);
        }
      
    5.其他常用函数
    (1)计时器

    <body>
        <script >
            setInterval("alert('警告')",5000)
        </script>
    </body>

    (2)console日志记录

    <body>
        <script >
            function  f01() {
                console.log(123)
            }
            setInterval("f01()",5000)
        </script>
    </body>

     (3)json和字符串转换

    JSON.stringify(li) ##将数组转化为字符串
    JSON.parse(li) ##将字符串转化为数组
    (4)转义

    encodeURL() ##URL中转义的字符
    decodeURL() ##URL中未转义的字符
    encodeURLComponent() ##URL中组件未转义的字符
    decodeURLComponent() ##URL中组件转义的字符
    escape() ##对字符串转义
    unescape() ##给转义字符串解码
    URLError() ##给URL编码和解码方法抛出
    (5)eval
    javascript中eval是可以编译代码,也可以获取返回值
    (6)时间
    var dt=new Date()
    dt.getxxx ##获取时间
    dt.setxxx ##设置时间
    (7)确认框
    confirm('输入信息内容')

    (8)重定向
    location.href='url' ##重定向
    location.reload() ##重新加载
    location.href ##获取URL
    (9)事件
    事件调用有两种方式:
    a.一种是通过直接标签绑定
    onclick='xx()'
    b.先获取Dom对象,然后进行绑定
    document.getElementById('xx').onclick
    document.getElementById('xx').onfocus

    onclick
    onblur
    onfocus

    6、Dom间接选择器
    (1)找到标签
    a.直接查找
    获取单个元素:document.getElementById('i1')
    获取多个元素:document.getElementsByTagName('div')
    document.getElementsByClassName('c1')
    document.getElementsByName('name')
    b.间接查找
    tag=document.getElementById('i1')

    parentElement ##父标签元素
    children ##子标签元素
    firstElementChild ##第一个子标签元素
    lastElementChild ##最后一个子标签元素
    nextElementSlibling ##下一个兄弟标签元素
    previousElementSlibling ##上一个兄弟标签元素

    (2)操作标签
    a.innerText
    获取标签中的文本内容:标签.innerText
    标签内容重新赋值:标签.innerText=''
    b.className
    tag.className ##直接整体操作
    tab.className.add('样式名') ##添加指定样式
    tab.className.remove('样式名') ##删除指定样式

    7、作用域
    (1)作用域范围
    a.其他语言:以代码块作为作用域
    public void Func(){
    if(1==1){
    string name='Java';
    }
    console.writeline(name);
    }
    Func(); ##此时执行报错,因为name是局部变量,其作用域为{}内
    b.python:
    def func():
    if 1==1:
    name='tom'
    print(name)

    func() ##此时执行成功,因为Python作用域是函数本身
    c.javascript
    def func(){
    if (1==1){
    name='tom';
    }
    console.log(123);
    }

    func() ##此时执行成功,因为javascript作用域是函数本身
    ##函数作用域存在作用域链中,并且也是在创建之前被声明
    ##函数局部变量提前声明
    8、JavaScript面向对象
    function fo(n){
    this.name=n;
    }
    var obj=new fo('Tom');

    a.this 代指对象(python self)
    b.创建对象时,new 函数名,表示类实例化
    9、JS正则匹配
    /../ 用于正则匹配
    /../g 全局匹配
    /../i 忽略大小写匹配
    /../m 多行匹配
    (1)test
    判断字符串是否符合规定的正则,只要含有匹配内容就返回true
    req=/^d+$/
    req=/Java/g
    (2)exec
    获取匹配数据



  • 相关阅读:
    自定义组件要加@click方法
    绑定样式
    647. Palindromic Substrings
    215. Kth Largest Element in an Array
    448. Find All Numbers Disappeared in an Array
    287. Find the Duplicate Number
    283. Move Zeroes
    234. Palindrome Linked List
    202. Happy Number
    217. Contains Duplicate
  • 原文地址:https://www.cnblogs.com/rangle/p/7999066.html
Copyright © 2011-2022 走看看