javascript_javascript- - CSDN
javascript 订阅
JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的高级编程语言。虽然它是作为开发Web页面的脚本语言而出名的,但是它也被用到了很多非浏览器环境中,JavaScript 基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式和声明式(如函数式编程)风格。 [1]  JavaScript在1995年由Netscape公司的Brendan Eich,在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作,Netscape管理层希望它外观看起来像Java,因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。 [2]  JavaScript的标准是ECMAScript 。截至 2012 年,所有浏览器都完整的支持ECMAScript 5.1,旧版本的浏览器至少支持ECMAScript 3 标准。2015年6月17日,ECMA国际组织发布了ECMAScript的第六版,该版本正式名称为 ECMAScript 2015,但通常被称为ECMAScript 6 或者ES6。 [1] 展开全文
JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的高级编程语言。虽然它是作为开发Web页面的脚本语言而出名的,但是它也被用到了很多非浏览器环境中,JavaScript 基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式和声明式(如函数式编程)风格。 [1]  JavaScript在1995年由Netscape公司的Brendan Eich,在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作,Netscape管理层希望它外观看起来像Java,因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。 [2]  JavaScript的标准是ECMAScript 。截至 2012 年,所有浏览器都完整的支持ECMAScript 5.1,旧版本的浏览器至少支持ECMAScript 3 标准。2015年6月17日,ECMA国际组织发布了ECMAScript的第六版,该版本正式名称为 ECMAScript 2015,但通常被称为ECMAScript 6 或者ES6。 [1]
信息
软件版本
ECMAScript 6 [1]
实现功能
人机交互
软件平台
Chrome、IE、Safari、Firefox等 [3]
语言类型
脚本语言
原    名
Livescript
软件语言
JavaScript
开发商
Netscape、Mozilla基金会
软件名称
JavaScript
更新时间
2016年4月 [1]
javascript组成部分
ECMAScript,描述了该语 言的语法和基本对象。 [4]  文档对象模型(DOM),描述处理网页内容的方法和接口。 [4]  浏览器对象模型(BOM),描述与浏览器进行交互的方法和接口。 [4] 
收起全文
  • 细说JavaScript

    2019-12-18 15:10:44
    本课程包含14章59个小节课程,内容涵盖:JavaScript 简介、JavaScript基本语法、JavaScript 数据类型、表达式和运算符、语句和流程控制、对象、数组、函数、window 对象、DOM 访问,jQuery等。
  • Javascript基础到入门

    2019-06-27 10:50:23
    Javascript基础到入门视频,该课程主要围绕JavaScript能做什么?JavaScript应用场合、JavaScript的学习方法三大话题展开教学。 讲师介绍:张中强,诺客科技技术总监/研发总监。 丰富的项目经验,善于用精炼的代码...
  • 学透JavaScript

    2020-03-30 10:50:56
    JavaScript是前端程序员的必修课,也是目前流行的各前端框架的基础知识。本课程将全面剖析JavaScript的运行机制,掌握最核心的语法和编程思维、使用丰富的实例来帮助学员的理解JavaScript、jQurey和AJAX技术。介绍...
  • 什么是JavaScript JavaScript是一种基于对象和事件驱动的、并具有安全性能的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过...

    什么是JavaScript

    JavaScript是一种基于对象和事件驱动的、并具有安全性能的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

    JavaScript特点

    1. 是一种解释性脚本语言(代码不进行预编译)。 

    2. 主要用来向HTML标准通用标记语言下的一个应用)页面添加交互行为。 

    3. 可以直接嵌入HTML页面,但写成单独的js文件有利于结构和行为的分离。 

    4. 跨平台特性,在绝大多数浏览器的支持下,可以在多种平台下运行(如WindowsLinux、Mac、Android、iOS等)。

    JavaScript组成

    JavaScript日常用途

    1. 嵌入动态文本于HTML页面。 

    2. 对浏览器事件做出响应。 

    3. 读写HTML元素。 

    4. 在数据被提交到服务器之前验证数据。 

    5. 检测访客的浏览器信息。 

    6. 控制cookies,包括创建和修改等。 

    7. 基于Node.js技术进行服务器端编程。

    JavaScript的基本结构

    <script type="text/javascript">
        <!—
              JavaScript 语句;
        —>
    </script >
    

    示例:

    ……
    <title>初学JavaScript</title>
    </head>
    <body>
    <script type="text/javascript">
        document.write("初学JavaScript");
        document.write("<h1>Hello,JavaScript</h1>");
    </script>
    </body>
    </html>
    

    <script>…</script>可以包含在文档中的任何地方,只要保证这些代码在被使用前已读取并加载到内存即可

    JavaScript的执行原理

    网页中引用JavaScript的方式

    1.使用<script>标签

    2.外部JS文件

    <script src="export.js"  type="text/javascript"></script>
    

    3.直接在HTML标签中

    <input name="btn" type="button" value="弹出消息框"   
       onclick="javascript:alert('欢迎你');"/>
    

    JavaScript核心语法:

    1. 变量

    ①先声明变量再赋值

    var   width;

    width = 5;

    var -  用于声明变量的关键字

    width - 变量名

    ②同时声明和赋值变量

    var catName= "皮皮";

    var x, y, z = 10;

    ③不声明直接赋值【一般不使用】

    width=5;

    变量可以不经声明而直接使用,但这种方法很容易出错,也很难查找排错,不推荐使用。

     

    2. 数据类型

    ①undefined:示例:var width;

    变量width没有初始值,将被赋予值undefined

    ②null:表示一个空值,与undefined值相等

    ③number:

    var iNum=23;     //整数

    var iNum=23.0;    //浮点数

    ④Boolean:true和false   但是JS会把他们解析成1;0

    ⑤String:一组被引号(单引号或双引号)括起来的文本 var string1="This is a string";

     

    3. typeof运算符

    typeof检测变量的返回值;typeof运算符返回值如下:

    ①undefined:变量被声明后,但未被赋值.

    ②string:用单引号或双引号来声明的字符串。

    ③boolean:true或false。

    ④number:整数或浮点数。

    ⑤object:javascript中的对象、数组和null。

     

    4. String对象

    ①属性:

    字符串对象.length

    var str="this is JavaScript";

    var strLength=str.length;      //长度是18

    ②方法:

    字符串对象.方法名();

    split(str):如果语法写成width.split(" ")【冒号中间有空格】此时:width height hello world会被拆分成:width,height,hello,world;如果语法写成width.split("")【冒号中间没有空格】此时:width height hello world会被拆分成:w,i,d,t,h, ,h,e,i,g,h,t, ,h,e,l,l,o, ,w,o,r,l,d

    5. 数组:

    ①创建数组:

    ②为数组元素赋值:

    方法一:var fruit= new Array("apple", "orange", " peach","banana");

    方法二:

    var fruit = new Array(4);

    fruit [0] = " apple ";

    fruit [1] = " orange ";

    fruit [2] = " peach ";

    fruit [3] = " banana ";

     

    ③访问数组:

    数组名[下标]

     

    6. 数组的常用属性和方法:

    更多方法可查阅JavaScrpt Array对象参考手册:http://www.w3school.com.cn/js/jsref_obj_array.asp

    7. 运算符号

    8. 逻辑控制语句

    ①if条件语句

    if(条件)
    
    {  //JavaScript代码;  }
    
    else
    
    {  //JavaScript代码;  }

    If·中0,null,” ”,undefined,NaN,false--------结果是false;其他的都是true!

    ②switch多分支语句

    switch (表达式)
    
    {  case 常量1 :
    
          JavaScript语句1;
    
      break;
    
       case 常量2 :
    
            JavaScript语句2;
    
      break;
    
    default :
    
          JavaScript语句3;  }

    ③for、while循环语句

    for(初始化;  条件;  增量)
    
     {  JavaScript代码;  }
    
    while(条件)
    
     {  JavaScript代码;  }

    ④for-in

    var fruit=[ "apple", "orange", "peach","banana"];
    
    for(var i in fruit){
    
       document.write(fruit[i]+"<br/>");  }

    i就是数组的下标,in这个数组要查询所有的数组下标

     

    9. 循环中断

    ①break

    <script type="text/javascript">
    
    var i=0;
    
    for(i=0;i<=5;i++){
    
    if(i==3){  break;  }
    
      document.write("这个数字是:"+i+"<br/>");  }
    
    </script>

    ②continue

    <script type="text/javascript">
    
    var i=0;
    
    for(i=0;i<=5;i++){
    
    if(i==3){  continue;  }
    
      document.write("这个数字是:"+i+"<br/>");  }
    
    </script>

     

    10. 注释

    ①单行注释以 // 开始,以行末结束:

    //alert("恭喜你!注册会员成功");

    //在页同上弹出注册会员成功的提示框

    //注释

    如果在页面里单行注释中回车打一些东西此时就会报错:Uncaught ReferenceError: XXXX is not defined

    ②多行注释以 /* 开始,以 */ 结束,符号 /*…… */ 指示中间的语句是该程序中的注释

    /*   使用for循环运行“document.write("<h3>Hello World</h3>");”5次

    使用document.write在页面上输出“Hello World”   */

     

    11. 常用的输入/输出

    【输出一般使用alert;输入使用prompt;但是后期不建议使用alert,在真实的开发中一般使用console.Log( )】

    ①alert()【一般用在一些警告或者提示中】:

    alert("提示信息");

    ②prompt()

    prompt("提示信息", "输入框的默认信息");

    prompt("请输入你喜欢的颜色","红色");

    prompt("请输入你喜欢的颜色","");

     

    12. 语法约定

    ①代码区分大小写

    小写写成大写会报错:Uncaught SyntaxError: Unexpected identifier

    ②变量、对象和函数的名称

    当声明变量、对象和函数的名称时大小写,数字,下划线,美元符号都可以,但是必须以字母,下划线,美元符号开头

    否则会报错:Uncaught SyntaxError: Invalid or unexpected token

     

    ③分号

    如果不写会报错:Uncaught SyntaxError: Invalid or unexpected token

     

    程序调试:

    Chrome开发人员工具:

    1. 停止断点调试
    2. 单步调试,不进入函数体内部
    3. 单步调试,进入函数体内部
    4. 跳出当前函数
    5. 禁用所有的断点,不做任何调试

    alert()方法:

    直接打印信息,直接在页面上看到具体信息

    【但是一般使用console.Log( ),因为使用alert( )很容易忘掉删除,当使用alert( )进行弹出时,最后产品上线后,会降低用户体验,所以使用console.Log( )就会避免这个问题】

     

    函数:

    什么是函数?

    函数的含义:类似于Java中的方法,是完成特定任务的代码语句块;使用更简单:不用定义属于某个类,直接使用;函数分类:系统函数和自定义函数

     

    常用系统函数:

    parseInt ("字符串"):将字符串转换为整型数字

    如: parseInt ("86")将字符串“86“转换为整型值86

    当为parseInt ("86a")时输出还是86

    当为parseInt ("86a21")时输出还是86

    当为parseInt ("a86a")时输出NaN

     

    parseFloat("字符串"):将字符串转换为浮点型数字

    如: parseFloat("34.45")将字符串“34.45“转换为浮点值34.45

    isNaN( ):用于检查其参数是否是非数字

    isNaN("111")会输出false

    isNaN(true)会输出false

    isNaN("true")会输出true

    isNaN("aaa")会输出true

    isNaN("111a")会输出true

    自定义函数

    1.定义函数

    2.调用函数

    函数调用一般和表单元素的事件一起使用,调用格式

    事件名= "函数名( )" ;

    一、调用无参函数

    调用无参函数,输出5次欢迎学习JavaScript

    示例:

    function study( ){
            for(var i=0;i<5;i++){
                document.write("<h4>欢迎学习JavaScript</h4>");
            }
        }
    

    单击此按钮时,调用函数study( ),执行函数体中的代码

    <input name="btn" type="button"
       value="显示5次欢迎学习JavaScript"  onclick="study( )" />
    

    二、调用有参函数

    根据输入的次数,显示“欢迎学习JavaScript

    示例:

    function study(count){
            for(var i=0;i<count;i++){
                document.write("<h4>欢迎学习JavaScript</h4>");
            }
        }
    

    单击此按钮时,调用函数study (count ),执行函数体中的代码

    <input name="btn" type="button" value="请输入显示欢迎学习JavaScript的次数"
      onclick="study(prompt('请输入显示欢迎学习JavaScript的次数:',''))" />
    

    变量的作用域:

    1. 全局变量
    2. 局部变量
    <body onload="second( )">
    
        var i=20;    【这是一个全局变量】
    
        function first( ){
    
            var i=5;    【这是一个局部变量】
    
            for(var j=0;j<i;j++){
    
                document.write("&nbsp;&nbsp;&nbsp;&nbsp;"+j);  }  }
    
        function second( ){
    
            var t=prompt("输入一个数","")
    
            if(t>i)     【此时t和全局变量i作比较】
    
                document.write(t);
    
            else
    
                document.write(i);
    
            first( );  }

    事件

     

    展开全文
  • 包括了 Javascript ES5\ES6\ES7 新特性,很多大公司都要求 javascript 程序,采用新的 javascript ES6 语法写程序,所以掌握 Javascript 新特性,是十分必要的,这些特性根本上来说,目的是让 Javascript 能开发大型...
  • JavaScript

    2017-12-01 21:55:13
    1、javaScript的概念:是一种表述语言,也是一种基于对象(Object)和事件驱动(EventDriven)的,安全性好的脚本语言,运行在客户端,从而减轻服务器端的负担,总结如下:  1.javaScript主要用来向HTML页面找那个...

    1、javaScript的概念:是一种表述语言,也是一种基于对象(Object)和事件驱动(EventDriven)的,安全性好的脚本语言,运行在客户端,从而减轻服务器端的负担,总结如下:

      1.javaScript主要用来向HTML页面找那个添加交互行为。

      2.javaScript是一种脚本语言,语法和java类似。

      3.javaScript一般用来编写客户端脚本。

      4.javaScript是一种解释性语言,边执行边解释。

    2、javaScript由核心语法ECMAScript、浏览器对象模型(BOM) 主要用于管理窗口与窗口之间的通讯,因此其核心对象是window、文档对象模型(DOM)三部分组成.

    3、网页中引入javaScript三种方式:

      1.使用<Script></Script>标签内部样式

      2.使用外部js文件

      3.直接在HTML标签中的行内样式。

    4.javaScript的作用

    1.实现页面表单验证

    2.实现页面交互特效

    5.javaScript的特点

      1.被设计用来向Html页面添加交互行为

      2.是一种英特网上最流行的脚本语言

      3.一般用于编写客户端脚本

      4.是一种解释性语言

    6.引入javaScript的方式

       1.使用<Script>标签直接嵌入网页

       2.使用外部js文件

    Js中String对象常用的方法:

    1. toString(包前不包后),2.toLowerCase();toUpperCase();
    2. charAt(index);返回在指定位置的字符,indexOf(str,index);指定字符串中首次出现的位置;split(str);将字符串分割为字符串数组

    在javaScript中条件语句Switch(){}可以接字符串;

    alert(“提示信息”);

       var isOk=confirm(“确认框“);//如果确认返回true,否则返回false

       prompt();prompt(“提示信息”,“输入框默认信息”);

    prompt(“请输入姓名”)

    close();

       open();

       setTimeout();在指定毫秒之后调用某个函数

       setInterval();在指定周期毫秒来调用某个函数

    window.open();

    7.Js语法:

    1.区分大小写

    2.注意变量,函数等命名规范

    3.每行代码以分号结束

    Js中的函数:

    1.系统函数 

       ParseInt();转换为整数  45.9a转换为45;a6转换返回为NaN(Not a Number)

       isNaN(判断是不是数字)

       typeof(var);判断是什么数据类型

       eval(“5+2”);计算表达式值

    2.自定义函数

     Function 函数名(){javaScript代码}

     Function 函数名(参数1,参数2){javaScript代码  return 返回值(可选)}

    Js中函数的调用:

    1. 事件名=“函数名(传递的参数值)“;
    2. 函数名(传递的参数值);

    匿名函数:

    1. 匿名函数的声明:

    Var 变量名=function(参数){  函数体  return 返回值;} ;

    1. 调用

    变量名(参数)

    8.程序调用

      1.添加alert();方法 2.使用fireBug();方法

    9.BOM概述:(Browser Object Model,浏览器对象模型)

     1.window对象的属性

    名称

    说明

    History

    有关客户访问过的URL的信息

    Location

    有关当前URL的信息

    Screen

    有关客户端的屏幕和显示性能的信息

    Weindow对象常用的方法:prompt()confirm();setTimeout();setInterval();

    Window对象常用的事件:οnlοad=”” οnmοuseοver=””;onclick

    window.parent.location

    2.History对象

      方法:back() ;forward();go();

    3.Location对象提供当前页面的URL

      属性:host hostname href

      方法:reload() replace();

    4.Document对象

      属性:referrer属性判断是不是通过超链接访问的,不是返回null

    10.javaScript中的对象,

       Date对象:

      创建date对象发方法var date=new Date(MM DD ,YYYY,hh:mm:ss);

                         var  date=new Date(); date.getDay();

        Math对象:

         Ceil();对数进行向上取整,ceil(25.5)=26;

        Floor();向下取整,floor(25.5)=25;

         Math.round(25.5);在原数的加0.5后向下取整

    11.Dom概述(文档对象模型)

      由CoreDom,XMLDom,HTML Dom组成;

    12.创建数组

       Js中变量的声明:

       Var 数组名称=new Array(size);

    1. 先声明再赋值 fruit[0]=””
    2. 声明同时赋值 var fruit=new Array(“apple”,”orange”);或 var fruit=new Array[“apple”,”orange”];

    读取1.使用for循环读取 2.使用for---in读取

    For(var x in fruit){document.write(fruit[x]+”<br/>”)}x为下标

    Fruit.sort();//排序 string str=fruit.join(“-”);//添加字符串后连接成一个字符串

    下拉列表Select对象:

      

    13、 style 定位方面的样式

      left top  position  z-index

      鼠标滚动距离:scorllTop:纵向距离

             scorllLeft:横向距离

      鼠标滚动事假:onscorll

    Jquery对象与Dom对象的相互转换

    1. jquery对象转换为DOMD对象,jquery提供两种方法将jquery对象转换为DOM对象,即[index]和get(index),

    var $txtName=$(“#txtName”);//jquery对象

    var txtName=$txtName[0];//Dom对象

    alert(txtName.checked);//检测这个checkbox是否被选中

    通过get(index)方法得到对应的Dom对象

    Var $txtName=$(“#txtName”);//jquery对象

    Var txtName=$txtName.get(0);//Dom对象

    alert(txtName.checked);//检测这个checkbox是否被选中

    1. Dom对象转换为jQuery对象

    Var txtName=document.getElementById(“txtName”);//dom对象

    Var $txtName=$(txtName);//

    Dom中添加class属性使用obj.className=classname;

          添加类容使用obj.innerHtml=<input />

    Jquery中添加class属性使用obj.addClaa=classname;

          添加类容使用:obj.html=<input/>;

    Jqurey中的五大选择器:

    1. 基本选择器 (#  .  标签)
    2. 层次选择器(后代 >子    +相邻    ~同辈)
    3. 属性选择器(P[class=name])
    4. 过滤选择器(“tr:even”)
    5. 可见性选择器(“p:hidden” “p:viside”)

    Jquery中的事件:

       Obj.bind(“clike”,function(){});

    obj.bind({mousever:function(){},{mouserout:function(){}}});

      obj.unbind();

    obj.hover(function(){},function(){})方法集合onmouseOver和onmouseOut

    obj.toggle();

    $(“.tipsbox”).show();obj.hide();

    $(“img”).fadeIn(1000);

    $(“.txt”).slideUp(1000); obj.slideDown(1000);

    Obj.toggleClass(“class”);//集成了addClass和romoveClass

    $(this).val(“”);//清空文本内容

    Var $newNode=$(<”<li>用jquery创建新元素节点</li>”>);

    在正则表达式

      

     

    JS中常用的一些小技巧:

    1.使用!!操作符转换布尔值,对于变量可以使用!!varable做检测,只要变量的值为:0,null , "" , undefind或者NaN都将返回的是false反之的是true

    function Account(cash) 

    this.cash = cash; 
    this.hasMoney = !! cash;
    }

    2.使用+将字符串转换为数字,只适用字符串数据,否则返回NaN

    function toNumber(strNum) {
    return +strNum;
    }

    适用于Date()返回时间戳数字:+new Date();

    3.在循环很大时候数字的长度先给去出来,var legth = array.legth;

    4.if('querySelector' in document) {

    document.querySelector("#id");
    } else {
    document.getElementById("id");
    }

    5.获取数组中的最后一个元素

    var array = [1,2,3,4,5];
    array.slice(-1);

    6.字符串元素的替换

    var string = "john john";
    string.replace(/hn/, "ana"); //"joana john"
    string.replace(/hn/g, "ana"); //"joana joana"



    以上为javascript的总结内容。







    警告

    请使用 document.write() 仅仅向文档输出写内容。

    如果在文档已完成加载后执行 document.write,整个 HTML 页面将被覆盖:

    实例

    <!DOCTYPE html>
    <html>
    <body>
    
    <h1>My First Web Page</h1>
    
    <p>My First Paragraph.</p>
    
    <button οnclick="myFunction()">点击这里</button>
    
    <script>
    function myFunction()
    {
    document.write("糟糕!文档消失了。");
    }
    </script>
    
    </body>
    </html>
    

    亲自试一试

    #当你需要在某个页面同时执行两个变化处时使用{}

    JavaScript 代码块

    JavaScript 语句通过代码块的形式进行组合。

    块由左花括号开始,由右花括号结束。

    块的作用是使语句序列一起执行。

    JavaScript 函数是将语句组合在块中的典型例子。

    下面的例子将运行可操作两个 HTML 元素的函数:

    实例

    function myFunction()
    {
    document.getElementById("demo").innerHTML="Hello World";
    document.getElementById("myDIV").innerHTML="How are you?";
    }
    

    亲自试一试


    JavaScript 对大小写敏感。

    JavaScript 对大小写是敏感的。

    当编写 JavaScript 语句时,请留意是否关闭大小写切换键。

    函数 getElementById 与 getElementbyID 是不同的。

    同样,变量 myVariable 与 MyVariable 也是不同的。

    空格

    JavaScript 会忽略多余的空格。您可以向脚本添加空格,来提高其可读性。下面的两行代码是等效的:

    var name="Hello";
    var name = "Hello";
    
    提示JavaScript 是脚本语言。浏览器会在读取代码时,逐行地执行脚本代码。而对于传统编程来说,会在执行前对所有代码进行编译。

    JavaScript 变量

    与代数一样,JavaScript 变量可用于存放值(比如 x=2)和表达式(比如 z=x+y)。

    变量可以使用短名称(比如 x 和 y),也可以使用描述性更好的名称(比如 age, sum, totalvolume)。

    • 变量必须以字母开头
    • 变量也能以 $ 和 _ 符号开头(不过我们不推荐这么做)
    • 变量名称对大小写敏感(y 和 Y 是不同的变量)

    提示:JavaScript 语句和 JavaScript 变量都对大小写敏感。

    JavaScript 数据类型

    JavaScript 变量还能保存其他数据类型,比如文本值 (name="Bill Gates")。

    在 JavaScript 中,类似 "Bill Gates" 这样一条文本被称为字符串。

    JavaScript 变量有很多种类型,但是现在,我们只关注数字和字符串。

    当您向变量分配文本值时,应该用双引号或单引号包围这个值。

    当您向变量赋的值是数值时,不要使用引号。如果您用引号包围数值,该值会被作为文本来处理。


    我们使用 var 关键词来声明变量:

    var carname;
    提示一个好的编程习惯是,在代码开始处,统一对需要的变量进行声明。

    JavaScript 函数和事件

    上面例子中的 JavaScript 语句,会在页面加载时执行。

    通常,我们需要在某个事件发生时执行代码,比如当用户点击按钮时。

    如果我们把 JavaScript 代码放入函数中,就可以在事件发生时调用该函数。

    您将在稍后的章节学到更多有关 JavaScript 函数和事件的知识。

    通常的做法是把函数放入 <head> 部分中,或者放在页面底部。这样就可以把它们安置到同一处位置,不会干扰页面的内容。

    提示在面向对象的语言中,属性和方法常被称为对象的成员。

    提示在面向对象的语言中,使用 camel-case 标记法的函数是很常见的。您会经常看到 someMethod() 这样的函数名,而不是 some_method()。

    函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

    调用带参数的函数

    在调用函数时,您可以向其传递值,这些值被称为参数。

    这些参数可以在函数中使用。

    您可以发送任意多的参数,由逗号 (,) 分隔:

    myFunction(argument1,argument2)

    当您声明函数时,请把参数作为变量来声明:

    function myFunction(var1,var2)
    {
    这里是要执行的代码
    }
    

    变量和参数必须以一致的顺序出现。第一个变量就是第一个被传递的参数的给定的值,以此类推。

    实例

    <button οnclick="myFunction('Bill Gates','CEO')">点击这里</button>
    
    <script>
    function myFunction(name,job)
    {
    alert("Welcome " + name + ", the " + job);
    }
    </script>
    

    亲自试一试

    上面的函数会当按钮被点击时提示 "Welcome Bill Gates, the CEO"。

    函数很灵活,您可以使用不同的参数来调用该函数,这样就会给出不同的消息:

    实例

    <button οnclick="myFunction('Harry Potter','Wizard')">点击这里</button>
    <button οnclick="myFunction('Bob','Builder')">点击这里</button>
    

    亲自试一试

    ?????根据您点击的不同的按钮,上面的例子会提示 "Welcome Harry Potter, the Wizard" 或 "Welcome Bob, the Builder"。

    在您仅仅希望退出函数时 ,也可使用 return 语句。返回值是可选的:

    function myFunction(a,b)
    {
    if (a>b)
      {
      return;
      }
    x=a+b
    }
    

    如果 a 大于 b,则上面的代码将退出函数,并不会计算 a 和 b 的总和。

    展开全文
  • javascript

    2020-07-29 14:21:49
    javascript官方文档,web前端师的权威文档,web前端的
  • 在了解了javascript的语言基础和特性后 javascript真正大放光彩的地方来了——这就是javascript DOM Javascript DOM DOM(Document Object Model),文档对象模型。 是W3C组织推荐的处理可扩展标记语言(HTML...

     

    在了解了javascript的语言基础和特性后

    javascript真正大放光彩的地方来了——这就是javascript DOM

     

    Javascript DOM

    DOM(Document Object Model),文档对象模型。

    是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口;W3C已经定义了一系列DOM接口,通过这些DOM接口可以改变网页的内容、结构和样式。

    简单的说就是一套操作文档内容的方法。

    需要注意的是,我们需要把DOM当作一个整体,不能分割看待,即DOM(文档对象模型)是一套操作文档内容的方法。

    这里写图片描述

    • 文档:一个页面就是一个文档,DOM中使用document表示
    • 元素:页面中的所有标签都是元素,DOM中使用element表示
    • 节点:网页中的所有内容都是节点(标签、属性、文本、注释等),DOM中使用node表示

    DOM把以上内容看作都是对象

     

    实例:

    <!DOCTYPE html>
    <html>
    <head>
        <title>Shopping list</title>
        <meta charset="utf-8">
    </head>
    <body>
    <h1>What to buy</h1>
    <p id="buy" title="a gentle reminder">Don't forget to buy this stuff</p>
    <ul id="purchases">
        <li>A tin od beans</li>
        <li>Cheese</li>
        <li>Milk</li>
    </ul>
    </body>
    </html>

    用树表示这个网页的结构:

     

     

    1、获取DOM四种基本方法

    1、getElementById()

    2、getElementsByTagname()

    3、getAttribute()

    4、setAttribute()

     

    常用的两种解析:

    1. getElementById():

    参数:元素的ID值。 (元素节点简称元素) 
    返回值:一个有指定ID的元素对象(元素是对象) 
    注:这个方法是与document对象相关联,只能由document对象调用。 
    用法:document.getElementById(Id) 

    例:

    typeof document.getElementById("purchases");//object

    代码演练:

    <!DOCTYPE html>
    <html lang="zh">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    
    <body>
        <div id="time">2020-04-16</div>
        <script>
            // 1. 因为我们文档页面从上往下加载,所以先得有标签 所以我们script写到标签的下面
            // 2. get 获得 element 元素 by 通过 驼峰命名法 
            // 3. 参数 id是大小写敏感的字符串
            // 4. 返回的是一个元素对象
            var timer = document.getElementById('time');
            console.log(timer);
            console.log(typeof timer);
            // 5. console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法
            console.dir(timer);
        </script>
    </body>
    
    </html>

    看一下控制台打印的是什么

    可以看到 console.log(timer)打印出来的是整个div标签

    timer类型是个对象

     

    2. getElementsByTagName():

    参数:元素名
    返回值:一个对象数组。这个数组里每个元素都是对象,每个对象分别对应着文档里给定标签的一个元素。
    注:这个方法可和一般元素关联。这个方法允许我们把通配符当作它的参数,返回在某份html文档里总共有多少个元素节点。
    用法:element.getElementsByTagName(TagName) 

    例:

    var items=document.getElementsByTagName("li");
    items.length;//3
    document.getElementsByTagName(“*”);//12

     

     

    2、事件基础

    3.1 事件概述

    JavaScript使我们有能力创建动态页面,而事件是可以被JavaScript侦测到的行为。

    简单理解:触发——>响应机制

    网页中每个元素都可以产生某些可以触发JavaScript的事件,例如,我们可以在用户点击某按钮产生一个事件,然后去执行某些操作

    3.2 事件三要素

    事件源 、事件类型、事件处理程序,我们也称为事件三要素

    (1) 事件源 事件被触发的对象   谁  
    (2) 事件类型  如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下
    (3) 事件处理程序  通过一个函数赋值的方式 完成

    代码实例

    <!DOCTYPE html>
    <html lang="zh">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    
    <body>
        <button id="btn">唐伯虎</button>
        <script>
            // 点击一个按钮,弹出对话框
            // 1. 事件是有三部分组成  事件源  事件类型  事件处理程序   我们也称为事件三要素
            //(1) 事件源 事件被触发的对象   谁  按钮
            var btn = document.getElementById('btn');
            //(2) 事件类型  如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下
            //(3) 事件处理程序  通过一个函数赋值的方式 完成
            btn.onclick = function() {
                alert('点秋香');
            }
        </script>
    </body>
    
    </html>

    运行结果

     

    3.3 执行事件的步骤

    1、获取事件源

    2、注册事件(绑定事件)

    3、添加事件处理程序(采取函数赋值形式)

     

    代码实战

    <!DOCTYPE html>
    <html lang="zh">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    
    <body>
        <div>123</div>
        <script>
            // 执行事件步骤
            // 点击div 控制台输出 我被选中了
            // 1. 获取事件源
            var div = document.querySelector('div');
            // 2.绑定事件 注册事件
            // div.onclick 
            // 3.添加事件处理程序 
            div.onclick = function() {
                console.log('我被选中了');
    
            }
        </script>
    </body>
    
    </html>

    运行结果

    鼠标点击123—>控制台打印

     

    常用的DOM事件

    • onclick事件---当用户点击时执行
    • onload事件---当用户进入时执行
    • onunload事件---用用户离开时执行
    • onmouseover事件---当用户鼠标指针移入时执行
    • onmouseout事件---当用户鼠标指针移出时执行
    • onmousedown事件---当用户鼠标摁下时执行
    • onmouseup事件---当用户鼠标松开时执行

     

     后续~~~~

    展开全文
  • 前面的话 小柒整理的这8个问题,考查范围很广,js常见知识点都考查到了。比如变量提升、作用域、闭包、js运行机制、宏任务(微任务)、this指向以及es6中的let、Symbol、迭代器、生成器。 题目 ...

    前面的话

    小柒整理的这8个问题,考查范围很广,js常见知识点都考查到了。比如变量提升、作用域、闭包、js运行机制、宏任务(微任务)、this指向以及es6中的let、Symbol、迭代器、生成器。

    题目

    问题1:浏览器控制台上会打印什么?
    var a = 10;
    function foo() {
        console.log(a); // ??
        var a = 20;
    }
    foo();
    

    解析:
    本题考查变量提升。使用var关键字声明的变量会被提升,代码相当于这样:

    var a = 10;
    function foo() {
    	 var a ;
        console.log(a); // ??
         a = 20;
    }
    foo();
    

    则输出undefined

    问题2:如果我们使用 let 或 const 代替 var,输出是否相同
    var a = 10;
    function foo() {
        console.log(a); // ??
        let a = 20;
    }
    foo();   
    

    let与const不存在变量提升,并且有一个暂时死区(TDZ), 试图访问TDZ中的变量将会引发错误,只有在执行声明语句之后才能访问。

    var a = 10; // 全局使用域
    function foo() { 
    // 死区 TDZ 开始
    
    // 创建了未初始化的'a'
        console.log(a); // ReferenceError
    
    // 死区TDZ结束,'a'仅在此处初始化,值为20
        let a = 20;
    }
    

    注意:不要觉得let不能变量提升,就可以访问全局作用域中的变量a。 只要访问上面的TDZ中的变量就会发生错误。

    问题3:"newArray"中有哪些元素?
    var array = [];
    for(var i = 0; i <3; i++) {
     array.push(() => i);
    }
    var newArray = array.map(el => el());
    console.log(newArray); // ??   
    

    解析:

    本题考查闭包。在for循环中每一次push一个方法,for循环完成之后,push了三个方法。此时i已经是3。在使用map方法对每一项进行调用,并且返回,而i已经是3。所以返回[3,3,3]

    箭头函数不好看,可以将上面的代码写成:

    var array = [];
    for(var i = 0; i <3; i++) {
     array.push(function() {return i});
    }
    var newArray = array.map(function(item){
        return item();
    });
    console.log(newArray); // ??   
    

    如果想输出[0,1,2]该如何改?

    • 方法1:将var改为let

      var array = [];
      for(let i = 0; i <3; i++) {
       array.push(() => i);
      }
      var newArray = array.map(el => el());
      console.log(newArray); // ??   
      
    • 方法2:改成闭包

      var array = [];
      	for(let i = 0; i <3; i++) {
      	 array[i] = (function(i) {
      	 	return function() {
      	 		return i;
      	 	}
      	 }(i))
      	}
      	var newArray = array.map(el => el());
      	console.log(newArray); // ??   
      
    问题4:如果我们在浏览器控制台中运行’foo’函数,是否会导致堆栈溢出错误?
    function foo() {
      setTimeout(foo, 0); // 是否存在堆栈溢出错误?
    };  
    foo();  
    

    解析:

    本题考查js运行过程。

    一张图解释:
    在这里插入图片描述

    • 调用foo()会将foo函数放入调用堆栈(call stack)
    • 在处理内部代码时,js引擎遇到setTimeout,将其回调函数foo传递给WebAPI,此时调用堆栈为空
    • 计时器被设置为0,因此回调函数foo将被发送到任务队列
    • 由于调用堆栈是空,所以事件循环将选择foo回调并将其推入堆栈进行处理。(一定等调用堆栈为空,才能调用)
    • 进程再次重复上述过程,堆栈不会溢出。

    示意图:
    在这里插入图片描述

    问题5: 如果在控制台中运行以下函数,页面(选项卡)的 UI 是否仍然响应
    function foo() {
      return Promise.resolve().then(foo);
    };  
    

    解析:

    本题考查宏任务、微任务

    在上题中,我们碰到的setTimeout就是一个宏任务,宏任务将在一个循环周期后一次一个被推入调用堆栈被执行。但是本题的promise的then方法是一个微任务,它是在同步任务之后执行的始终,都在单个循环周期里面。

    本题中永远都在处理微任务,单个事件循环永远不会结束,永远不会发生响应。也会阻塞其他的事件渲染。

    问题6: 我们能否以某种方式为下面的语句使用展开运算而不导致类型错误
    var obj = { x: 1, y: 2, z: 3 };
    [...obj]; // TypeError 
    

    解析:

    本题考查es6语法

    想要被...for-of遍历,就必须有内置的迭代器或者自定义一个迭代器。Array、Map或Set都是具有默认迭代行为的内置迭代器。但是对象是不可迭代的,上面的代码,会报错。

    如果想让对象能够使用...扩展运算符,就必须自定义一个迭代器。就要用到ES6中的Symbol.iterator。对象拥有这个键,就可以指定一个迭代器方法。

    方法1: 直接构造迭代器方法,让其返回一个iterator对象

    var obj = { x: 1, y: 2, z: 3 };
    obj[Symbol.iterator] = function() {
    	// iterator是一个具有next方法的对象,它的返回至少有一个对象,两个属性:value & done
    	return {
            next: function() {
    			if (this.count === 3) {
    				// 设置done为true,表示不能再遍历
                    return { value: this.count, done: true };
    			}
                this.count = this.count + 1;
    			return {value: this.count, done: false};
    		},
    		count: 0
    	};
    };
    console.log([...obj]); // [1, 2, 3]
    

    方法二:使用Generator生成器,它是一种返回迭代器的函数

    var obj = { x: 1, y: 2, z: 3 };
    obj[Symbol.iterator] = function*() {
    	yield 1;
        yield 2;
        yield 3;
    }
    console.log([...obj]); // [1, 2, 3]
    }
    
    问题7:运行以下代码片段时,控制台上会打印什么?
    var obj = { a: 1, b: 2 };
    Object.setPrototypeOf(obj, {c: 3});
    Object.defineProperty(obj, 'd', { value: 4, enumerable: false });
    
    // what properties will be printed when we run the for-in loop?
    for(let prop in obj) {
        console.log(prop);
    }  
    

    解析:

    本题考查:j对象上的访问属性以及fot-in循环

    • 首先为obj设置原型为{c:3}
    • 在obj上添加一个属性d,但是其enumerable:为false,表示d属性不能被遍历
    • 最后for-in循环可以遍历对象本身的可枚举属性以及对象从其原型上继承的属性。
    • 所以打印a、b、c
    问题8:xGetter() 会打印什么值?
    var x = 10;
    var foo = {
      x: 90,
      getX: function() {
        return this.x;
      }
    };
    foo.getX(); // prints 90
    var xGetter = foo.getX;
    xGetter(); // prints ??
    

    解析:

    本题考查this指向。

    • foo.getX() this指向foo,打印90
    • 将foo.getX保存出来赋值给xGetter,this指向window。打印10

    参考文章:

    展开全文
  • Lodash是一个可以提高开发者效率、提高原生JS方法性能的 JavaScript 第三方实用工具库; Lodash特点就是一致性、模块化、高性能。业界赫赫有名,其不需要引入其他第三方依赖,我们在使用的过程中可以直接调用Lodash...
    • Lodash是一个可以提高开发者效率、提高原生JS方法性能的 JavaScript 第三方实用工具库;
    • Lodash特点就是一致性、模块化、高性能。业界赫赫有名,其不需要引入其他第三方依赖,我们在使用的过程中可以直接调用Lodash帮我们封装好的方法;(其模块化特别适用于:创建符合功能的函数、遍历 array(数组)、object (对象)和 string(字符串)等)
    • Lodash使用了一个简单的 _ 符号,十分简洁。

    一、 引入Lodash

    使用Lodash.js,有以下几种方式引入Lodash.js开发包:

    1. js离线文件引入:直接在Lodash中文网下载相关的lodash.js包,放在自己的开发项目中,然后在需要使用的文件中引入:< script src="lodash.js">< /script>
    2. cdn方式引入:一般使用bootcdn来直接在线引入,然后通过cdn加速文件下载访问:
      < script src="https://cdn.bootcss.com/lodash.js/4.17.15/lodash.core.min.js">< /script >
    3. 直接通过安装依赖注入,使用webpack或者glup的打包模式直接在自己的项目中挂载lodash的依赖包,具体如下:
    • 安装依赖
    $ npm i -g npm
    $ npm i --save lodash
    
    • 根据需要,挂载依赖包,例:
    // Load the full build.
    var _ = require('lodash');
    // Load the core build.
    var _ = require('lodash/core');
    // Load the FP build for immutable auto-curried iteratee-first data-last methods.
    var fp = require('lodash/fp');
     
    // Load method categories.
    var array = require('lodash/array');
    var object = require('lodash/fp/object');
     
    // Cherry-pick methods for smaller browserify/rollup/webpack bundles.
    var at = require('lodash/at');
    var curryN = require('lodash/fp/curryN');
    

    注意:如需在 Node.js < 6 的 REPL 环境中使用 Lodash,请安装 n_

    二、 使用Lodash

    • 之所以我们选择Lodash,主要是因为Lodash通过使用数组,数字,对象,字符串等方法,使JavaScript变得更加的简单,大大提高了开发效率。
    • 以下方法,在引入相关的loash依赖包后,就可以按照官方文档直接调用相关的方法来运行
    1. _.cloneDeep(深克隆)
      众所周知:在JS中深度克隆对象是比较困难的,例:JSON.parse(JSON.stringify(obj)) 进行深度克隆。但是,这种方案仅在对象内部没有方法的时候才可行,不然行不通的。
    var obj ={
        a:{
            b:100,
            fun:function(){
                console.log("fun");
            }
        }
    }
       var obj2 = _.cloneDeep(obj);
    
       obj.a.b=2000;
    
       console.log(obj2.a.b,obj.a.b);  // 100  2000
       obj2.a.fun();
    
    1. _.compact(array)
      创建一个除去原数组中所有的假值元素的数组。例如false, null,0," ", undefined, 以及 NaN 都是被认为是“假值”。
    var arr =[1,2,'',null,0,33,"aa"];
    var temArr =  _.compact(arr);  // 把空值 null 0 false 统统去掉
    console.log(temArr);    // [ 1, 2, 33, 'aa' ]
    
    1. _.concat(array, [values])
      创建一个新数组,将array与任何数组 或 值连接在一起,返回连接后的新数组。
    var array = [1,2,3];
    var other = _.concat(array, 2, [3], [[4,5,6]]);
     
    console.log(other); // [ 1, 2, 3, 2, 3, [ 4, 5, 6 ] ]
    
    console.log(array); // [ 1, 2, 3 ]
    
    1. _.chunk(array, [size=1])
      按照size的大小来拆分array数组,将数组(array)拆分成多个 size 长度的区块,并将这些区块组成一个新数组。 如果array 无法被分割成全部等长的区块,那么最后剩余的元素将组成一个区块。返回一个包含拆分区块的新数组(注:相当于一个二维数组)。
    var chunk1 = _.chunk(['a', 'b', 'c', 'd'], 2);
     console.log(chunk1);      // [['a', 'b'], ['c', 'd']]
    var chunk2 = _.chunk(['a', 'b', 'c', 'd'], 3);
     console.log(chunk2);      // [['a', 'b', 'c'], ['d']]
    
    1. _.includes(obj,ele,index)
      第一个参数是需要查询的对象,第二个参数是需要查询的元素,第三个参数是开始查询的下标。
    var obj = {
        'name': '张三',
        'age': 18
    },
    arr = ["张三", "李四", "王五", "赵六"];
    console.log(_.includes(obj, '张三'));    // true
    console.log(_.includes(arr, '李四'));    // true
    console.log(_.includes(arr, '李四',2));  // false
    
    1. _.times()
      比for更加简洁和易于理解。
    _.times(5,function(a){
        console.log(a);  // 0 1 2 3 4
    });
    
    1. _.map()
      是原生JS中的数组方法的升级版,我们可以通过一个字符串而不是回调函数来浏览深度嵌套的对象属性。
    var arr = [{
        "name": "张三",
        "phone": [{"name": "MI"}, {"name": "iphone"}]
    }, {
        "name": "李四",
        "phone": [{"name": "HUAWEI"}, {"name": "honor"}]
    }];
    var jsMap = arr.map(function (owner) {
        return owner.phone[0].name;
    });
    var lodashMap = _.map(arr, 'phone[0].name');
    console.log(lodashMap);    // MI  HUAWEI
    
    1. _.random ()
      该方法也是比较强大与灵活的,我们可以只传入一个参数作为最大值, 也可以指定返回的结果为浮点数。例:_.random(12,18,true)。
    function randomNum(min, max){
        return Math.floor(Math.random() * (max - min)) + min;
    }
    console.log(randomNum(12, 18));
    
    console.log(_.random(12, 18));
    

    先写这么多,还有很多方法可自行查看中文文档,很详细哦,如在测试或学习这些方法时遇到问题,可在下方留言或私信我呦~

    支持
    chrome 43以上、Firefox 38以上、IE 6以上、MS Edge、Safari 5以上、Node.js 8以上环境中测试通过。


    整理不易,希望看完的留下小心心哦~您的支持就是博主最大的动力!

    展开全文
  • windows7 安装 Realm Studio 后,打开报错 ...A JavaScript error occurred in the main process Uncaught Exception: Error: The specified procedure could not be found. W?C:Users)daiang...
  • JavaScript——简介

    2018-03-28 16:29:09
    1.简介JavaScript(Java脚本)是一种基于对象(Object)和事件驱动( Event Driven)并具有安全性能的脚本语言,使用JavaScript可以轻松的实现与HTML的互操作,并且完成丰富的页面交互效果,它是通过嵌入或调入在标准...
  • JavaScript是目前web开发中不可缺少的脚本语言,js不需要编译即可运行,运行在客户端,需要通过浏览器来解析执行JavaScript代码。 诞生于1995年,当时的主要目的是验证表单的数据是否合法。 Java...
  • a href="#"> 点击链接后,页面会向上滚到页首,# ...点击链接后,不想使页面滚到页首,就用href="javascript:void(0)",不要用href="#",return false也有类似作用详解href="#"与href="javascript:void(0)"的区别"#"包
  • 在过去的一年间(2017年),我们对比了近24000篇 JavaScript 文章,并从中挑选出了最好的55篇。我们做了这个目录,认为阅读有经验的程序员写的文章是一个很好的学习方式。在学习了一两门课程之后,您可能在构建和...
  • javascript:void(0) 在某些情况下会有浏览器不兼容的bug。下面我们先来看下javascript:void(0) 的基础介绍及用法,然后再来看使用它会出现什么问题,该怎么解决。 提示:在学习一下内容之前,你可以先通过...
  • ArcGIS for JavaScript

    2018-10-22 21:38:03
    全面介绍ArcGIS for JavaScript 开发
  • JavaScript运行原理解析

    2016-01-31 21:31:50
    发现使用了那么长时间的Javascript,但是对其运行原理还是不清晰,今天特意总结一下,把大神们的理论和自己的总结都记录到下面; 1. 什么是JavaScript解析引擎? 简单地说,JavaScript解析引擎就是能够“读懂”...
  • javaScript基础 概念: 一门客户端脚本语言 *运行在客户端浏览器中,每一个浏览器都有一个JavScript的解析引擎 *脚本语言:不需要编译,直接被浏览器解析执行 功能: 可以增强用户与html页面的交互过程,可以控制...
  • JavaScript是一种描述型脚本语言,它不同于java或C#等编译性语言,它不需要进行编译成中间语言,而是由浏览器进行动态地解析与执行。如果你不能理解javaScript语言的运行机制,或者简单地说,你不能掌握javascript的...
1 2 3 4 5 ... 20
收藏数 2,005,376
精华内容 802,150
关键字:

javascript