zoukankan      html  css  js  c++  java
  • 3.JavaScript

    初识JavaScript

    • JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。
    • 为了取得技术优势,微软推出了JScript,CEnvi推出ScriptEase,与JavaScript同样可在浏览器上运行。为了统一规格,因为JavaScript兼容于ECMA标准,因此也称为ECMAScript

    1.注释

    单行   //
    多行   /*   */

    2.引用方式

    复制代码
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="commons.js"></script>
    </head>
    <body>
        <script>
            alert('derek')
        </script>
    </body>
    复制代码

    3.JavaScript代码要放在<body>最下面,可以让网页尽快的呈现给用户,减少浏览者的等待时间,避免因为JS代码块阻塞网页的呈现。

    常用数据类型

    1.变量

    局部变量必须一个 var 开头,如果未使用var,则默认表示声明的是全局变量

    复制代码
    // 全局变量
    name = 'derek';
    
    function demo() {
        // 局部变量
        var age = 18;
        // 全局变量
        gender = 'M'
    }
    复制代码

    2.数字

    JavaScript中不区分整数值和浮点数值,JavaScript中所有数字均用浮点数值表示。

    转换:

    • parseInt(..)    将某值转换成数字,不成功则NaN
    • parseFloat(..) 将某值转换成浮点数,不成功则NaN

    特殊值:

    •  NaN,非数字。可使用 isNaN(num) 来判断。
    • Infinity,无穷大。可使用 isFinite(num) 来判断

    3.字符串

    (1)charAt (输入索引位置获取字符)

    复制代码
    a='derek'
    "derek"
    a.charAt(2)
    "r"
    a.charAt(4)
    "k"
    复制代码

    (2)substring (输入起始位置,结束位置获取字符)

    a.substring(2,4)
    "re"

    (3)lenght (获取当前字符串长度)

    a.length
    5

    (4)concat (字符串拼接)

    a.concat('123')
    "derek123"

    (5)查看索引位置

    a.indexOf('k')
    4
    a.indexOf('r')
    2

    (6)split (分割字符)

    复制代码
    a.split('e')
    (3) ["d", "r", "k"]
    a.split('e',1)
    ["d"]
    a.split('e',2)
    (2) ["d", "r"]
    复制代码
     更多

    4.布尔值

    true(真)和false(假),要用小写

    复制代码
    ==      比较值相等
    !=       不等于
    ===   比较值和类型相等
    !===  不等于
    ||        或
    &&      且
    复制代码

    5.数组

    复制代码
    a = [11,22,33,44]     -->数组
    (4) [11, 22, 33, 44]
    a.splice(1,2)         -->切片
    (2) [22, 33]
    a.splite(1,3,66)
    复制代码
    复制代码
    Array.length    数组的大小
    Array.push()    尾部添加元素
    Array.pop()    删除并返回数组的最后一个元素
    Array.unshift()    在数组头部插入一个元素
    Array.shift( )    在数组头部移除一个元素
    Array.slice( )    切片
    Array.reverse( )    反转
    Array.join( )    将数组元素连接起来以构建一个字符串
    Array.concat( )    拼接
    Array.sort( )    排序
    Array    对数组的内部支持
    Array.splice( start, deleteCount, value, ...)    
    插入、删除或替换数组的元素
    
    obj.splice(n,0,val) 指定位置插入元素
    obj.splice(n,1,val) 指定位置替换元素
    obj.splice(n,1)    指定位置删除元素
    Array.toLocaleString( )    把数组转换成局部字符串
    Array.toString( )    将数组转换成一个字符串
    复制代码

    6、字典 

    创建字典

    >dic = {'k1':'v1','k2':'v2'};
    <Object {k1: "v1", k2: "v2"}

    语句

    1.循环

    (1)for循环,两种方式

    复制代码
        a = [11,22,33,44]
        for(var item in a){
            console.log(a[item])
        }
    11
    22
    33
    44
    复制代码
    复制代码
    a = [11,22,33,44]
            for(var i=0;i<a.length;i += 1){
                console.log(a[i])
            }
    
    11
    22
    33
    44
    复制代码

    (2)while循环

    while(条件){
        // break;
        // continue;
    }

    2.条件语句

    (1)if语句

    复制代码
    if(条件){
      
        }else if(条件){
              
        }else if(条件){
     
        }else{
     
        }
    复制代码

    (2)switch条件语句

    复制代码
    switch(name){
            case '1':
                age = 123;
                break;
            case '2':
                age = 456;
                break;
            default :
                age = 777;
        }
    复制代码

    函数

    复制代码
    // 普通函数
        function func(arg){
            return true;
        }
               
    // 匿名函数
        var func = function(arg){
            return "derek";
        }
       
    // 自执行函数
        (function(arg){
            console.log(arg);
        })('derek')
    复制代码

    正则表达式

    1.匹配模式 

    /.../  用于定义正则表达式
    /.../g 表示全局匹配
    /.../i 表示不区分大小写
    /.../m 表示多行匹配

    2.test

    (判断字符串是否符合规定的正则)

    复制代码
    rep = /d+/             -->只要有符合匹配的就返回true
    /d+/
    rep.test('derek')
    false
    rep.test('derek123')
    true
    
    rep = /^d+$/          -->全部符合匹配的才返回true
    /^d+$/
    rep.test('derek123')
    false
    rep.test('123')
    true
    复制代码

    3.exec

          exec(string)    用于获取正则匹配的内容

    4.规则

    复制代码
    d     数字,等同于[0-9]
    D     非数字,等同于[^0-9]
    s     空白字符
    S     非空白字符
    w     字母、数字、下划线,等同于[0-9A-Za-z_](汉字不属于w)
    W     非字母、数字、下划线,等同于[^0-9A-Za-z_]
    复制代码
    复制代码
    元字符         名称              匹配对象
    .             点号              单个任意字符(除回车
    、换行
    、行分隔符u2028和段分隔符u2029外)
    []            字符组             列出的单个任意字符
    [^]           排除型字符组        未列出的单个任意字符
    ?             问号               匹配0次或1次
    *             星号               匹配0交或多次
    +             加号               匹配1次或多次
    {min,max}     区间量词           匹配至少min次,最多max次
    ^             脱字符             行的起始位置
    $             美元符             行的结束位置
    |             竖线               分隔两边的任意一个表达式
    ()            括号               限制多选结构的范围,标注量词作用的元素,为反向引用捕获文本
    1,2...      反向引用            匹配之前的第一、第二...组括号内的表达式匹配的文本
    复制代码

    定时器

    setInterval(“执行函数”,“时间”)表示创建一个定时器

    复制代码
      <script>
           function func(){
               console.log(1);
           }
           //创建一个定时器
           setInterval('func()',5000);   //5000表示5秒,每隔五秒执行一次func()
        </script>
    复制代码

    做个滚动字符的实例

    复制代码
    <body>
        <div id="i1">欢迎来到Anderson_An的blog</div>
        <script>
           function func(){
               var tag = document.getElementById('i1');
               var content = tag.innerText;
               var f = content.charAt(0);
               var l = content.substring(1,content.length);
               var new_content = l + f;
               tag.innerText = new_content;
           }
           setInterval('func()',500);
        </script>
    </body>
    复制代码
  • 相关阅读:
    hdu1561--树形dp<依赖背包>
    hdu--1520--树形dp<写起来就是深搜啊>-<滚动数组优化>
    hdu--1595-另类最短路
    hdu--1599--最小环<会加深你对floyd的理解>
    hdu--1851--尼姆博弈&&巴什博弈<也有人用了sg可惜我还不懂>
    hdu--4920--原来一直写了速度慢的矩阵乘法
    hdu--4912--终于解脱了
    hdu--4947--我太天真了
    hdu--2576--高中数学..
    hdu--2579--第二次与女孩的约会
  • 原文地址:https://www.cnblogs.com/Anderson-An/p/9977117.html
Copyright © 2011-2022 走看看