zoukankan      html  css  js  c++  java
  • JavaScript

    一、JavaScript

             是一门独立的语言,与Java没有丝毫关系,浏览器具有js解译器。(js是让网页动起来的)

    1.存在形式:

                 1).HTML中的header中: 

                                <script type="text/javascript">js代码</script>   (type="text/javascript"不写也一样)

                 2).文件:

                                通过<script src="commmons.js"></script>引用

                 注:为了用户界面显示友好度,JS代码需要放在body标签内部的最下方,

    2.注释:

                 1) 单行注释 : //

                 2)多行注释:/*             */

    3.变量:

                 1)python中定义:name = 'zhangsan'

                  2)JS 中:JavaScript中变量的声明是一个非常容易出错的点,局部变量必须一个 var 开头,如果未使用var,则默认表示声明的是全局变量。

                              name = 'zhangsan'    #全局变量

                               var name = 'zhangsan'   #局部变量 

                   3)编写JS代码:a. 在HTML文件中编写;

                                               b. 临时 ,可在浏览器的终端 console中;

    4.基本数据类型

                 1)数字(Number)

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

                         转换:

                                a . parseInt(..)    将某值转换成数字,不成功则NaN

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

                        特殊值:

                                 a.   NaN,非数字。可使用 isNaN(num) 来判断。               

                                 b.  Infinity,无穷大。可使用 isFinite(num) 来判断。

                 2)字符串(string)

                      字符串是由字符组成的数组,但在JavaScript中字符串是不可变的:可以访问字符串任意位置的文本,但是JavaScript并未提供修改已知字符串内容的方法。

                      方法:

                              obj.charAt(n)                        返回字符串中的第n个字符

                              obj.substring(from, to)  根据索引获取子序列

                              obj.length                            获取长度

                              obj.trim()         移除空白

               obj.trimLeft()
               obj.trimRight)
                                 obj.slice(start, end)      切片
               obj.toLowerCase()         大写
               obj.toUpperCase()         小写
               obj.split(delimiter, limit)  分割

                 3)数组

                             JavaScript中的数组类似于Python中的列表

                              用法:

                               obj.length         数组的大小

                                    obj.push(ele)       尾部追加元素
                obj.pop()           尾部获取一个元素
                obj.unshift(ele)       头部插入元素
                obj.shift()          头部移除元素
                obj.splice(start, deleteCount, value, ...)  插入、删除或替换数组的元素
             obj.splice(n,0,val)     指定位置插入元素
             obj.splice(n,1,val)     指定位置替换元素
             obj.splice(n,1)       指定位置删除元素
                obj.slice( )        切片
                obj.reverse( )         反转
                obj.join(sep)       将数组元素连接起来以构建一个字符串
                obj.concat(val,..)     连接数组
                obj.sort( )         对数组元素进行排序

                

                 4)布尔类型

                              布尔类型仅包含真假,与Python不同的是其首字母小写。

                                    ==      比较值相等

                                    !=       不等于

                                    ===   比较值和类型相等

                                    !===  不等于

                                    ||        或

                                     &&      且

    5.基本语法

                 1)条件语句

                         JavaScript中支持两个中条件语句,分别是:if 和 switch

                        

    if(条件){
     
        }else if(条件){
             
        }else{
     
        }
    
    if语句

    其他语言中有该语法,python中没有:

    switch(name){
            case '1':
                age = 123;
                break;
            case '2':
                age = 456;
                break;
            default :
                age = 777;
        }
    
    switch语句

                 2) for 循环

                      break: 停止循环;

                      continue : 继续循环。

    a=[11,22,33,44]
    
    for(var item in a)
        console.log(item);
    
    结果:
     0
     1
     2
     3  //得到的索引

                 

    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++){
    console.log(i)}
    
    结果:
     0
     1
     2
     3

     6. 定时器

                    setInterval('执行的代码', 间隔时间)

    跑马灯:

    <!
    DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="i1">欢迎桂工排球神奇一传赖大佬来北京参观</div> <div style="background-color: #FFA000;"> <script> function run() { //根据ID获取指定标签的内容,定义局部变量 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('run()', 300); </script> </div> </body> </html>

    7. 函数

            1)普通函数:

                          function func(){

                            }

             2)匿名函数:没有名字的函数


                           setInterval(function(){

                                 console.log(123);

                            },5000)

             3) 自执行函数:创建函数并且自动执行。

                                function(arg){                    //形参

                                    console.log(arg);

                          }(1)                                         //实参

    8.  序列化

           JSON.stringify()  :将对象转换为字符串

           JSON.parse()     :将字符串转换为对象类型

    9. 转义

               客户端向服务端请求数据时,将数据经过转义后,保存在cooki中

                 decodeURI( )                   URl中未转义的字符

                 decodeURIComponent( )   URI组件中的未转义字符

                  encodeURI( )                   URI中的转义字符

                  encodeURIComponent( )   转义URI组件中的字符

                  escape( )                         对字符串转义

                   unescape( )                     给转义字符串解码

                   URIError                         由URl的编码和解码方法抛出

           

    ps: 客户端请求服务器端:

                      (cookie)  客户端可以保存东西     

    10. eval

                  JavaScript中的eval是Python中eval和exec的合集,既可以编译代码也可以获取返回值。

                             1)eval() 

                              2)EvalError   执行字符串中的JavaScript代码

                  公司中资产管理一般都用的Excel:

                       Excel表格:其中一个单元格为:8*8,我们想在程序中得到他的结果64,一般做法是,解释为数字8乘以数字8(字符转数字),然后算出他的值,最后得出结果,而在eval中会直接读取8*8,然后返回64.

                       val = eval(表达式) 

                        eg.  val = eval('1+1')

                python中:

                             val = eval(表达式)

                             exec(执行代码):拿不到返回值。

     11.  时间:

                python中:

                            time模块;

                  JavaScript中提供了时间相关的操作,时间操作中分为两种时间:

                           1) 时间统一时间

                               2) 本地时间(东8区)

                             

                           Date类:

                                 var d = new Date()

                                  d.getxxx()

                                  d.setxxx()

    12. 作用域:(*****重要*****)

                      JavaScript中每个函数都有自己的作用域,当出现函数嵌套时,就出现了作用域链。当内层函数使用变量时,会根据作用域链从内到外一层层的循环,如果不存在,则异常。

                        切记:所有的作用域在创建函数且未执行时候就已经存在

                         关于j作用域记住这几句话:      

                               1)以函数作为作用域;

                               2)函数的作用域在函数未被调用之前,已经创建;

                               3)函数的作用域存在作用域链,并且也是在被调用之前创建;    

                               4)函数内部局部变量申明提前。  

                         注:Java,c++,c#:以代码块(一个大括号中的内容)为作用域;

                         在JS (除了let关键字),    python中以函数作为作用域;

    示例1:

    xo = "alex";
    function func(){
        var xo = 'eric'
        function inner(){
             console.log(xo);
         }
        return inner;
    }
    
    var ret = func()
    ret()

    结果:

    eric

        示例2 

    xo = "alex";
    function func(){
        var xo = 'eric'
        function inner(){
             console.log(xo);
         }
        var xo = 'tony'
    return inner; } 

    var ret = func()
    ret()

    结果:

      tony

    13.  JavaScript 面向对象及原型(看不懂........)

                 

              1)  js也支持面向对象

    function foo(){
        var xo = 'zhangsan";
    
    }
    
    foo()
    
    
    function Foo(){
        this.name = n;
    
    }
    
    var obj = new Foo('we')

    与普通函数有两点不同:

    (1)tthis 代指对象(相当于python中的 self)

    (2)创建对象时,用关键字 new 函数名()

                2)原型:
                          为了解决内存里面浪费资源的问题;

  • 相关阅读:
    ES6小点心第二弹——底部浮现弹窗
    ES6小点心之通用弹窗
    从输入URL到页面加载的过程?如何由一道题完善自己的前端知识体系!
    【quickhybrid】如何实现一个Hybrid框架
    【开源】canvas图像裁剪、压缩、旋转
    优雅的H5下拉刷新【minirefresh】
    前端筑基篇(一)->ajax跨域原理以及解决方案
    钉钉开放与商业化团队前端大量招人
    AJAX请求真的不安全么?谈谈Web安全与AJAX的关系。
    【quickhybrid】iOS端的项目实现
  • 原文地址:https://www.cnblogs.com/bltstop/p/10697306.html
Copyright © 2011-2022 走看看