javascript_javascriptjavascript - 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]
信息
原    名
Livescript
软件语言
JavaScript
开发商
Netscape、Mozilla基金会
软件名称
JavaScript
更新时间
2016年4月 [1]
软件版本
ECMAScript 6 [1]
实现功能
人机交互
软件平台
Chrome、IE、Safari、Firefox等 [3]
语言类型
脚本语言
javascript组成部分
ECMAScript,描述了该语 言的语法和基本对象。 [4]  文档对象模型(DOM),描述处理网页内容的方法和接口。 [4]  浏览器对象模型(BOM),描述与浏览器进行交互的方法和接口。 [4] 
收起全文
精华内容
参与话题
  • 学透JavaScript

    千人学习 2020-03-30 10:50:56
    JavaScript是前端程序员的必修课,也是目前流行的各前端框架的基础知识。本课程将全面剖析JavaScript的运行机制,掌握最核心的语法和编程思维、使用丰富的实例来帮助学员的理解JavaScript、jQurey和AJAX技术。介绍...
  • HTML-JavaScript基础(非常详细)

    万次阅读 多人点赞 2018-09-15 21:51:43
    什么是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基础到入门

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

    千次阅读 多人点赞 2018-08-09 22:42:58
    JavaScript 标签(空格分隔): 工作学习 整理知识,学习笔记 1.定义、特点、错误 1.1、JS定义 JavaScript 是一种网页编程技术,用来向 HTML 页面添加交互行为 JavaScript 是一种基于对象和事件...

    JavaScript和EXT

    标签(空格分隔): 前端技术

    • 整理知识,学习笔记

    JavaScript

    1.定义、特点、错误

    1.1、JS定义

    JavaScript 是一种网页编程技术,用来向 HTML 页面添加交互行为。
    JavaScript 是一种基于对象和事件驱动的解释性脚本语言,直接嵌入 HTML 页面,由浏览器解释执行代码,不进行预编译。
    

    1.2、JavaScript 的特点

    可以使用任何文本编辑工具编写,只需要浏览器就可以执行程序
    解释执行:事先不编译,逐行执行
    基于对象:内置大量现成对象 
    适宜: 
    客户端数据计算 
    客户端表单合法性验证 
    浏览器事件的触发 
    网页特殊显示效果制作 
    

    1.png-48.9kB

    1.3、定义JS程序三种方式

    A: 定义在html元素中

    <html>
        <head></head>
        <body>
            <form>
        <input type= “buttonvalue=“第一个按钮"  onclick=“alert(‘hello,world.');">
     //加分号方便写多个方法
            </form>
        </body>
    </html> 

    B:定义在

       <script type="text/javascript">    
            alert("我刷新页面就第一个出现");    
            function hello(){
                window.alert("HelloWorld!:)");   window可以省略 
            }
       </script>
        在HTML body代码中如下:
        <input type="button" value="来,继续点我" onclick="hello();">

    C: 引用外部js文件

    代码位于单独的 .js 文件 
    html 页面引用 js 文件 
    
    将 JavaScript  代码写入一个单独的文件,并保存为  .js 后缀
    外部文件不能包含 <script> 标签
    
    function firstFunc()
    {
    alert("hello word!"); 
    }
    html 页面的 <head> 中引用外部的  .js 文件 
    在 <head> 中添加 <script> 标签 
    并设置 <script> 标签的 “src” 属性,以指定 js 文件的 url 
    
    <html>
        <head>
            <script language="JavaScript"  type="text/javascript“    src="myJs.js"> 
            </script> 
        </head>
        <body>
        </body>
    </html> 

    1.4、JavaScript 的代码错误

    解释性代码,代码错误,则无效果 
    Chrome浏览器、Firefox 浏览器等都提供了控制台,可以查看javascript错误信息。 
    

    2、JavaScript 语法

    2.1代码及注释

    注释:// 单行     /*  多行*/
    语句:
    表达式、关键字、运算符组成
    大小写敏感
    使用分号 
    

    2.2常量、标识符与关键字

    2.2.1常量
    直接在程序中出现的数据值
    
    2.2.2标识符
    由不以数字开头的字母、数字、下划线(_)、美元符号('\$')组成
    常用于表示函数、变量等的名称
    例如: _abc , $abc , abc , abc123 是标识符,而 1abc 不是
    保留关键字,如 break、if 等 
    
    2.2.3变量声明
    使用关键字 var 声明变量,如 var x,y;
    
    2.2.4变量初始化
    使用 = 赋值 
    没有初始化的变量则自动取值为undefined
    如: var count = 0;
    变量命名同标识符的规则,大小写敏感
    

    2.3数据类型

    JS数据类型.jpg-104.5kB

    String数据类型
    首尾由单引号或双引号括起
    特殊字符需要转义符
    转义符\,如:\n,\\ ,\’,\’’
    var aa="欢迎来到\"JavaScript世界 ";
    alert(aa); 
    
    number 数据类型
    不区分整型数值和浮点型数值
    所有数字都采用 64 位浮点格式存储,类似于double 格式 
    整数
    10进制的整数由数字的序列组成 
    16进制数据前面加上0x,八进制前面加0
    浮点数
    使用小数点记录数据,如 3.4,5.6
    使用指数记录数据,如 4.3e23 = 4.3 x 1023 
    
    boolean 数据类型
    仅有两个值:true和false 
    也代表1和0 
    实际运算中true=1,false=0 
    多用于结构控制语句 
    

    2.4数据类型转换

    2.4.1隐式转换
    JavaScript 属于松散类型的程序语言
    变量在声明时不需要指定数据类型
    变量由赋值操作确定数据类型
    
    不同类型数据在计算过程中会自动进行转换 
    数字 + 字符串:数字转换为字符串
    数字 + 布尔值:true转换为1,false转换为0
    字符串 + 布尔值:布尔值转换为字符串true或false 
    布尔值 + 布尔值:布尔值转换为数值1或0 
    
    2.4.2数据类型转换函数

    参考链接

    toString :转换成字符串 
    所有数据类型均可转换为 string 类型 
    例如    数值.toString();
    
    parseInt :强制转换成整数 
    
    parseInt(string, radix)
    参数  描述
    string  必需。要被解析的字符串。也可以是非String num类型
    radix   可选。表示要解析的数字的基数。该值介于 2 ~ 36 之间。
    
    如果省略该参数或其值为 0,则数字将以 10 为基础来解析。如果它以 “0x” 或 “0X” 开头,将以 16 为基数。
    
    如果该参数小于 2 或者大于 36,则 parseInt() 将返回 NaN
    如果不能转换,则返回 NaN 
    例如  parseInt("6.32")=6  parseInt(6.32)=6  alert(parseInt(0X011))=(16*1+1) = 17;

    数据类型转换函数

    parseFloat :强制转换成浮点数
    如果不能转换,则返回 NaN
    例如 parseFloat(“6.32”)=6.32
    typeof
    查询数值当前类型,返回 string / number / boolean / object
    例如 typeof(“test”+3)==”string”

    null 与 undefined
    null
    null 在程序中代表“无值”或者“无对象”
    可以通过给一个变量赋值 null 来清除变量的内容
    undefined
    声明了变量但从未赋值或者对象属性不存在

    2.5运算

    2.5.1算术运算

    加(+)、 减(-)、 乘(*) 、除(/) 、余数(% )
    - 可以表示减号,也可以表示负号,如:x=-y
    + 可以表示加法,也可以用于字符串的连接
    递增(++) 、递减(--) i++ 相当于 i=i+1,i– 相当于 i=i-1

    2.5.2关系运算及严格相等

    关系运算用于判断数据之间的大小关系
    “>”(大于),“<”(小于),“>=”(大于等于),“<=”(小于等于),“==”(等于),“!=”(不等于)
    关系表达式的值为boolean类型(“true”或“false”)

    严格相等:= = =
    类型相同
    数值相同
    非严格相等:! = =

    var a = "10";
    var b = 10;
    if (a == b) //true
        alert("equal");
    if (a === b) //false
    alert("same"); 
    2.5.3逻辑运算

    1.png-46.6kB

    2.5.4条件运算符

    条件运算符又称“三目”/“三元”运算符,其结构为:
    boolean表达式 ? 表达式1:表达式2
    先计算 boolean 表达式的值,如果为true,则整个表达式的值为表达式1的值
    如果为false,则整个表达式的值为表达式2的值

    2.6控制语句

    任何复杂的程序逻辑都可以通过“顺序”,“分支”,“循环”三种基本的程序结构实现
    语句为顺序执行
    可以使用控制语句改变程序的执行顺序

    2.6.1 if语句

    关系表达式:TRUE: 1,-1, 0.1, FALSE: 0,null,undefined
    ifelse.png-82.2kB

    2.6.2 switch-case语句

    1.png-82kB

    2.6.3 for语句

    for.png-74.2kB

    2.6.4 while语句

    while.png-54kB

    3、JavaScript对象Object简介

    3.1 定义:

    JavaScript是一种基于对象的语言,对象是 JavaScript 中最重要的元素

    3.2 对象分类:

    JavaScript中对象非常多,主要有以下类型
    A、内置对象:
    HTML DOM对象 、HTML 元素对象 、浏览器对象、自定义对象
    B、常用内置对象:
    简单数据对象
    String、Number、Boolean
    组合对象
    Array、Math、Date
    高级对象
    Function、RegExp、Global
    String对象实例

    3.3 JS字符串对象相关方法

    JS字符串方法汇总
    https://www.cnblogs.com/YYvam1288/p/6973252.html

    3.3.1大小写转换

    image.png-78.9kB

    3.3.2获取指定字符串

    image.png-124.9kB

    3.3.3查询指定字符串

    image.png-142.3kB

    3.3.4获取子字符串

    image.png-75.4kB

    3.3.5拆分子字符串

    image.png-82.3kB

    3.4 Aaary对象 动态扩展

    3.4.1一维数组定义
        未赋值的数组 arr[下标越界] 元素为undefined(),长度(.length)为0
        数组var test = new Array(100,"a",true); test[3]= ; test[4]= ;//JS数组支持动态扩展 可以直接赋值)
        var arr =  [1,2,3,4,5];
    3.4.2二维数组定义

    image.png-143.2kB

    3.4.3数组转换为字符串
    方法:
    x.join(bystr)
    x.toString()
    使用注解:
    返回连接后的字符串 
    bystr:作为连接数组中元素的字符串
    x.toString():由逗号(,)连接
    代码:
    var arr1=[1, 2, 3, 4];
    alert(arr1.join("-")); //1-2-3-4 
    alert(arr1.toString());//1,2,3,4
    
    3.4.4连接数组
    方法:arr.concat(value,...)
    使用注解:
    value 作为数组元素连接到数组的末尾
    返回连接后的数组
    concat 方法并不改变x自身的值 
    代码:
    var a = [1,2,3];
    var b=a.concat(4, 5) ; 
    alert(a.toString());//1,2,3 
    alert(b.toString());//1,2,3,4,5 
    
    3.4.5获取子数组
    方法:x.slice(start, end)
    使用注解:
    start:开始位置索引
    end:结束位置加1,省略则相当于从start位置截取以后所有数组元素 
    代码:
    var arr1=['a','b','c','d','e','f','g','h'];
    var arr2=arr1.slice(2,4);
    alert(arr2.toString());//c,d 
    var arr3=arr1.slice(4);
    alert(arr3.toString());//e,f,g,h 
    
    3.4.6数组反转
    方法:x.reverse()
    使用注解:
    反向数组 
    改变数组 x 中数值的顺序 
    代码:
    var arr1=[32, 12, 111, 444];
    arr1.reverse(); 
    alert(arr1.toString());//444,111,12,32 
    
    3.4.7数组排序函数
    使用注解:
    x.sort(sortfunc):数组排序 (JS默认用快速排序)
    sortFunction:可选项,用来确定元素顺序的函数的名称 
    
    代码:
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Test.html</title>
        <script type="text/javascript">
        function test1(){
            //方法一
            var arr = [10,19,6,66,23];
            var arr1 = arr.sort(function(a,b){
                return a-b;//升序
            });
            alert(arr1.toString());
        }
        function test2(){ //方法2
            //定义数组
            var arr = [10,19,6,66,23];
            var arr1 = arr.sort(funSort); 
            alert(arr1.toString());
        }
        //定义排序规则 
        function funSort(a,b){
            return a-b; //升序
        }
        </script>
    </head>
    <body>
        <input type="button" value="数组排序1" onclick="test1();">
        <input type="button" value="数组排序2" onclick="test2();">
    </body>
    </html>

    3.5 Math对象

    3.5.1 Math 对象用于执行数学任务
    没有构造函数 Math()
    无需创建,直接把 Math 作为对象使用就可以调用其所有属性和方法 
    如:Math.PI、Math.round(3.56)
              ceil(3.5)   //4
              floor(3.5)  //3
    
    3.5.2 Math 对象的常用方法
    三角函数 
    Math.sin(x) 、 Math.cos(x)、 Math.tan(x) 等 
    反三角函数 
    Math.asin(x) 、 Math.acos(x) 等
    计算函数 
    Math. sqrt(x) 、 Math.log(x) 、 Math.exp(x)等
    数值比较函数 
    Math.abs(x)、 Math.max(x,y,...)、Math.random( )、 Math.round(x)等
    

    3.6 Number对象

    3.6.1 定义
    Number 对象是原始数值的包装对象 
    创建 Number 对象 : var myNum=new Number(value); 或者  var myNum=Number(value); 
    
    3.6.2 Number 对象的常用方法
    toString:数值转换为字符串 
    toFixed:数值转换为字符串,并保留小数点后一定位数 
    如果必要,该数字会被舍入,也可以用 0 补足
    var data = 23.56789;
    alert(data.toFixed(2));//23.57
    data = 23.5;
    alert(data.toFixed(2));//23.50 
    

    3.7 RegExp 对象

    3.7.1 概述
    • RegExp 对象表示正则表达式,它是对字符串执行模式匹配的强大工具
      创建正则表达式对象
    var rgExp=/pattern/g;
    var rgExp=new RegExp("pattern"); 
    var reg1 = /^\d{3,6}$/g; 
    var reg2 = new RegExp(“^\\d{3,6}$"); 
    3.7.2常用方法
    • RegExp.test(string)

      如果字符串 string 中含有与 RegExp 匹配的文本,则返回 true,否则返回 false 
      var name = “aaaa”;
      var reg = new RegExp("^[a-zA-Z0-9]{3,6}$");
      var rght = reg.test(name);
      if (!right)
      alert("录入错误!"); 
      

    3.8 Date 对象

    3.8.1定义
    • Date 对象用于处理日期和时间

      创建 Date 对象 
      var now = new Date();
      var nowd2=new Date("2013/3/20 11:12"); 
      
    3.8.2 Date 对象的常用方法
    • 读取日期的相关信息

      getYear()、getMonth()、getDate()、getHours()、getMinutes()、getSeconds()、getDay()、getFullYear()等
      
    • 修改日期

      setDate()、setMonth()、setHours()等 
      
    • 转换为字符串

      toString 
      toLocaleTimeString()
      toLocaleDateString() 
      

    3.9 函数与Function 对象

    • 函数(方法)是一组语句
      Function 对象可以表示开发者定义的任何函数
      函数实际上是功能完整的对象
      函数可以没有返回值:若没有return,默认返回undefined。
    3.9.1 函数的定义
    • 函数的定义
      由关键字function定义
      函数名的定义规则与标识符一致,大小写敏感
      可以使用变量、常量或表达式作为函数调用的参数
      返回值必须使用return
    function 函数名 (参数) {
        函数体;
        return 返回值;
    }
    3.9.2 函数的调用
    • 函数可以通过其名字加上括号中的参数进行调用
      如果有多个参数,则参数之间用逗号隔开
      如果函数有返回值,则可以声明变量等于函数的结果结果即可
    function sum(iNum1, iNum2){ 
        return iNum1 + iNum2; 
    } 
    var iResult = sum(1,1); 
    alert(iResult); //输出 "2" 

    3.10 arguments 参数对象

    arguments 是一种特殊对象,在函数代码中,表示函数的参数数组 
    在函数代码中,可以使用 arguments 访问所有参数 
    arguments.length:函数的参数个数 
    arguments[i]:第 i 个参数 
    
    3.10.1 使用 Function 对象创建函数
    • 可以使用 Function 对象直接创建函数
    代码格式:
        var functionName = new Function( arg1, ... argN, functionBody ); 
    实例:
    var add = new Function("x", "y", "return(x+y);");  
    var result = add(2,3); 
    alert(result); // 5 
    alert(add); //弹出方法的文本 
    3.10.2 匿名函数
    • 创建匿名函数
    var func = function(arg1,…,argN) {
           func_body;
        return value;
    };

    3.11 Global对象

    Global全局对象是预定义的,包括全局函数和全局属性。全局函数可用于所有内建的 JavaScript 对象 
    常用的全局函数有: 
       parseInt()/parseFloat() 
       isNaN(str)//是否不是数字
       eval() 
       decodeURI()/encodeURI() 
    常用的全局属性有: 
       undefined
       NaN
    

    3.12 eval函数

    eval 函数用于计算某个字符串,以得到结果;或者用于执行其中的的 JavaScript 代码 。
    只接受原始字符串作为参数。 
    如果参数中没有合法的表达式和语句,则抛出异常。
    
    var str = "2+3";
    alert(str); //2+3 
    alert(eval(str)); //5 
    var str2 = "{id:101,name:'张三'}";
    //(),表示通知eval将str强制转换成对象
    var obj = eval("("+str2+")");
    alert(obj.id);//结果101

    3.13 encodeURI 与 decodeURI

    encodeURI() :把字符串作为 URI 进行编码 
    decodeURI() :对 encodeURI() 函数编码过的 URI 进行解码 
    var str = "http://www.baidu.com?keyword=张三";
    var r1 = encodeURI(str);
    alert(r1);
    var  r2 = decodeURI(r1);
    alert(r2);
    3.13.X 表单提交方式 post/get区别
    • 建议通常定义form,指定method属性值为post
      提交表单方式可以有get/post
      • get、post区别:
        get:
        默认提交方式,提交表单,数据大小有限制(1K,2K)
        提交表单,表单的数据会显示在浏览器的地址栏中
        数据在请求数据包的请求行中
        post:
        不是 默认提交方式,提交表单,数据大小没限制
        提交表单,表单的数据不会显示在浏览器的地址栏中
        数据在请求数据包的主体中
        action属性指定表单数据提交的目的地

    4、HTML DOM 简介

    4.1 定义:

    • HTML DOM是HTML Document Object Model的缩写,称为文档对象模型。
      HTML DOM 定义了一系列标准的对象,以及访问和处理 HTML 文档的标准方法,将网页中的每个元素都看作一个对象 。
      通过 HTML DOM, JavaScript可访问HTML文档的所有元素和属性。

    4.2 Document 对象

    • 每个载入浏览器的 HTML 文档都会成为 Document 对象
      通过使用 Document 对象,脚本可以对 HTML 页面中的所有元素进行访问
      – document 对象是 Window 对象的一部分,可通过 window.document 属性对其进行访问
      DOM:文档对象模型,JS将HTML文档中的所有元素以一个树形的目录结构描述
      文档.png-99.1kB

    4.3 查找元素节点的方法

    一、方法:**getElementById()** 
    var XX = document.getElementById("ID");
    Þ   通过指定的 ID 来返回元素节点 
    Þ   如果 ID 值错误,则返回 null
    二、方法:**getElementsByTagName()** (返回的是**数组**, 需要指定下标到指定元素)
    Þ   根据指定的标签名称返回所有的元素 
    Þ   如果标签名称错误,则返回 长度为 0 的节点列表
    方法:**getElementsByName()**(返回的是数组, 需要指定下标到指定元素)
    Þ   根据指定的name属性值返回所有的元素 
    Þ   如果标签名称错误,则返回 长度为 0 的节点列表 
    方法:**getElementsByClassName()**(返回的是数组, 需要指定下标到指定元素)
    Þ   根据指定的class属性值返回所有的元素,该方法是HTML5 新增的DOM API。IE8以下不支持 
    三、返回一个节点列表
    Þ   使用节点列表的 length 属性获取个数
    Þ   [index]:定位具体的元素
    

    4.4 修改元素节点的内容和样式

    • innerHTML 、src、href属性
    style 属性 :
    node.style.color 
    node.style.fontSize 
    className 属性 :
    
    代码:
    var o = document.getElementById("p1");
    o.style.color = “red”;
    o.style.fontSize = 20;
    o.className = “样式类名称”;
    
      4.4.1通过className 加载类选择器样式   不能通过 class 属性来修改 
      4.4.2 通过style 属性进行修改
        style.js对应的样式属性 要求把 css中的样式属性 的 中划线‘——’去掉 然后 后面的字母变大写
        要么你就使用 类选择器加载。
     4.4.3 还可以通过 style.cssText="这里就是把样式表中的大阔号去掉之后的内容";
    
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <style type="text/css"> //类选择器加载
        .div{
            color:blue;
        }
    
    </style>
    <script type="text/javascript">
        function loadContent(){
            var content = document.getElementById('123');
    //      alert(content);
            content.innerHTML = '123';
        }
    
        function changeCss(){
            var img = document.getElementById('123');//根据ID获得元素
    //      img.className = 'div'; //方式一:类选择器
    //      img.class = 'div'; //错误的方式:错误 语法不报错
            img.style.width = '200px';
            img.style.height = '100px';
            img.style.border = '2px solid red';
            img.style.backgroundColor = 'RGB(111,111,111)';// 方式二:JS语法 backgroundColor  对应 CSS语法     background-color: 
            img.style.cssText = 
                'width:200px; height:100px; border:2px solid; color:blue;'; //方式三:把样式表中的{}去掉的内容
            }
    </script>
    
    </head>
    <body>
        <input type="button" value="加载内容" onclick="loadContent()" />
        <input type="button" value="点击切换样式" onclick="changeCss()">
        <div id="123" class='div'>
        </div>
    </body>
    </html>
    

    4.5 根据层次查找元素节点

    • parentNode 、firstChild 和 lastChild
      遵循文档的层次结构,查找单个节点

    • childNodes
      遵循文档的层次结构,查找多个节点

    • nodeName,nodeValue ,nodeType
      nodeName 元素节点返回标签名;属性节点返回属性名;文本节点返回#text
      nodeValue 元素节点返回null;属性节点返回属性值;文本节点返回内容
      nodeType 1表示元素节点;2表示属性节点;3表示文本节点

    • attributes 获取所有的属性节点 然后把属性节点作为值存入一个Map结构中以属性名作为 key
      遵循文档的层次结构,查找多个属性

    代码示例:
        <div id="div1"> hello world </div>     
     其中:   <div></div>元素节点 
             id='div1' 属性节点
             hello world 文本节点
    
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript">
    
        function NodeOperate() {
    
            var div = document.getElementById('divId'); //根据ID获取div元素
    
            alert('div的nodeName: ' + div.nodeName); //元素节点返回标签名 div
            alert('div的nodeValue: ' + div.nodeValue);//元素节点返回null  
            alert('div的nodeType: ' + div.nodeType); //元素节点返回1
    
            var attrs = div.attributes;//获得元素的属性
            alert(attrs);//object NamedNodeMap
            var att = attrs.getNamedItem('id');//等同于 var att = attrs['id'];
            alert(att);//object Attr
            alert('att的nodeName: ' + attrs.getNamedItem('id').nodeName); //属性节点返回属性名 id
            alert('att的nodeValue: ' + attrs.getNamedItem('id').nodeValue);//属性节点返回属性值 divId
            alert('att的nodeType: ' + attrs.getNamedItem('id').nodeType); //2表示属性节点 2
    
            //获取文本途径
            //方式一: 元素.innerHTML
            alert("文本信息1:"+div.innerHTML);
            //方式二: 元素.孩子节点.nodeValue
            alert("文本信息2:"+div.firstChild.nodeValue);
            //方式三:方式二变形
            alert("文本信息3:"+div.childNodes[0].nodeValue);    
        }
    
    </script>
    </head>
    <body>
        <input type="button" value="节点操作" onclick="NodeOperate()"> </input>
        <div id="divId" class='divClass'>hello world</div>
    </body>
    </html>
    
    实例:
    <select id="s1">
        <option value="101">娜英</option>
        <option value="102">周杰伦</option>
        <option value="103">哈林</option>
        <option value="104">汪峰</option>
     </select> 
    var s1 = document.getElementById("s1");
    alert(s1.childNodes.length);//7 
    var o1 = s1.firstChild; 

    4.6 元素节点的定义增删

    创建新的元素节点

    document.createElement(elementName)
    elementName:要创建的元素标签名称 
    返回新创建的节点 
    
    代码:
    var newNode = document.createElement("input");
    newNode.type = "text";
    newNode.value = "mary";
    newNode.style.color = "red"; 

    添加新的元素节点

    parentNode.appendChild(newNode)
    追加:新节点作为父节点的最后一个子节点存在 
    parentNode.insertBefore(newNode,refNode)
    refNode:参考节点,新节点位于此节点之前 

    删除元素节点

    删除某个子节点 : parentNode.removeChild(childNode)
    function deleteNode()
    {
        var delNode = document.getElementById("a1");
        delNode.parentNode.removeChild(delNode);
    }
    删除多个子节点 :
    function removeAll() {
        //方式一 循环删除 只删除第一个元素 
        var sel1 = document.getElementById('sel1');
        var list = sel1.childNodes;
        for (var i = 0; i < list.length; i++) {
            sel1.removeChild(list[0]);
            list --;
        }
    
        //方式二 修改属性长度
        var  sel1 = document.getElementById("sel1");
        var  options = sel1.options;
        //alert(options.length);
        options.length=0;
    }

    综合Demo代码

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript">
        function remove() {//删除单个节点
            var sel1 = document.getElementById('sel1');
            var A = document.getElementById('A');
            sel1.removeChild(A);
        }
    
        function add() {
        var sel = document.getElementById('sel1');
        var opt = document.createElement('option');
        opt.innerHTML = 'ADD';
        sel.appendChild(opt)
        }
    
        function removeAll() {
            //方式一 循环删除 只删除第一个元素 
            var sel1 = document.getElementById('sel1');
            var list = sel1.childNodes;
            for (var i = 0; i < list.length; i++) {
                sel1.removeChild(list[0]);
                list --;
            }
    
            //方式二 修改属性长度
            var  sel1 = document.getElementById("sel1");
            var  options = sel1.options;
            //alert(options.length);
            options.length=0;
        }
    </script>
    </head>
    <body>
        <input type="button" value='增加节点' onclick='add()'>
        <input type="button" value='删除节点' onclick='remove()'>
        <input type="button" value='删除节点全部' onclick='removeAll()'>
        <select id='sel1'>
            <option id='A'>A</option>
            <option>B</option>
            <option>C</option>
            <option>D</option>
        </select>
    </body>
    </html>

    5、HTML元素对象

    5.1 结构图:

    1.png-184.6kB

    5.2 Select元素 对象

    ß   Select 对象代表 HTML 表单中的一个下拉列表 
    Þ   "<"select">"  标签即表示一个 Select 对象 
    ß   常用属性 
    Þ   options、selectedIndex 
    ß   常用方法 
    Þ   add(option)、remove(index)
    ß   事件 
    Þ   onchange 
    
    代码
    Þ   <select onchange=“alert(this.selectedIndex);”>//更改时间 显示选中后的下拉框序号 从0开始
    Þ       <option value=“1”>aa</option>
    Þ       <option value=“2”>bb</option>
    Þ   </select> 

    5.3 Option元素对象

    ß   Option 对象代表 HTML 表单中下拉列表中的一个选项
    Þ   <option> 标签表示一个 Option 对象
    ß   创建对象 
    Þ   var o = new Option(text,value);
    ß   常用属性 
    Þ   index、text、value、selected
    
    代码
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript">
        function add(){
            var sel = document.getElementById('sel');
            var node = document.createElement('option');
            node.innerHTML = 'E';
            sel.appendChild(node);
        }
    
        function remove(){
            var sel = document.getElementById('sel');
            var opts = sel.options;//获取sel的所有下拉选框
            alert(opts.length);//长度为4
            opts.length = 0; //置空 相当于删除所有的下拉选项
        }
    
    </script>
    </head>
    <body>
    <input type="button" value="增加" onclick="add()">
    <input type="button" value="删除" onclick="remove()">
        <select id="sel" onchange="alert(this.selectedIndex);" >
            <option id='A'>A</option>
            <option>B</option>
            <option>C</option>
            <option>D</option>
        </select>
    </body>
    </html>

    5.4 Table元素对象

    Table 对象代表一个 HTML 表格
        </table>; 标签表示一个 Table 对象
        常用属性 
    Þ   rows、cells
    ß   常用方法 
    Þ   insertRow(index):返回 TableRow 对象 
    Þ   deleteRow(index)
    

    5.5 TableRow 对象

    ß   TableRow 对象代表一个 HTML 表格行
    Þ   <tr> 标签表示一个 TableRow 对象 
    ß   常用属性 
    Þ   cells、innerHTML、rowIndex 
    ß   常用方法 
    Þ   insertCell(index):返回 TableCell 对象 
    Þ   deleteCell(index)
    

    5.6 TableCell 对象

    ß   TableCell 对象代表一个 HTML 表格单元格
    <td> 标签表示一个 TableCell 对象 
    ß   常用属性 
    cellIndex、innerHTML、colSpan、rowSpan
    

    示例代码:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript">
        function remove(btn) {//删除方法
            var row = btn.parentNode.parentNode;//btn=this指针 是input标签; btn.parentNode是<td>标签 ; btn.parentNode.parentNode是<tr>标签
            alert(row.nodeName);// tr
            alert(row.nodeValue);// null
            alert(row.nodeType);// 1 元素节点
            row.parentNode.removeChild(row);
        }
    
        var id = 1;
    
        function add() {//新增方法
            var t1 = document.getElementById('t1');
            var row = t1.insertRow(t1.rows.length);// 增加一行
            var c0 = row.insertCell(0); // 增加一个单元格
            c0.innerHTML = id + "";//设置c0(第一个)单元格内容
            var c1 = row.insertCell(1);
            c1.innerHTML = "test" + id;//设置c1(第三个)单元格内容
            var c2 = row.insertCell(2);
            c2.innerHTML = "<input type='button' value='删除' onclick='remove(this)'>";//设置c2(第三个)单元格内容
    
            id++;
        }
    </script>
    </head>
    <body>
    
    </body>
    <input type="button" value="添加一行" onclick="add()">
    <table id='t1'>
        <tr>
            <td>ID</td>
            <td>NAME</td>
            <td>SEX</td>
        </tr>
    </table>
    </html>

    6、浏览器对象

    6.1 浏览器对象模型

    image.png-172.3kB

    6.2 浏览器对象windows

    window 对象表示浏览器中打开的窗口 
    常用属性 
    document:窗口中显示的 HTML 文档 
    history:浏览过窗口的历史记录 
    location:窗口文件地址 
    name:窗口名称 
    opener:打开当前窗口的 window 对象 
    
        window.location="demo1.html";//跳转到当前项目路径下+demo1.html window可以省略
    6.2.1 window对话框
    alert(str)
    提示对话框,显示str字符串的内容
    confirm(str)
    确认对话框,显示str字符串的内容
    按“确定”按钮返回true,取消操作返回false
    prompt(str,value)
    输入对话框,采用文本框输入信息
    str为提示信息,value为初始值
    按“确定”按钮返回输入值,取消操作返回null       
    
    6.2.2 window的打开和关闭
    window.open(url,name,config) 
        url:打开的超链接 
        name:窗口的名称 
        config:窗口的配置参数 
        返回新窗口对象 
    window.close() 
    
    代码实例:
    var config = "toolbar=yes,location=no, 
    width=500px,height=300px"; 
    //打开窗口 
    var openurl = "http://www.google.com"; 
    var newWin = window.open(openurl,"popwin",config); 
    newWin.focus();

    6.3 定时器

    6.3.1 window定时器
    用途:多用于网页动态时钟、制作倒计时、跑马灯效果等 。
    周期性时钟:
    setInterval(exp,time):周期性触发代码exp 
        exp:执行语句 
        time:时间周期,单位为毫秒 
        返回已经启动的定时器对象 
    clearInterval(tID):停止启动的定时器 
        tID:启动的定时器对象 
    一次性时钟:
    setTimeout(exp,time):一次性触发代码exp 
        exp:执行语句 
        time:间隔时间,单位为毫秒 
    返回已经启动的定时器 
    clearTimeout(tID):停止启动的定时器 
    tID:启动的定时器对象 
    
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript">
        // 设置时间的工作 
        function setTime() {
            // 获取sp1 这个元素 
            var sp1 = document.getElementById("sp1");
            // 构建当前时间对象  赋值给sp1这个元素
            var date = new Date();
            sp1.innerHTML = date.toLocaleString();
        }
        var tid = null;
        function startTimer() {
            // 先给span 赋值了一个当前时间 
            setTime();
            // 10秒之后改变当前时间 
            tid = window.setTimeout(setTime, 10000);
        }
        function stopTimer() {
            window.clearTimeout(tid);
        }
    </script>
    </head>
    <body>
        <input type="button" value="开始" onclick="startTimer()">
        <span id="sp1"></span>
        <input type="button" value="停止" onclick="stopTimer()">
    </body>
    </html>

    6.4 screen、history、location、navigator 对象:

    • screen 对象:
      • screen 对象包含有关客户端显示屏幕的信息,常用于获取屏幕分辨率的宽度、高度
      • 常用属性
        常用属性
        width/height 宽度/高度
        availWidth/availHeight 可用宽度/可用高度
        alert(window.screen.width+':'+screen.height);
        alert(window.screen.availWidth+':'+screen.availHeight);
    • history 对象:
      • history 对象包含用户(在浏览器窗口中)访问过的 URL
         length属性:浏览器历史列表中的 URL 数量
      • 方法
         back() //后退一步
         forward() //前进一步
         go(num) //num -1往后退一步 num1往前走一步
    
        history.back();//单击“后退”按钮 
        history.go(-2);//单击两次“后退”按钮
    //      window.history.go(-1);
    //      window.history.back();
    
    //      window.histoty.forward();
    //      window.history.go(1);
    • location 对象:
      • location 对象包含有关当前 URL 的信息
        常用于获取和改变当前浏览的网址
      • href 属性:当前窗口正在浏览的网页地址
        方法:
        replace(url):转向到url网页地址
        reload(): 重新载入当前网址,同按下刷新按钮
        window.location.hreplace("demo1.html");  代表替换当前页面 没有记录历史
        window.location="demo1.html";    定位到某个页面  记录历史 
        window.f = "
        http://www.baidu.com"; location.href="place(“http://www.baidu.com");
        window.location.reload(); //实现刷新 重新加载
    • navigator 对象:
      • navigator 对象包含有关浏览器的信息,常用于获取客户端浏览器和操作系统信息
    示例代码:var txt = "Navigator对象属性信息:\n"; 
    for (var propName in navigator) 
        { 
            txt+= propName + ": " 
            + navigator[propName] + "\n"; 
        } 
    alert(txt);

    6.5 event与事件

    1 事件

    1.1 什么是事件

        在html 中  元素的状态改变、 鼠标操作、 键盘操作都会触发相应的事件(行为和动作)。
    

    1.2 event 对象
    为了以对象的形式 体现事件 引入了事件对象的概念.
    1.3 事件的分类
    事件句柄.png-327.3kB
    - 状态事件:
    onload onunload onchange onfocus onblur onsubmit
    - 键盘事件:
    onkeydown onkeyup
    - 鼠标事件:
    onclick ondbclick onmousedown onmouseup onmouseover onmouseout

    1.X 事件冒泡机制

    1.png-379.3kB
    html dom 模型底层元素触发的事件 会依次激活上层元素同类型事件的处理 这就是事件冒泡

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript">
        function div1_click(){
            alert('div1');
        }
        function div2_click(){
            alert('div2');
        }
        function p_click(){
            alert('p');
        }
    </script>
    </head>
    <body>
        <div onclick="div1_click()">
            hello
            <div onclick="div2_click()">world</div>
            <p onclick="p_click()">你好哇,李银河!</p> //点击会依次触发 p_click()、div2_click()、div1_click()等事件
        </div>
    </body>
    </html>

    1.5取消事件冒泡

      event.cancleBubble=true;
      event.stopPropagation(); 
    
      示例代码:
    
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript">
        function div1_click(){
            alert('div1');
        }
        function div2_click(){
            alert('div2');
        }
        function p_click(){
            alert('p');
            event.stopPropagation();   //取消时间冒泡方式1
            event.cancelBubble = true; //取消时间冒泡方式2
        }
    </script>
    </head>
    <body>
        <div onclick="div1_click()">
            hello
            <div onclick="div2_click()">world</div>
            <p onclick="p_click()">你好哇,李银河!</p>
        </div>
    </body>
    </html>
    2、event
    • event 这个对象 在IE中可以直接使用 在firefox中 默认不能使用event 需要手工传入event对象 才能使用。
      • event 对象可以获取的信息
        可以获取那个键、那个鼠标按钮、以及时间信息、位置信息元素相关信息。
        位置信息:
        clientX 和 clientY
        screenX 和 screenY
        //alert(event.clientX+':'+event.clientY);
        //alert(event.screenX+':'+event.screenY);
    • 元素信息:
      • srcElement IE触发事件的元素对象
      • target 属于标准的事件触发的元素对象
      • 可以采用兼容写法
      • var t = event.srcElement||event.target;
      • 这个t对象 就是 html dom 对象
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript">
    
    function test2(){
        alert('world div click');
    }
    
    function test1(event){
            event.cancelBubble = true;
            var t = event.srcElement||event.target;
            alert(t);// [object HTMLDivElement]
            alert(t.innerHTML);// world
            alert("nodeName" + t.nodeName);// div
            alert("nodeType" + t.nodeType);// 1
            alert("nodeValue" + t.nodeValue);//null
        }
    
    </script>
    </head>
    <body>
    
    </body>
    <div onclick="test2()">
         hello
         <div onclick="test1(event)">world</div>
         <span>this is span</span>
    </div>
    </html>
    3、键盘
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <style type="text/css">
    div {
        width: 100px;
        height: 100px;
        background-color: red;
    }
    </style>
    <script type="text/javascript">
    
    function  test2(event){
        alert(event.keyCode);
    }
    </script>
    </head>
    <body>
    <!--  有些浏览器上没反应 加上 tabindex 就可以了 -->
    <div  tabindex="-1" onkeydown="test2(event)"> 
         hello world 
    </div>
    </body>
    </html>
    

    7、JS面向对象与JSON

    7.1 什么是类

    7.2 JS 中如何创建对象?

    • 通用模板创建对象
    方法1:使用构造器创建 
    语法:function ObjName(参数1,参数2,…){} 
    
    function Person (n,a){ 
        //name 和 age 属性 
        this.name = n; 
        this.age = a; 
        //show方法 
        this.show = function(){ 
            alert(“My Name is ” + this.name); 
        }; 
    }
    
    //测试对象 
    function test(){ 
        var o1 = new Person(“mary”,18); 
        alert(o1.age); 
        o1.show(); 
    
        var o2 = new Person(“john”,20); 
        alert(o2.age); 
        o2.show(); 
    }
    
    方法2:使用Object对象 创建对象实例    
    function TestObject(){ 
        var personObj=new Object(); 
        //添加属性 
        personObj.name="John"; 
        personObj.age=50; 
        //添加方法 
        personObj.eat = eat; 
        //测试 
        personObj.eat(); 
        alert(personObj.age); 
    }
    
    function eat(){ 
        alert(“name:“ + this.name); 
    }
    
    方法3JSON 特定的JS中定义对象的格式  其他语言与JS数据交换的通用格式   
    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式 
    定义格式{“key”:value, “key”:value} 
    访问时用“json对象.key”方式 
    
    var person = {name:'张三',age:20,fun:function(){console.info("特定格式的对象")}};    
            console.info(person.name);
            console.info(person.age);       
            person.fun();

    7.3 JSON

    7.3.1 什么是JSON

    • JSON 是 javascript Object Notification javascript 对象通知
      它是一种轻量级的数据交互格式

    7.3.2 JSON对象的格式

    • {“key1”:值,”key2”:值}
      访问数据时 直接使用 对象名.key 来访问数据

    7.3.3 JSON字符串

    • ‘{“key1”:值,”key2”:值}’
    • “{\”key1\”:值,\”key2\”:值}”

    7.3.4 JSON字符串 转换成JSON对象

    • JSON.parse(jsonStr); 可以把json字符串 变成json对象
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <style type="text/css">
    table {
        width: 600px;
        border-collapse: collapse;
        text-align: center;
    }
    table,td,th{
        border:1px solid  purple;
    }
    </style>
    <script type="text/javascript">
    
         function test1(){
             //var  obj = {"name":"zhangsan","age":23,"salary":334455};
             var  obj = {"name":"zhangsan","age":"23","salary":"334455"};
             alert(obj.name);
             alert(obj.age);
             alert(obj.salary);
         }
    
         function  test2(){
             var  jsonObjArr = [{"name":"zhangsan","age":23,"salary":334455},
                                {"name":"lisi","age":33,"salary":534455},
                                {"name":"wangwu","age":63,"salary":134455}];
             //alert(jsonObjArr[1].name);
             for(var i=0;i<jsonObjArr.length;i++){
                 var obj = jsonObjArr[i];
                 alert(obj.name+':'+obj.age+':'+obj.salary);
             }
         }
    
         function    test3(){
             //var jsonStr = '{"name":"zhangsan","age":23,"salary":334455}';
             var  jsonStr = "{\"name\":\"zhangsan\",\"age\":23,\"salary\":334455}";
             //jsonStr = JSON.parse(jsonStr);
             jsonStr = eval('('+jsonStr+')');
             alert(jsonStr.name+':'+jsonStr.age+':'+jsonStr.salary);
         }
    
         function  test4(){
             var jsonObjArrStr = '[{"name":"zhangsan","age":23,"salary":334455},'+
                                '{"name":"lisi","age":33,"salary":534455},'+
                                '{"name":"wangwu","age":63,"salary":134455}]';
             var jsonObjArr = JSON.parse(jsonObjArrStr);
             // 使用 html dom 操作表格 
             var t1 = document.getElementById("t1");
             var dataStr = '<tr> <th>姓名</th> <th>年龄</th> <th>月薪</th>  </tr>';
             for(var i=0;i<jsonObjArr.length;i++){
                 /* var row = document.createElement("tr");
                 //row.innerHTML='<td>'++'</td> <td>22</td> <td>11111112</td>';
                 row.innerHTML='<td>'+jsonObjArr[i].name+'</td> <td> '
                 +jsonObjArr[i].age+'</td> <td>'+jsonObjArr[i].salary+'</td>';
                 t1.appendChild(row);*/
                 dataStr = dataStr+'<tr><td>'+jsonObjArr[i].name+'</td> <td> '
                 +jsonObjArr[i].age+'</td> <td>'+jsonObjArr[i].salary+'</td></tr>';
             }
             t1.innerHTML=dataStr;
         }
    
    </script>
    </head>
    <body>
    <input  type="button"  value="JSON对象"  onclick="test1()"/> <br>
    <input  type="button"  value="JSON对象数组"  onclick="test2()"/><br>
    <input  type="button"  value="JSON字符串转JSON对象 " onclick="test3()"/><br>
    <input  type="button"  value="JSON字符串转JSON对象数组" onclick="test4()"/><br>
    <table  id="t1">
    
    
    </table>
    </body>
    </html>
    

    补充:

    1、JS中的FOR循环

    参考链接: https://www.cnblogs.com/Youngly/p/6709546.html

    • 警告:永远不要使用for each…in语句遍历数组,仅用来遍历常规对象。

    EXT

    1、EXT概述

    1.1 EXT概述

    • Ext JS是一个流行的JavaScript框架,它为使用跨浏览器功能构建Web应用程序提供了丰富的UI。 Ext JS基本上用于创建桌面应用程序它支持所有现代浏览器,如IE6 +,FF,Chrome,safari 6+ 等。而sencha,sencha touch的另一个产品用于移动应用程序。
    • Ext JS基于MVC / MVVM架构。 最新版本的Ext JS 6是一个单一的平台,可以用于桌面和移动应用程序,而不需要为不同的平台提供不同的代码。

    2、第二天

    1、原始方法用EXTJS创建一个window

    展开全文
  • 细说JavaScript

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

    2020-10-21 21:05:02
    文章目录函数定义和调用定义函数(function abs(x) {...})调用函数(JavaScript允许传入任意个参数而不影响调用)arguments(永远指向当前函数的调用者传入的所有参数)rest参数小心你的return语句 函数定义和调用 定义...

    导入使用

    JavaScript是一种在浏览器上解释执行的脚本语言
    外部导入:<script src="myjs.js">这里不允许写代码,写了也不会被执行</script>
    需要注意,结束的script标签一定要加,不能省略。想要再添加js代码,需要再添加<script >...</script>.
    内部使用:<script >...</script>
    这是在脚本块<script>块中加入代码,脚本块中代码在页面被打开时会立即执行,其在一个页面可以出现多次,执行顺序从上到下依次执行,并且出现位置没有规定,alert的出现会阻塞页面的加载,直到用户点击。
    代码块中使用:

    <input type="button" value="hello" onclick="alert('你好张三');
    													alert('你好李四')"/>
    
    1. Js是一门事件驱动型的编程语言,依靠时间去驱动,然后执行对应的程序。
    2. οnclick=“js代码”,执行原理是什么?
      页面打开时候,js代码并不会被执行,只是把这段JS代码注册到按钮事件上了。等这个按钮发生click事件之后,注册在onclick后面的JS代码会被浏览器自动调用。
      3.怎么使用JS代码弹出消息框?浏览器有一个对象是window,windows对象有一个alter方法,可以弹窗。windows.alter(),window可以省略

    函数定义和调用

    定义函数(function abs(x) {…})

    Js中的函数需要指定返回值类型
    在JavaScript中,定义函数的方式如下:

    function abs(x) {
        if (x >= 0) {
            return x;
        } else {
            return -x;
        }
    }
    

    函数定义说明:
    上述abs()函数的定义如下:

    • function指出这是一个函数定义;
    • abs是函数的名称;
    • (x)括号内列出函数的参数,多个参数以,分隔,且不用指定类型;
    • { ... }之间的代码是函数体,可以包含若干语句,甚至可以没有任何语句。

    当函数里有return时,执行到return,函数就执行完毕,并将结果返回
    当函数没有return时,函数执行完毕后也会返回结果,只是结果为undefined

    由于JavaScript的函数也是一个对象,上述定义的abs()函数实际上是一个函数对象,而函数名abs可以视为指向该函数的变量。
    因此,第二种定义函数的方式如下:

    var abs = function (x) {
        if (x >= 0) {
            return x;
        } else {
            return -x;
        }
    };
    

    在这种方式下,function (x) { ... }是一个匿名函数,它没有函数名。但是,这个匿名函数赋值给了变量abs,所以,通过变量abs就可以调用该函数。
    注意第二种方式按照完整语法需要在函数体末尾加一个;,表示赋值语句结束。

    调用函数(JavaScript允许传入任意个参数而不影响调用)

    JavaScript允许传入任意个参数而不影响调用:

    '传入的参数比定义的参数多也没有问题,虽然函数内部并不需要这些参数:'
    abs(10, 'blablabla'); // 返回10
    abs(-9, 'haha', 'hehe', null); // 返回9
    '传入的参数比定义的少:'
    abs(); // 返回NaN,,此时abs(x)函数的参数x将收到undefined,计算结果为NaN。
    

    要避免收到undefined,可以对参数进行检查

    function abs(x) {
        if (typeof x !== 'number') {
            throw 'Not a number';
        }
        if (x >= 0) {
            return x;
        } else {
            return -x;
        }
    }
    
    • JS中如果两个函数重名,后面声明的函数会把前面的函数覆盖

    arguments(永远指向当前函数的调用者传入的所有参数)

    关键字arguments,它只在函数内部起作用,并且永远指向当前函数的调用者传入的所有参数。arguments类似Array但它不是一个Array

    function foo(x) {
        console.log('x = ' + x); // 10
        for (var i=0; i<arguments.length; i++) {
            console.log('arg ' + i + ' = ' + arguments[i]); // 10, 20, 30
        }
    }
    foo(10, 20, 30);
    '输出:'
    x = 10
    arg 0 = 10
    arg 1 = 20
    arg 2 = 30
    

    即使函数不定义任何参数时,arguments拿到的是0abs(); // 0
    实际上arguments最常用于判断传入参数的个数。你可能会看到这样的写法:

    // foo(a[, b], c)
    // 接收2~3个参数,b是可选参数,如果只传2个参数,b默认为null:
    function foo(a, b, c) {
        if (arguments.length === 2) {
            // 实际拿到的参数是a和b,c为undefined
            c = b; // 把b赋给c
            b = null; // b变为默认值
        }
        // ...
    }
    

    要把中间的参数b变为“可选”参数,就只能通过arguments判断,然后重新调整参数并赋值。

    rest参数

    由于JavaScript函数允许接收任意个参数,于是我们就不得不用arguments来获取所有参数:

    function foo(a, b) {
        var i, rest = [];
        if (arguments.length > 2) {
            for (i = 2; i<arguments.length; i++) {
                rest.push(arguments[i]);
            }
        }
        console.log('a = ' + a);
        console.log('b = ' + b);
        console.log(rest);
    }
    

    为了获取除了已定义参数a、b之外的参数,我们不得不用arguments,并且循环要从索引2开始以便排除前两个参数,这种写法很别扭,只是为了获得额外的rest参数,有没有更好的方法?
    ES6标准引入了rest参数,上面的函数可以改写为:

    function foo(a, b, ...rest) {
        console.log('a = ' + a);
        console.log('b = ' + b);
        console.log(rest);
    }
    
    foo(1, 2, 3, 4, 5);
    // 结果:
    // a = 1
    // b = 2
    // Array [ 3, 4, 5 ]
    
    foo(1);
    // 结果:
    // a = 1
    // b = undefined
    // Array []
    

    rest参数只能写在最后,前面用...标识,从运行结果可知,传入的参数先绑定a、b多余的参数以数组形式交给变量rest,所以,不再需要arguments我们就获取了全部参数。
    如果传入的参数连正常定义的参数都没填满,也不要紧,rest参数会接收一个空数组(注意不是undefined

    小心你的return语句

    前面我们讲到了JavaScript引擎有一个在行末自动添加分号的机制,这可能让你栽到return语句的一个大坑:

    function foo() {
        return { name: 'foo' };
    }
    
    foo(); // { name: 'foo' }
    

    如果把return语句拆成两行:

    function foo() {
        return
            { name: 'foo' };
    }
    
    foo(); // undefined
    

    要小心了,由于JavaScript引擎在行末自动添加分号的机制,上面的代码实际上变成了:

    function foo() {
        return; // 自动添加了分号,相当于return undefined;
            { name: 'foo' }; // 这行语句已经没法执行到了
    }
    

    正确写法应该是:

    function foo() {
        return { // 这里不会自动加分号,因为{表示语句尚未结束
            name: 'foo'
        };
    }
    

    变量作用域与解构赋值

    作用域

    在JavaScript中,用var申明的变量实际上是有作用域的。
    一个变量在函数体内部申明:
    则该变量的作用域为整个函数体,在函数体外不可引用该变量:

    'use strict';
    
    function foo() {
        var x = 1;
        x = x + 1;
    }
    
    x = x + 2; // ReferenceError! 无法在函数体外引用变量x
    

    两个不同的函数各自申明了同一个变量,那么该变量只在各自的函数体内起作用。换句话说,不同函数内部的同名变量互相独立,互不影响。
    由于JavaScript的函数可以嵌套,此时,内部函数可以访问外部函数定义的变量,反过来则不行:

    'use strict';
    
    function foo() {
        var x = 1;
        function bar() {
            var y = x + 1; // bar可以访问foo的变量x!
        }
        var z = y + 1; // ReferenceError! foo不可以访问bar的变量y!
    }
    

    如果内部函数和外部函数的变量名重名怎么办?
    JavaScript的函数在查找变量时从自身函数定义开始,从“内”向“外”查找。如果内部函数定义了与外部函数重名的变量,则内部函数的变量将“屏蔽”外部函数的变量。

    变量提升(请严格遵守“在函数内部首先申明所有变量”这一规则)

    JavaScript的函数定义有个特点,它会先扫描整个函数体的语句,把所有申明的变量“提升”到函数顶部

    'use strict';
    
    function foo() {
        var x = 'Hello, ' + y;
        console.log(x);
        var y = 'Bob';
    }
    
    foo();
    '输出:'
    Hello,undefined
    

    虽然是strict模式,但语句var x = 'Hello, ' + y;并不报错,原因是变量y在稍后申明了。但是console.log显示Hello, undefined,说明变量y的值为undefined。这正是因为JavaScript引擎自动提升了变量y的声明,但不会提升变量y的赋值
    对于上述foo()函数,JavaScript引擎看到的代码相当于:

    function foo() {
        var y; // 提升变量y的申明,此时y为undefined
        var x = 'Hello, ' + y;
        console.log(x);
        y = 'Bob';
    }
    

    由于JavaScript的这一怪异的“特性”,我们在函数内部定义变量时,请严格遵守“在函数内部首先申明所有变量”这一规则。最常见的做法是用一个var申明函数内部用到的所有变量:

    function foo() {
        var
            x = 1, // x初始化为1
            y = x + 1, // y初始化为2
            z, i; // z和i为undefined
        // 其他语句:
        for (i=0; i<100; i++) {
            ...
        }
    }
    

    全局作用域

    不在任何函数内定义的变量就具有全局作用域。实际上,JavaScript默认有一个全局对象window,全局作用域的变量实际上被绑定到window的一个属性:

    'use strict';
    
    var course = 'Learn JavaScript';
    alert(course); // 'Learn JavaScript'
    alert(window.course); // 'Learn JavaScript'
    

    因此,直接访问全局变量course和访问window.course是完全一样的。
    你可能猜到了,由于函数定义有两种方式,以变量方式var foo = function () {}定义的函数实际上也是一个全局变量,因此,顶层函数的定义也被视为一个全局变量,并绑定到window对象:

    'use strict';
    
    function foo() {
        alert('foo');
    }
    
    foo(); // 直接调用foo()
    window.foo(); // 通过window.foo()调用
    

    我们每次直接调用的alert()函数其实也是window的一个变量. 这说明JavaScript实际上只有一个全局作用域。任何变量(函数也视为变量),如果没有在当前函数作用域中找到,就会继续往上查找,最后如果在全局作用域中也没有找到,则报ReferenceError错误。

    • 当一个变量声明的时候没有使用var关键字,那么不管这个变量是在那里生命的,都是全局变量。

    名字空间

    全局变量会绑定到window上,不同的JavaScript文件如果使用了相同的全局变量,或者定义了相同名字的顶层函数,都会造成命名冲突,并且很难被发现。
    减少冲突的一个方法是把自己的所有变量和函数全部绑定到一个全局变量中。例如:

    // 唯一的全局变量MYAPP:
    var MYAPP = {};
    
    // 其他变量:
    MYAPP.name = 'myapp';
    MYAPP.version = 1.0;
    
    // 其他函数:
    MYAPP.foo = function () {
        return 'foo';
    };
    

    把自己的代码全部放入唯一的名字空间MYAPP中,会大大减少全局变量冲突的可能。

    局部作用域

    由于JavaScript的变量作用域实际上是函数内部,我们在for循环等语句块中是无法定义具有局部作用域的变量的

    'use strict';
    
    function foo() {
        for (var i=0; i<100; i++) {
            //
        }
        i += 100; // 仍然可以引用变量i
    }
    

    为了解决块级作用域,ES6引入了新的关键字let,用let替代var可以申明一个块级作用域的变量:

    'use strict';
    
    function foo() {
        var sum = 0;
        for (let i=0; i<100; i++) {
            sum += i;
        }
        // SyntaxError:
        i += 1;
    }
    

    常量

    由于varlet申明的是变量,如果要申明一个常量,在ES6之前是不行的,我们通常用全部大写的变量来表示“这是一个常量,不要修改它的值”:

    var PI = 3.14;
    

    ES6标准引入了新的关键字const来定义常量,constlet都具有块级作用域:

    'use strict';
    
    const PI = 3.14;
    PI = 3; // 某些浏览器不报错,但是无效果!
    PI; // 3.14
    

    解构赋值(直接对多个变量同时赋值)

    从ES6开始,JavaScript引入了解构赋值,可以同时对一组变量进行赋值。
    一般做法,要把一个数组的元素分别赋值给几个变量,可以利用数组所以,以此赋值。

    var array = ['hello', 'JavaScript', 'ES6'];
    var x = array[0];
    var y = array[1];
    var z = array[2];
    

    现在,在ES6中,可以使用解构赋值,直接对多个变量同时赋值:

    var [x, y, z] = ['hello', 'JavaScript', 'ES6'];
    

    注意,对数组元素进行解构赋值时,多个变量要用[...]括起来。
    如果数组本身还有嵌套,也可以通过下面的形式进行解构赋值,注意嵌套层次和位置要保持一致:

    let [x, [y, z]] = ['hello', ['JavaScript', 'ES6']];
    x; // 'hello'
    y; // 'JavaScript'
    z; // 'ES6'
    

    解构赋值还可以忽略某些元素:

    let [, , z] = ['hello', 'JavaScript', 'ES6']; // 忽略前两个元素,只对z赋值第三个元素
    z; // 'ES6'
    

    如果需要从一个对象中取出若干属性,也可以使用解构赋值,便于快速获取对象的指定属性(但是要保证名字相同):

    'use strict';
    
    var person = {
        name: '小明',
        age: 20,
        gender: 'male',
        passport: 'G-12345678',
        school: 'No.4 middle school'
    };
    var {name, age, passport} = person;
    

    对一个对象进行解构赋值时,同样可以直接对嵌套的对象属性进行赋值,只要保证对应的层次是一致的:

    var person = {
        name: '小明',
        age: 20,
        gender: 'male',
        passport: 'G-12345678',
        school: 'No.4 middle school',
        address: {
            city: 'Beijing',
            street: 'No.1 Road',
            zipcode: '100001'
        }
    };
    var {name, address: {city, zip}} = person;
    name; // '小明'
    city; // 'Beijing'
    zip; // undefined, 因为属性名是zipcode而不是zip
    // 注意: address不是变量,而是为了让city和zip获得嵌套的address对象的属性:
    address; // Uncaught ReferenceError: address is not defined
    

    使用解构赋值对对象属性进行赋值时,如果对应的属性不存在,变量将被赋值为undefined,这和引用一个不存在的属性获得undefined是一致的。如果要使用的变量名和属性名不一致,可以用下面的语法获取:

    var person = {
        name: '小明',
        age: 20,
        gender: 'male',
        passport: 'G-12345678',
        school: 'No.4 middle school'
    };
    
    // 把passport属性赋值给变量id:
    let {name, passport:id} = person;
    name; // '小明'
    id; // 'G-12345678'
    // 注意: passport不是变量,而是为了让变量id获得passport属性:
    passport; // Uncaught ReferenceError: passport is not defined
    

    解构赋值还可以使用默认值,这样就避免了不存在的属性返回undefined的问题:

    var person = {
        name: '小明',
        age: 20,
        gender: 'male',
        passport: 'G-12345678'
    };
    
    // 如果person对象没有single属性,默认赋值为true:
    var {name, single=true} = person;
    name; // '小明'
    single; // true
    

    有些时候,如果变量已经被声明了,再次赋值的时候,正确的写法也会报语法错误

    // 声明变量:
    var x, y;
    // 解构赋值:
    {x, y} = { name: '小明', x: 100, y: 200};
    // 语法错误: Uncaught SyntaxError: Unexpected token =
    

    这是因为JavaScript引擎把{开头的语句当作了块处理,于是=不再合法。解决方法是用小括号括起来:

    ({x, y} = { name: '小明', x: 100, y: 200});
    

    使用场景

    解构赋值在很多时候可以大大简化代码。例如,交换两个变量xy的值,可以这么写,不再需要临时变量:

    var x=1, y=2;
    [x, y] = [y, x]
    

    快速获取当前页面的域名和路径:

    var {hostname:domain, pathname:path} = location;
    

    如果一个函数接收一个对象作为参数,那么,可以使用解构直接把对象的属性绑定到变量中。例如,下面的函数可以快速创建一个Date对象:

    function buildDate({year, month, day, hour=0, minute=0, second=0}) {
        return new Date(year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second);
    }
    

    它的方便之处在于传入的对象只需要yearmonthday这三个属性:

    buildDate({ year: 2017, month: 1, day: 1 });
    // Sun Jan 01 2017 00:00:00 GMT+0800 (CST)
    

    也可以传入hourminutesecond属性:

    buildDate({ year: 2017, month: 1, day: 1, hour: 20, minute: 15 });
    // Sun Jan 01 2017 20:15:00 GMT+0800 (CST)
    

    使用解构赋值可以减少代码量,但是,需要在支持ES6解构赋值特性的现代浏览器中才能正常运行。目前支持解构赋值的浏览器包括Chrome,Firefox,Edge等。

    数据类型

    1、虽然Js中的变量声明的时候不需要指定数据类型,但是在赋值,每一个数据还是有数据类型的。
    数据类型分为:原始类型,引用类型
    原始类型:Undefined,Number,String,Boolean,Null.
    引用类型:Object以及Object的子类
    2、ES规范,在ES 之后,又基于以上六种类型之外添加一种新的类型,Symbol.
    3、JS中有一个运算符叫typeof,可以判运行数据数据类型。

    var MAP = {};
    MAP.name = "李燕培";
    MAP.y = "yy";
    MAP.input = function (name,age){
    //注意写法,是typeof name== "String"而不是typeof(name== "String")
        if (typeof name== "String" && typeof age== "Number" ){
            alert("我叫"+name+",今年"+age+"岁了");
        }
        else{
            alert("输入错误");
        }
    }
    MAP.input(MAP.name,MAP.y);
    

    Number类包括了整数,小数,整数,负数,无穷大等
    什么时候运算结果是NaN:
    运算结果本来应该是一个数字,最后算完不是一个数字的时候,结果是NaN.

    `alert(10/3)-->3.3333`java和JS不一样,因为都是Number类型的
    isNaN(数据):结果是true表示不是一个数字,false表示是一个数字
    parseInt():可以将字符串转换为数字,自动取整数位
    parseFloat():可以将字符串转换为浮点数
    Math.ceil()
    

    Boolean类型:
    Js中布尔类型永远只有两个值,true/false

    '有就是true,没有就是false'
    alert(Boolean(1));/true
    alert(Booleab(0));/false
    alert(Booleab(NaN));/false
    

    String类型

    小String
    var i = "Fan";
    alert(typeof i)/String
    大String
    var x = new String("Fan");
    alert(typeof x)/Object
    
    x.length//获取长度
    i.indexof("a");//获取a在字符串中第一次出现的位置(结果是负代表没有)
    i.lastIndexof("a")//获取a在字符串中最后一次出现的位置
    i.replace("a","&")替换第一个a
    i.substr(0,1)/返回从start到end的字符(不包含end)
    i.subString(0,1)/返回从start到end的字符(包含end)
    r.split('a')
    

    Object类型
    1、Object是所有类的父类,
    2、Object 包括的属性:prototype属性(常用),作用是给类动态的扩展属性和函数。constructor属性
    3.Object类包括那些函数 :toString()/valueof/toLocalString()
    4、在JS中定义的类默认继承Object,会继承Object类的所有属性和方法
    5、在JS中怎么定义类?怎么new对象?

    定义类:
    第一:
    function 类名(形参){}
    第二:
    类名 = function (){}
    创建对象:
    主要看用的方式:
    类名();/是当作函数用
    var b = new 类名();/就是当作类
    

    Js中类的定义,同时又是一个构造函数的定义

    function User(a,b,c){
    	this.sno = a;
    	this.sname = b;
    	this.sage = c;
    }
    创建对象:
    var u1 = new User(111,"Fan",55);
    alert(u1.sname)
    //访问一个对象的属性,还可以用以下方法
    alert(u1["sname"]);
    

    类里面还可以套类:

    cc = function(pno,pname,price){
    	this.pno = pno;
    	this.pname = pname;
    	this.price = price;
    	this.getPrice = function(){
    	return this.price
    	}
    }
    var pro = new cc(11,"西瓜"22);
    var pri = pro.getPrice();
    alert(pri);//22
    

    可以通过prototype 这个属性来给类动态扩展属性和函数:

    cc.prototype.getname = function(){
    return this.pname
    }
    var pna = pro.getname();
    alert(pna);//西瓜
    '给String扩展的函数'
    String.prototype.suiyi = function(){
    alert("扩展函数");
    "abc".suiyi();
    }
    

    null NaN undefined比较:
    他们的数据类型不一致

    null Object
    NaN  Number
    undefined   undefined
    alert(null==undefined)//true//null和undefined可以等同
    ==:等同运算符,只比较值
    ===:比较值还要比较数据类型
    
    展开全文
  • Java、Javascript、Javaweb三者的区别

    千次阅读 多人点赞 2018-08-21 14:59:23
    javascript:一种页面脚本语言,可以实现各种页面的动态效果,比如弹框,隐藏等 首先,我们来说一下java 与 javaweb之间的关系 :  我们平常说的Java一般指Java SE,也就是Java Standard Edition,Java的标准版,...

    java:一种编程语言

    java web(JSP):网页代码

    javascript:一种页面脚本语言,可以实现各种页面的动态效果,比如弹框,隐藏等

    首先,我们来说一下java 与 javaweb之间的关系 : 
    我们平常说的Java一般指Java SE,也就是Java Standard Edition,Java的标准版,一般用来开发桌面应用程序,但是在开发桌面应用程序上相对VB,Delphi,VC++并没有什么优势。 
    JavaWeb则到了Java EE领域了,也就是Java Enterprise Edition,Java的企业版,看那个web就应该想到是与Internet有关的,其实开发JavaWeb应用程序,初级的一般是用JSP(Java Server Pages)+servlet+Javabean来开发的,对大型的网站一般是使用框架来开发的,例如struts,hibernate,spring,例如校内,你在登陆的时候会在地址栏看见Login.do,登陆以后会看见Home.do这样的请求,典型的struts框架结构。 
    Java还有一个版本是JavaME,Java Micro Edition,Java的微型版,诺基亚手机上运行的Java程序就是指用这个版本开发的程序。

    再者,我们来说一下Java与Javascript之间的关系: 
    一、什么是Javascript? 
    它是运行在浏览器中的一种脚本语言,在web页面中,Javascript可谓是无所不能: 
    1. 可以操作HTML,提供了一种运行时改变HTML的工具; 
    2. 可以附加并执行事件,符合面向事件编程的思想; 
    3. 数据验证功能,在提交表单时对表单数据进行合法性验证; 
    4. 对客户浏览器的操作,前进、后退、刷新、跳转、打开新窗口、打印等; 
    5. 可以创建并使用Cookies.

    二、什么是Java? 
    Java是Sun公司推出的一种编程语言。它是一种通过解释方式来执行的语言,语法规则和C++类似。同时,Java也是一种跨平台的程序设计语言。用Java语言编写的程序叫做“Applet”(小应用程序),用编译器将它编译成类文件后,将它存在WWW页面中,并在HTML档上作好相应标记,用户端只要装上Java的客户软件就可以在网上直接运行“Applet”。

    Java非常适合于企业网络和Internet环境,现在已成为Internet中最受欢迎、最有影响的编程语言之一。 Java有许多值得称道的优点,如简单、面向对象、分布式、解释性、可靠、安全、结构中立性、可移植性、高性能、多线程、动态性等。Java摒弃了C++中各种弊大于利的功能和许多很少用到的功能。 Jave可以运行于任何微处理器,用Java开发的程序可以在网络上传输,并运行于任何客户机上。

    三、Javascript名字的由来 
    JavaScript最早是被称为Mocha(魔卡)的,这是这个项目的代码名。这个名字一直用到Netscape2.0 beta 2发布之前(95.11.04)——包括在beta 1中弹出的错误框上,还可以看到Mocha的名字。不过,早在此前的9月18号,netscape就已经发布消息将在LiveWire中启用一种服务器端脚本(未提及名称)。又因为我们前面提到的“前后端通用脚本”的设计,该语言在beta 2发布时就使用了内部名称LiveScript。

    但同样混乱的事情是,事实上这时Netscape已经决定将该语言命名为“JavaScript”。因此在beta 2的发布备忘中该语言称为JavaScript,而界面上却从Mocha改为了LiveScript。这一局面一直持续到12月4日,netscape与sun共同发布声明,正式启用了JavaScript这个名字。随后beta 4发布(95.12.20),界面和文档上就统一了。

    所以事实上“LiveScript”这个名字可以考证的生命周期,也就只有一个月的时间(在95.11.04- 12.04)。但Mocha毕竟只是项目代码名,而非产品名,所以后来人们追溯JavaScript的历史,大多只提到LiveScript为止。

    四、Java与Javascript的区别 
    1、javascript与Java是由不同的公司开发的不同产品。javascript是Netscape公司的产品,其目的是为了扩展Netscape Navigator功能,而开发的一种可以嵌入Web页面中的基于对象和事件驱动的解释性语言;而Java是SUN Microsystems公司推出的新一代面向对象的程序设计语言,特别适合于Internet应用程序开发。实际上,javascript最初的名字并不是javascript,而是LiveScript,名字中的“Java”是经过SUN Microsystems公司授权的。

    2、javascript是基于对象的,它是一种脚本语言,是一种基于对象和事件驱动的编程语言,因而它本身提供了非常丰富的内部对象供设计人员使用。而Java是面向对象的,即Java是一种真正的面向对象的语言,即使是开发简单的程序也必须设计对象。

    3、javascript与Java嵌入方式不一样。在HTML文档中,两种编程语言的标识不同,javascript使用来标识,而Java使用Applet来标识。

    4、javascript与Java在浏览器中所执行的方式不一样。javascript是一种解释性编程语言,其源代码在发往客户端执行之前不需经过编译,而是将文本格式的字符代码发送给客户,即javascript语句本身随Web页面一起下载下来,由浏览器解释执行。而Java的源代码在传递到客户端执行之前,必须经过编译,因而客户端上必须具有相应平台上的仿真器或解释器,它可以通过编译器或解释器实现独立于某个特定的平台编译代码。

    5、javascript与Java代码格式不一样。javascript的代码是一种谋咀址格式,可以直接嵌入HTML文档中,并且可动态装载,编写HTML文档就像编辑文本文件一样方便,其独立文件的格式为X.js。java是一种与HTML无关的格式,必须通过像HTML中引用外媒体那么进行装载,其代码以字节代码的形式保存在独立的文档中,其独立文件的格式为X.class。

    6、javascript与Java所采取的变量是不一样的。javascript中的变量声明采用弱类型,即变量在使用前不需作声明,而是解释器在运行时检查其数据类型。Java采用强类型变量检查,即所有变量在编译之前必须作声明。

    7、javascript采用动态联编,即javascript的对象引用在运行时进行检查。Java采用静态联编,即Java的对象引用必须在编译时的进行,以使编译器能够实现强类型检查。

    8、javascript不直接对文本和图形进行操作,它在Web页面中与HTML元素组合一起发挥作用,但它可以控制浏览器,让浏览器直接对文本和图形进行处理。而Java则可以直接对文本和图形进行操作。


    摘自百度: 
    首先,这两个家伙没有任何的血缘关系,java是由Sun 公司于1995年5月推出的,而javascript是于1995年由Netscape公司设计实现而成的,由于Netscape公司与Sun公司合作,Netscape高层希望它看上去能够像Java,因此取名为JavaScript。 
    其次,这两个家伙的本质也不一样,java是一种可以撰写跨平台应用软件的面向对象的程序设计语言,即使是开发简单的程序,也必须设计对象;而JavaScript是一种直译式脚本语言,它本身提供了非常丰富的内部对象供设计人员使用。 
    并且它们的执行方式也是不一样的,Java是介于解释型和编译型语言之间的一种语言,java的源代码在传递到客户端执行之前,必须经过编译,通过相应平台上的解释器,实现独立于某个特定的平台编译代码的束缚。JavaScript是一种解释性编程语言,其源代码在发往客户执行之前不需经过编译,而是将文本格式的字符代码发送给客户编由浏览器解释执行。 
    再其次两者的用途也不一样,java广泛应用于个人PC、数据中心、游戏控制台、科学超级计算机、移动电话和互联网等,而Javascript的用途是:1.嵌入动态文本于HTML页面;2.对浏览器事件做出响应; 3.读写HTML元素;4.在数据被提交到服务器之前验证数据;5.检测访客的浏览器信息; 6.控制cookies,包括创建和修改等。

    展开全文
  • javascript

    2020-07-29 14:21:49
    javascript官方文档,web前端师的权威文档,web前端的
  • JavaScript基础入门篇(一)

    万次阅读 多人点赞 2019-11-21 16:40:48
    JavaScript简介 &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;JavaScript是一种解释型脚本语言,目的是能够在客户端的网页中增加动态效果和交互能力,实现了用户与网页之间的一种实时的...
  • JDK7 For Mac

    2020-07-30 23:32:07
    JDK 7 For Mac , 直接安装板 无需命令执行,简单方便。
  • html+JavaScript实现页面跳转

    千次阅读 2019-02-28 18:35:38
    1、html中使用meta中跳转,通过meta可以设置跳转时间和页面 &lt;head&gt; &lt;!--只是刷新不跳转到其他页面 --&gt; &lt;meta http-equiv="refresh"...refresh"
  • 2019最新《JavaScript从入门到精通全套教程》

    千次阅读 热门讨论 2019-05-10 20:02:22
    全套JavaScript教程接近70堂课的样子,又是一波干货,需要的自存! 全套JavaScript教程接近70堂课的样子,又是一波干货,需要的自存! 全套JavaScript教程接近70堂课的样子,又是一波干货,需要的自存! ...
  • function counNum(n){ var first = 1, second = 1, third; if(n&amp;gt;2){ for(var i = 0; i &amp;lt; n-2; i++){ th...
  • js 数据集合添加对象

    千次阅读 2019-07-11 17:22:10
    在js中定义对象: 方式一: var obj = {}; obj['a']=1; obj['b']=2; 方式二: var obj=new Object();  obj.a=1; obj.b=2; 在js中定义集合: var list = []; list.push(obj);
  • ArcGIS for JavaScript

    万人学习 2018-10-22 21:38:03
    全面介绍ArcGIS for JavaScript 开发
  • JavaScript jQuery 项目实战系列教程 能掌握JS和Jquery的基本技能,能完成基本的网页特效!
  • 从来玩转JavaScript+项目实战

    万人学习 2019-06-24 13:11:00
    本套课程主要是让学生能够从初级入门JavaScript开发,包括JavaScript基础、JavaScript进阶、JavaScript页面特效、JavaScript阶段小项目。
  • 本课程将深入讲解Javascript的各种技术,让学员可以利用Javascript编写出非常复杂的程序。本课程也是React Native、Cocos2d-js、Unity3D、PhoneGap、Web等技术的前导课程。
  • 掌握JQuery视频教程

    万人学习 2018-08-03 18:38:28
    JQuery是一个优秀的JavaScript库。它是轻量级的JS库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+),是我们编写JavaScript的利器! 适合对象: 需要大量编写JavaScript的朋友 ...
  • javascript零入门实战系列

    万人学习 2018-10-22 21:38:05
    本套javascript从入门开始,课程采用大量案例讲解js在网站中的应用. 案例主要有大量的逻辑训练题,常见的网站特效,轮播,手风琴,选项卡,键盘控制物体运动,图片透明度,缓存运动,面向对象&闭包的应用等等
1 2 3 4 5 ... 20
收藏数 2,094,435
精华内容 837,774
关键字:

javascript