精华内容
下载资源
问答
  • JavaScript学习

    千次阅读 2016-05-11 23:28:29
    1. JavaScript简介   1.1. JavaScript由来 Netscape 发明了 JavaScript  JavaScript由Netscape 在1995年发明。早期的主要目的是处理一些用户的输入验证操作。而在JavaScript语言出现之前客户端的页面时需要...

    1.     JavaScript简介

     

    1.1. JavaScript由来

    Netscape 发明了 JavaScript

        JavaScript由Netscape 在1995年发明。早期的主要目的是处理一些用户的输入验证操作。而在JavaScript语言出现之前客户端的页面时需要提交到服务器端,由服务器去检测的。在刚刚普及的电话线调制解调器时代,对用户是一种考验,著名的Netscape Navigator(早期浏览器) 通过引入JavaScript来解决该问题 

        随着互联网的流行,网页已经不断变得更大和复杂,如果用户想要注册表单,需要直接将表单提交到服务器进行验证,需要和服务器进行多次的往返交互,例如,用户注册一个表单,点击提交按钮,等待30秒服务器返回处理后,返回的是用户名不符合规则。这种用户体验是很不友好的。此时的Netscape(网景)开始着手解决这个问题。

        Netscape在 1995 年发行的 Netscape Navigator 2.0 开发一个称之为 LiveScript 的脚本语言,当时的目的是在浏览器和服务器(本来要叫它 LiveWire)端使用它。后来Netscape和Sun公司合作,所以最后Netscape 与 Sun 及时完成 LiveScript 实现。就在 Netscape Navigator 2.0 即将正式发布前,Netscape 将其更名为 JavaScript,目的是为了利用 Java 这个因特网时髦词汇,此后JavaScript 从此变成了因特网的必备组件。

    三足鼎立

        微软进军微软决定进军浏览器,发布了 IE 3.0 并搭载了一个 JavaScript 的克隆版,叫做 JScript(这样命名是为了避免与 Netscape 潜在的许可纠纷)。

        在微软进入后,有 3 种不同的 JavaScript 版本同时存在:Netscape Navigator 3.0 中的 JavaScript、IE 中的 JScript 以及 CEnvi 中的 ScriptEase。JavaScript 并没有一个标准来统一其语法或特性,而这 3 种不同的版本恰恰突出了这个问题。随着业界担心的增加,这个语言的标准化显然已经势在必行。

    标准化

        1997 年,JavaScript 1.1 作为一个草案提交给欧洲计算机制造商协会(ECMA)。第 39 技术委员会(TC39)被委派来“标准化一个通用、跨平台、中立于厂商的脚本语言的语法和语义” 。由来自 Netscape、Sun、微软、Borland 和其他一些对脚本编程感兴趣的公司的程序员组成的 TC39 锤炼出了 ECMA-262,该标准定义了名为 ECMAScript 的全新脚本语言。随后,国际标准化组织及国际电工委员会(ISO/IEC)也采纳 ECMAScript 作为标准。

    从此,Web 浏览器就开始努力将 ECMAScript 作为 JavaScript 实现的基础。

        JavaScript 是属于网络的脚本语言!JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies,以及更多的应用。JavaScript 是因特网上最流行的脚本语言。

    注:

    javascript运行必须依赖于宿主环境语言,即页面语言HTML。

    是解释型的语言,解释型:不需要编译,解释器程序会每读取一条语句就执行。运行速度慢,浏览器中默认内置了javascript的解释器程序。

    浏览器中默认内置了javascript的解释器程序。

    常见的脚本语言:

        ECMASCRIPT主要进行所有脚本语言的标准制定。

        JavaScript

     JScript

     VBScript

     ActionScript

    JavaScript是基于对象和事件的脚本语言。

    1.2. JavaScript特点

    1.   安全性(不允许直接访问本地硬盘),它可以做的就是信息的动态交互。

    2.   跨平台性。(只要是可以解释Js的浏览器都可以执行,和平台无关。)

     

    1.3. JavaScript与Java不同

    1.   JS是Netscape公司的产品,Java是Sun公司的产品

    2.   JS是基于对象,Java是面向对象。

    3.   JS只需解释就可以执行,Java需要先编译成字节码文件,再执行。

    4.   JS是弱类型,Java是强类型。

    1.4. JavaScript内容

        尽管 ECMAScript 是一个重要的标准,但它并不是 JavaScript 唯一的部分,一个完整的 JavaScript 实现是由以下 3 个不同部分组成的:

    目前我们学习JavaScript也就是需要学习:

        JavaScript语法基础

        使用JS操作网页(DOM)

        使用JS操作浏览器(BOM)

    1.5. 体验JavaScript

    <html >

       <head>

          <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

          <title>体验JavaScript语言</title>

       </head>

       <body>

          <h1>体验JavaScript语言</h1>

          <script type="text/javascript">

            window.document.write("hello,world");

          </script>

       </body>

    </html>

     

     

     

    2.     JavaScript基础

    2.1. 语法

    2.1.1.  引入方式与引入位置

    向HTML页面插入JavaScript的主要方法,就是使用<script元素>。使用<script>元素的方式有两种:直接在HTML页面中嵌入JavaScript代码和包含外部的JavaScript文件。

    1.   JS代码存放在标签对<script>...</script>中。

    2.   使用script标签的src属性引入一个js文件。(方便后期维护,扩展)

    例:<script src=”test.js”type=”text/javascript”></script>

    注:规范中script标签中必须加入type属性。

     

    内部

       

    <html >

       <head>

          <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

          <title>在HTML中使用JavaScript</title>

       </head>

       <body>

          <h1>在页面中嵌入JavaScript</h1>

          <script type="text/javascript">

            window.document.write("hello,world");

          </script>

       </body>

    </html>

     

    外部

    html文件

    JavaScript文件

     

    JavaScript代码

     

    <script>标签的位置

    关于<script>标签的位置,<script>应该放在页面的<head>元素中。

    <html >

       <head>

          <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

          <title>在HTML中使用JavaScript</title>

          <script type="text/javascript" >

             window.document.write("世界你好!!!");

          </script>

       </head>

       <body>

          <h1>将JavaScrip标签放在head上</h1>

       </body>

    </html>

     

    注意:

    1、 页面上可以有多个<script>标签

    2、 <script>标签按顺序执行

    3、 <script>标签可以出现在任意的页面位置

        4、<script>标签一定要写</script>关闭,而不能<script/>这样关闭。否则没有任何错误信息,但是没有运行结果。

     

    2.1.2.  区分大小写

    与 Java 一样,变量、函数名、运算符以及其他一切东西都是区分大小写的。

    比如:

    变量 test 与变量 TEST 是不同的。

    2.1.3.  注释

    Java:      //    /* */    /**  */

    HTML:    <!--  -->

    CSS:      /*   */

    JavaScript:

    ECMAScript注释与Java语言的注释相同

    ECMAScript 借用了这些语言的注释语法。

    有两种类型的注释:

        单行注释以双斜杠开头(//)

        多行注释以单斜杠和星号开头(/*),以星号和单斜杠结尾(*/)

    2.2.   常用函数

    window.alert()或写为 alert() :显示一个提示框显示内容。

    window.document.write():在网页的当前位置处写内容。

    2.3.   变量

    变量是弱类型的

    与 Java不同,ECMAScript 中的变量无特定的类型,定义变量时只用 var 运算符,可以将它初始化为任意值。

    因此,可以随时改变变量所存数据的类型(尽量避免这样做)。

    例子

    var color= "red";

    var num =25;

    varvisible = true;

     

    ECMAScript中的变量是用 var 运算符(variable 的缩写)加变量名定义的。例如:

     

    var test= "hi";

     

    在这个例子中,声明了变量 test,并把它的值初始化为 "hi"(字符串)。

     

    每个变量仅仅是一个用于保存值的占位符而已。定义变量时要使用var操作符(var是关键字),后跟变量名

    varmessage;

    这行代码定义了一个名为message的变量,该变量可以用来保存任何值,也可以直接初始化变量。

    varmessage ="hi";

          

    ECMAScript中的变量无特定的类型,定义变量时只用 var 运算符,可以将它初始化为任意值。

    <script type="text/javascript" >

            //定义变量

            var color = "red";

            var num = 25;

            var visible = true;

          </script>

     

    同时,可以随时改变变量所存数据的类型(尽量避免这样做)。

    <script type="text/javascript" >

             //定义变量

             var message = "hello";

            message = 100;

            alert(message);

          </script>

    该案例中变量message一开始保存了一个字符串值"hi" 然后又被一个数值100取代。这在ECMAScript是有效的,但是不建议这样使用。

    使用细节:

    1、 var关键字在定义变量的时候可以省略不写

    2、 变量名可以重复,后面的将覆盖前面的变量

    3、 变量的类型取决于值的类型

    一条语句定义多个变量。

    中间使用豆号隔开即可,可初始化,也可以不初始化。

    <script type="text/javascript" >

             var name = "jack",

            age = 28,

            gender = "";

          </script>

    JavaScript代码块及其代码块变量作用域

    <script type="text/javascript" >

            //代码块 (Java)对代码进行封装隔离变量的作用

            {

                var a = 100;

                document.write(a + "</br>");

             } {

                document.write(a + "</br>");

               //JavaScript不会隔离变量作用域

            }

     

          </script>

     

    2.4. 数据类型

    2.4.1.  typeof操作符

    ECMASCRIPT中有4种基本数据类型:

        Undefined,Boolean,Number和String

    Typeof 

    关键字typeof可以获取一个变量的类型。

    <script type="text/javascript" >

            var a = 100;

            var b = 3.14;

            var c = true;

             var d = 'a';

             var e = "hello";

            var f;

             document.write(a + "<br/>");

             document.write(b + "<br/>");

             document.write(c + "<br/>");

            document.write(d + "<br/>");

             document.write(e + "<br/>");

             document.write(f + "<br/>");

             document.write("<hr/>");

             document.write( typeof a + "<br/>");

             document.write( typeof b + "<br/>");

             document.write( typeof c + "<br/>");

             document.write( typeof d + "<br/>");

             document.write( typeof e + "<br/>");

            document.write( typeof f + "<br/>");

       </script>

     

    类型的总结:

          所有的数值都是number类型

    字符和字符串都是string类型

    布尔是boolean类型

    如果一个变量没有初始化值的时候,其类型为undefined类型。表示没有定义。

    JavaScript中数值的表示形式:

    <script type="text/javascript" >

            var a = 12;

            var b = 012; //八进制 10

            var c = 0x12; //十六进制 18

            document.write(a + "<br/>");

            document.write(b + "<br/>");

            document.write(c + "<br/>");

          </script>

    使用细节:

    1、八进制中如果数据超过0~7,默认解析为十进制数据。

    <script type="text/javascript" >

            var a=09; //无效的八进制

             document.write(a+"<br/>");

          </script>

     

    浮点数:

        要定义浮点值,必须包括小数点和小数点后的一位数字(例如,用 1.0 而不是 1)。这被看作浮点数字面量。例如:

    <script type="text/javascript" >

            var a = 3.14;//浮点数

            var b = 1.//合法,小数点后面没有数字,解析为1

            var c = 10.0//整数,解析为10

            document.write(a + "<br/>");

            document.write(b + "<br/>");

            document.write(c + "<br/>");

          </script>

    由于保存浮点数需要的内存空间是保存正数值的两倍,因此ECMAScrip会将浮点数值转换为整数值。如果小数点后没有跟任何数字和浮点数本身就是一个整数就会被转换为整数。

     

    转换成数字

        ECMAScript 提供了两种把非数字的原始值转换成数字的方法,即 parseInt() 和 parseFloat()。只有对 String 类型调用这些方法,它们才能正确运行;对其他类型返回的都是 NaN。

        在判断字符串是否是数字值前,parseInt() 和 parseFloat() 都会仔细分析该字符串。

    parseInt()方法首先查看位置 0 处的字符,判断它是否是个有效数字;如果不是,该方法将返回 NaN,不再继续执行其他操作。但如果该字符是有效数字,该方法将查看位置 1 处的字符,进行同样的测试。这一过程将持续到发现非有效数字的字符为止,此时 parseInt() 将把该字符之前的字符串转换成数字。

        例如,如果要把字符串 "12345red" 转换成整数,那么 parseInt() 将返回 12345,因为当它检查到字符 r 时,就会停止检测过程。

    <script type="text/javascript" >

             var num = parseInt("1234abc");

            document.write(num); //1234

          </script>

     

        字符串中包含的数字字面量会被正确转换为数字,比如 "0xA" 会被正确转换为数字 10。不过,字符串 "22.5" 将被转换成 22,因为对于整数来说,小数点是无效字符。

    <script type="text/javascript" >

             var num1 = parseInt("12345red");

             //返回 12345

             var num2 = parseInt("0xA");

            //返回 10

             var num3 = parseInt("56.9");

             //返回 56

             var num4 = parseInt("red");

            //返回 NaN

             document.write(num1 + "<br/>");

             document.write(num2 + "<br/>");

             document.write(num3 + "<br/>");

            document.write(num4 + "<br/>");

          </script>

     

    <script type="text/javascript" >

            alert(  parseFloat("123")  ); // 可以

            alert(  parseFloat("123.53")  ); // 可以

            alert(  parseFloat("012")  ); // 12

            alert(  parseFloat("000012")  )// 12

            alert(  parseFloat("0x20")  ); // 结果为0

            alert(  parseFloat("-59")  ); // 负数

            alert(  parseFloat("abc123")  ); // NaN (Not a Number),表示不是一个数字。

            alert(  parseFloat("123ab2c")  ); // 结果是123,即会解析前面正确的数字,直到遇到不正确的数字。

          </script>

    判断是否是一个有效的数值.

    isNaN

    isNaN( 表达式 ),返回的结果是否为NaN(非数值)

    <script type="text/javascript" >

             document.write(isNaN("abc")+"<br/>"); //true

             document.write(isNaN("123")+"<br/>"); //false

          </script>

    2.5. 运算符(operator)

    2.5.1.  算术

    加法运算符

     

    加法运算符由加号(+)表示:

    ECMAScript中的加法也有一些特殊行为:

        某个运算数是 NaN,那么结果为 NaN。

    字符串拼接

        如果两个运算数都是字符串,把第二个字符串连接到第一个上。

        如果只有一个运算数是字符串,把另一个运算数转换成字符串,结果是两个字符串连接成的字符串。

     

    例如:

     

    varresult = 5 + 5;  //两个数字

    alert(result);       //输出 "10"

    varresult2 = 5 + "5";   //一个数字和一个字符串

    alert(result);       //输出 "55"

    注意:

    var a = 5;

    var b = true;

    alert(a + b);

    //6

     

    注意:变量是布尔类型的时候,true=1, false=0;

    var a = 5;

    var b = false;

    alert(a + b);//5

     

    乘法运算符

     

    乘法运算符由星号(*)表示,用于两数相乘。

     

    ECMAScript中的乘法语法与 Java语言中的相同:

    注释:如果运算数是数字,那么执行常规的乘法运算,即两个正数或两个负数为正数,两个运算数符号不同,结果为负数。

     

    除法运算符

    除法运算符由斜杠(/)表示,用第二个运算数除第一个运算数:

    variResult = 88 /11;

    注意:

    var a = 10;

    var b = 3;

    alert(a / b); //3.3333333333333335

     

     

    2.5.2.  比较

    比较运算符小于、大于、小于等于和大于等于执行的是两个数的比较运算

    varbResult1 = 2 > 1 //true

    varbResult2 = 2 < 1 //false

     

    比较数字和字符串

    varbResult = "25" < "3";

    alert(bResult);   //输出 "true"

    上面这段代码比较的是字符串 "25" "3"。两个字符串在比较的时候比较的是两个字符串对应的字符顺序.

    注意:如果字符串与比较,会把字符串转成数字再进行比较。

    如果把某个运算数改为数字,那么结果就不一样了:

    var bResult = "25" < 3;

    alert(bResult);   //输出 "false"

     

    这里,字符串 "25" 将被转换成数字 25,然后与数字 3 进行比较,结果不出所料

     

    无论何时比较一个数字和一个字符串,ECMAScript 都会把字符串转换成数字,然后按照数字顺序比较它们。

     

    2.5.3.  逻辑运算符

    && 与

    ||   或

    !    非

    逻辑 AND 运算符

    在 ECMAScript 中,逻辑 AND 运算符用双和号(&&)表示:

    var bTrue = true;
    var bFalse = false;
    var bResult = bTrue && bFalse;

    与 Java 中的逻辑 AND 运算相似,ECMAScript 中的逻辑 AND 运算也是简便运算,即如果第一个运算数决定了结果,就不再计算第二个运算数。对于逻辑 AND 运算来说,如果第一个运算数是 false,那么无论第二个运算数的值是什么,结果都不可能等于 true。

    考虑下面的例子:

    var bTrue = true;

    var bResult = (bTrue && bUnknown);   //发生错误

    alert(bResult);                //这一行不会执行

    这段代码在进行逻辑 AND 运算时将引发错误,因为变量 bUnknown 是未定义的。变量 bTrue 的值为 true,因为逻辑 AND 运算将继续计算变量 bUnknown。这样做就会引发错误,因为 bUnknown 的值是 undefined,不能用于逻辑 AND 运算。

     

    逻辑 OR 运算符

    ECMAScript中的逻辑 OR 运算符与 Java 中的相同,都由双竖线(||)表示

    var bTrue = true;

    var bFalse = false;

    var bResult = bTrue || bFalse;

    下面的真值表描述了逻辑 OR 运算符的行为:

    运算数 1

    运算数 2

    结果

    true

    true

    true

    true

    false

    true

    false

    true

    true

    false

    false

    false

     

     

    与逻辑 AND 运算符一样,逻辑 OR 运算也是简便运算。对于逻辑 OR 运算符来说,如果第一个运算数值为 true,就不再计算第二个运算数。

     

    逻辑 运算符NOT。

    在 ECMAScript 中,逻辑 NOT 运算符与Java 中的逻辑 NOT 运算符相同,都由感叹号(!)表示。

    通常,该运算符用于控制循环:

    var bFound = false;

    var i = 0;

     

    while (!bFound) {

      if (aValue[i] == vSearchValues) {

        bFound = true;

      } else {

        i++;

      }

    }

     

     

    2.5.4.  赋值运算符

    简单的赋值运算符由等号(=)实现,只是把等号右边的值赋予等号左边的变量。

     

    例如:

     

    var iNum= 10;

     

    复合赋值运算是由乘性运算符、加性运算符或位移运算符加等号(=)实现的。这些赋值运算符是下列这些常见情况的缩写形式:

     

    var iNum= 10;

    iNum =iNum + 10;

     

    可以用一个复合赋值运算符改写第二行代码:

     

    var iNum= 10;

    iNum +=10;

     

    每种主要的算术运算以及其他几个运算都有复合赋值运算符:

     

        乘法/赋值(*=)

        除法/赋值(/=)

        取模/赋值(%=)

        加法/赋值(+=)

        减法/赋值(-=)

    2.5.5.  三目

    运算符是 ECMAScript 中功能最多的运算符,它的形式与 Java 中的相同。

     

    variable= boolean_expression ? true_value : false_value;

     

    该表达式主要是根据 boolean_expression 的计算结果有条件地为变量赋值。如果 Boolean_expression 为 true,就把 true_value 赋给变量;如果它是 false,就把 false_value 赋给变量。

     

    例如:

     

    var iMax= (iNum1 > iNum2) ? iNum1 : iNum2;

     

    在这里例子中,iMax 将被赋予数字中的最大值。表达式声明如果 iNum1 大于 iNum2,则把 iNum1 赋予 iMax。但如果表达式为 false(即 iNum2 大于或等于 iNum1),则把 iNum2 赋予 iMax。

    2.6.   流程控制语句

    2.6.1.  判断

    判断语句

    if 语句的语法:

     

    if(condition) statement1 else statement2

     

     

    如果条件计算结果为 true,则执行 statement1;如果条件计算结果为 false,则执行 statement2。

    注意:   

    判断的条件会发生自动类型转换:

       number:如果非0true0false

        string:如果非null或非空为true,否则为false

        undefinedfalse

        NaN:    false

       对象类型:非nulltrue,否则为false

     

    2.6.2.  选择

    switch 语句的语法:

     

    switch(expression)

      case value: statement;

        break;

      case value: statement;

        break;

      case value: statement;

        break;

      case value: statement;

        break;

    ...

      case value: statement;

        break;

      default: statement;

     

    每个情况(case)都是表示“如果 expression 等于 value,就执行 statement”。

     

    关键字 break 会使代码跳出 switch 语句。如果没有关键字 break,代码执行就会继续进入下一个 case。

     

    关键字 default 说明了表达式的结果不等于任何一种情况时的操作(事实上,它相对于 else 从句)。

     

    ECMAScript和 Java 中的 switch 语句

     

    ECMAScript Java 中的 switch 语句有两点不同。在 ECMAScript 中,switch 语句可以用于字符串,而且能用不是常量的值说明情况:

    1、基本数据类型都可以传递给switch case语句。

    2case语句可以是表达式

     

    function test6() {

       var color = "xx";

       var value1 = "red", value2 = "green";

       switch(color) {

          case value1:

             alert("红色");

             break;

          case value2:

             alert("绿色");

             break;

          default:

             alert("执行默认default");

       }

    }

     

    这里,switch 语句用于字符串 sColor,声明 case 使用的是变量 BLUE、RED 和 GREEN,这在 ECMAScript 中是完全有效的。

    练习:

    switch中传递boolean类型值?

    var num = 20;

    switch(true) {

        case num >= 0 && num <= 10:

           alert("大于0小于等于10");

           break;

        case num>10&&num<=20:

           alert("大于10小于等于20");

           break;

    }

     

     

    2.6.3.  循环

     

    while 语句

     

    while 语句是先测试循环。这意味着退出条件是在执行循环内部的代码之前计算的。因此,循环主体可能根本不被执行。

     

    它的语法如下:

     

    while(expression) statement

     

    例子:

     

    var i =0;

    while (i< 10) {

      i += 2;

    }

     

     

    do-while 语句

     

    do-while 语句是后测试循环,即退出条件在执行循环内部的代码之后计算。这意味着在计算表达式之前,至少会执行循环主体一次。

     

    它的语法如下:

     

    do{statement} while (expression);

     

    例子:

     

    var i =0;

    do {i +=2;} while (i < 10);

     

     

    for 语句

     

    for 语句是前测试循环,而且在进入循环之前,能够初始化变量,并定义循环后要执行的代码。

     

    它的语法如下:

     

    for(initialization; expression; post-loop-expression) statement

     

    注意:post-loop-expression 之后不能写分号,否则无法运行。

     

    例子:

     

    iCount =6;

    for (vari = 0; i < iCount; i++) {

      alert(i);

    }

     

    这段代码定义了初始值为 0 的变量 i。只有当条件表达式(i < iCount)的值为 true 时,才进入 for 循环,这样循环主体可能不被执行。如果执行了循环主体,那么将执行循环后表达式,并迭代变量 i。

    for循环中不会有局部变量,都是全局的变量。

     

    2.6.4.  for in语句

    for 语句是严格的迭代语句,用于枚举对象的属性或者遍历一个数组的元素。

    它的语法如下:

    for (property in expression) statement

    例子:

    for (sProp in window) {

      alert(sProp);

    }

    这里,for-in语句用于显示 window 对象的所有属性。

    2.6.5.  With语句

    wth语句的作用: 有了 With 语句,在存取对象属性和方法时就不用重复指定参考对象。

    格式 :

           with(obj){

                  操作obj的属性语句;

           }

          

    <script type="text/javascript">
            <!—
                with(document){
                  write("您好 !");
                  write("<br>这个文档的标题是 : \"" + title + "\".");
                  write("<br>这个文档的 URL 是: " + URL);
                  write("<br>现在您不用每次都写出 document 对象的前缀了 !");
               }
            // -->

    </script>

     

    2.6.6.  练习

           1,显示“*”为正方形,5行5列。

            2,显示“*”为直角三角型,5行,第1行有1个“*”,第2行有2个“*”……

            3,显示乘法口诀。

               1*1=1

                1*2=2 2*2=4

               ....

               1*9=92*9=18 ...

    2.7. JavaScript函数基础

    函数主要用来封装具体的功能代码。

    函数是由这样的方式进行声明的:关键字 function、函数名、一组参数,以及置于括号中的待执行代码。

     

    注意:函数的形参是不用声明使用的。

     

    函数的基本语法是这样的:

     

    functionfunctionName(arg0, arg1, ... argN) {

      statements

    }

     

    例如:

     

    functionsayHi(sName, sMessage) {

      alert("Hello " + sName + sMessage);

    }

    调用函数?

     

    函数可以通过其名字加上括号中的参数进行调用,如果有多个参数。

     

    如果您想调用上例中的那个函数,可以使用如下的代码:

     

    sayHi("David"," Nice to meet you!")

     

    调用上面的函数 sayHi() 会生成一个警告窗口。

     

    函数的返回值

     

    没有返回值类型,如果一个函数需要返回值直接使用return即可.

    该函数只需要使用 return 运算符后跟要返回的值即可。

     

    functionsum(iNum1, iNum2) {

      return iNum1 + iNum2;

    }

    注释:如果函数无明确的返回值,或调用了没有参数的 return 语句,那么它真正返回的值是 undefined。

    -----------------------------------------------------------------

    函数格式

        Function函数名(参数列表){

        代码;

        return返回值; //return 不是必须的.

    }

        示例:

           function foo() {

               alert("test");

           }

           function foo2( a ){

               alert(a);

               return; // 没有返回值,表示方法执行完了,后面如果有代码就不会执行了

           }

           function foo3( a, b ){

               alert(a + b);

           }

           function foo4( a, b ){

               return a + b;

           }

        注意事项:

               1.不需要类型,只写形参的名称就可以了。

               2声明时不需要指定返回值类型;return可以有,也可以没有。

    3.    javascript中的函数没有重载的形式,后定义的函数会直接覆盖前面 的函数。

    4.   一个函数可以接收任意个 参数。

     

        参数:

               JS的函数都是类似于Java中可变参数的。

    在函数中可以直接使用arguments变量,arguments是一个数组,表示所有传递过来的参数。

    在声明函数时,定义的形参就对应arguments数组中相应位置的参数值,写形参只是用着方便一点。

        参数示例

           定义:

               function foo( a, b, c ){

                  ...

               }

           调用: 

               foo()

               foo( 1, 2 )

               foo( 1, 2, 3 )

               foo( 1, 3, 5, 7, 9 )

               foo( "aa", null,"cc" )

        没有重载

           当同一个名称的函数定义多次时,最终使用的是最后一个的定义。没有重载!

           例:

               function sum(){alert("11"); }

               function sum(a,b){alert("22"); }*

               调用时写sum(1,2),结果还是显示“22”。

    总结:

    特点:

           1、使用function关键字定义函数。

           2、没有任何的返回值类型。

           3、函数的定义优先执行,与顺序无关。

           4、可以通过函数名赋值函数,函数变量的类型是function对象。

           5、参数列表不能有var关键字。

           6、函数的参数列表在具体调用的时候实参个数可以和形参个数不同。

           7、JavaScript函数天然的支持可变参数。

           8、同名的函数最后声明会覆盖前面以声明。Javascript中没有函数重载。

    案例:体验JavaScript

        定义一个输入框输入的月份,然后输出本月对应的天数。

    <html>

        <head>

           <title>学习JavaScript</title>

        </head>

        <body>

           月份:

           <input type="text" id="month">

           <input type="button" value="显示天数" οnclick="foo()">

           <!--

           31天:1,3,5,7,8,10,12

           30天:4,6,9,11

           28天:2

           -->

           <script type="text/javascript">

               function foo(){

                  var monthValue = document.getElementById("month").value;

                  // 如果是非数字,则不再继续执行

                  if( isNaN(monthValue) ){

                      alert("请输入正确的月份!");

                      return;

                  }

                  // 转为数字

                  monthValue = parseInt(monthValue);

                  // 判断范围

                  if( monthValue < 1 || monthValue > 12){

                      alert("请输入正确的月份(1--12)!");

                      return;

                  }

                  // 根据月份显示天数

                  switch(monthValue){ // 这时不会自动转换类型,所以先转型

                      case 2:

                         alert("28天");

                         break;

                      case 4:

                      case 6:

                      case 9:

                      case 11:

                         alert("30天");

                         break;

                      default:

                         alert("31天");

                         break;

                  }

               }

           </script>

        </body>

    </html>

     

    5.     面向对象

    JavaScript面向对象的脚本语言,此时开发者在开发的时候需要找对象,默认提供了内置的对象。也可以根据开发者的需求自己定义对象。

     

    5.1. 基本数据类型包装类

    为了便于操作基本类型值,ECMAScript 提供了3个特殊的引用类型:Boolean,Number,String。它们是引用类型。当读取基本数据类型时,后台就会创建一个对应的基本包装类对象,所以我们在操作基本数据类型时,可以直接调用一些方法。

     

    5.1.1.  String

     

    //通过构造函数创建String 对象

    var b = new String("java");

    var c = new String("java");

    document.write(b + "," + c);

    document.write(b == c);

    //false

    //比较字符串的值是否相等

    document.write(b.valueOf() == c.valueOf());

     

    //属性

    var a = "helloworld";

    document.write(a.length);

     

    常见的方法:

    Anchor()生产锚点

    Blink()   为元素添加blink标签

    charAt()   返回指定索引位置处的字符。

    charCodeAt() 回一个整数,代表指定位置上字符的 Unicode 编码。

    Concat()   回字符串值,该值包含了两个或更多个提供的字符串的连接。

    Fontcolor() 把带有 COLOR 属性的一个 HTML <FONT> 标记放置在 String 对象中的文本两端

    indexOf()   返回 String 对象内第一次出现子字符串的字符位置

    italics()   把 HTML<I> 标记放置在 String 对象中的文本两端。

    Link()         把一个有 HREF 属性的 HTML 锚点放置在 String 对象中的文本两端。

    Replace()      返回根据正则表达式进行文字替换后的字符串的复制

    Split()        切割  

    Substr()       截取子串

    toUpperCase()  转大写

    toLowerCase    转小写

    //方法

    document.write("第五章".anchor("ch1"));

    document.write("第五章".blink());

    //    返回在指定位置的字符。

    document.write("第五章".charAt(0));

    document.write("a".charCodeAt(0));

    document.write("第五章".concat("abc"));

    document.write("第五章".fontcolor("#ff0000"));

    document.write("第五章".indexOf(""));

    document.write("第五章".italics());

    document.write("第五章".link());

    document.write("helloworld".replace(/l/g, "L"));

    document.write("<br/>");

    var names = "jack-lili-lucy".split("-");

    for (var temp in names) {

       document.write(names[temp] + "<br/>");

    }

    document.write("<br/>");

    document.write("helloworld".substr(1, 2)); //el

    document.write("helloworld".substring(1, 2));//e

    document.write("helloworld".toUpperCase());

    document.write(new String("java").toString() == new String("java").toString());

     

    5.1.2.  Number

    构造函数

    //创建number对象

    var a = 12;

    var b = new Number(12);

    document.write(a + ":" + b);

    //比较数值true

    document.write(a == b);

    //没有转型false

    document.write(a === b);

    //false

    document.write(new Number(12) == new Number(12));

    //false

    document.write(new Number(12) === new Number(12));

    // false

    document.write(new Number(12).valueOf() == new Number(12).valueOf());

    //true

    document.write(new Number(12).valueOf() === new Number(12).valueOf());

     

    属性:

    document.write("最大值" + Number.MAX_VALUE + "</br>");

    document.write("最小值" + Number.MIN_VALUE + "</br>");

     

    方法

    //方法

    document.write(new Number(12).toString(10) + "<br/>");

    document.write(new Number(12).toString(2) + "<br/>");

    document.write(new Number(12).toString(8) + "<br/>");

    document.write(new Number(12).toString(16) + "<br/>");

    document.write(new Number(12.12345) + "<br/>");

    document.write(new Number(12.12345).toFixed() + "<br/>");

    document.write(new Number(12.12345).toFixed(2) + "<br/>");

    document.write(new Number(12.12345).toFixed(3) + "<br/>");

    备注:toFixed()是指定小数位数。

    5.2. Math类

    Math工具类中的方法

           max()

           min()

           random()

           ...更多请看文档

    document.write(Math.ceil(12.34) + "<br/>");

    //13

    document.write(Math.floor(12.34) + "<br/>");

    //12

    document.write(Math.round(12.54) + "<br/>");

    //13

    document.write(Math.round(12.35) + "<br/>");

    //12

    document.write(Math.random() + "<br/>");

    //0~1

    document.write(Math.max(12, 100, -1, 200, 320, 500) + "</br>");

    document.write(Math.min(12, 100, -1, 200, 320, 500) + "</br>");

     

    5.3. Date对象

        查看文档

           改变网页标题的方式

        每一秒执行一次方法

           练习: 标题栏显示时间,每一秒变化一次, 格式为: xxxx年xx月xx日 xx:xx:xx

    提示:需要使用

    setInterval(代码, 毫秒数) 每经过指定毫秒值后执行指定的代码。

    setTimeout(代码, 毫秒数)  经过指定毫秒值后执行指定的代码(只执行一次)。

    其中一个方法

    查看文档学习Date的其他方法

    function showDate() {

       //获取系统时间

       var date = new Date();

       //获取年日时分秒

       var str = date.getFullYear() + "" + (date.getMonth() + 1) + "" + date.getDate() + "" + "星期" + date.getDay() + " " + date.getHours() + "" + date.getMinutes() + "" + date.getMinutes() + "" + date.getSeconds() + "秒"

       //将格式化好的时间显示在叶面的span标签体中

       var span = document.getElementById("mydate");

       //span标签设置标签体内容

       span.innerHTML = str.fontcolor("red");

       //调用定时函数

       window.setTimeout("showDate()", 1000);

    }

     

    //调用函数

    showDate();

     

     

     

    5.4. 数组

        数组定义:

            创建数组的基本方式有2种.

        第一种是使用Array的构造函数

    不指定长度

            vararrs=new Array();

            如果确定知道数组保存的数量,可以通过构造函数传递数组的长度

    指定长度

            vararrs=new Array(20);

            该数组有20个元素,每一项的默认值都是undefined

    指定元素

            var arrs=new Array("hello"); 会创建一个元素的数组.

        第二种方式

    指定元素

            创建一个包含3个字符串的数组

            vararrs=["aa","bb","cc"];

            创建一个空数组

            vararrs=[];

            varvalues=[1,2];

    数组初始化

           vararrs=["aa","bb","cc"];

           color[2]="xx";//修改第3项

           color[3]="zz";//新增第4项

    数组遍历:

           for(var i = 0; i < arr.length; i++){

               alert(arr[i]);

           }  

           或

           for( var i in arr ){

               // i 是遍历出的数组中的索引,从0开始,一直到最大索引。

               // 如果有其他属性,也会遍历出来,其实索引就是数组对象的属性。

               alert(arr[i]);

           }

    注意:

    JS数组可以动态增长:

    //数组的声明和初始化,注意:数组的长度取决于整数下标的个数

    var arr = new Array();

    arr[0] = "aa";2

    arr[1] = "bb";

    arr[6] = 'xx';

    document.write(arr + "<br/>");

    //遍历数组

    for (var i = 0; i < arr.length; i++) {

       document.write(arr[i]+"<br/>");

    }

    //下标越界时:

    var arr = ["aa", "bb"];

    document.write(arr[200]);

    // 显示undefined

     

          

     

    常见方法

    Array中的方法:

           sort()

               对当前数组进行排序,并返回已经进行了排序的此Array对象。

               不会创建新对象,是在指定数组中直接进行排序。

           reverse()

               对当前数组进行反转排序,返回一个元素顺序被反转的 Array 对象。

               不会创建新对象,是在指定数组中直接进行排序。

     

           push( [item1 [item2 [. . . [itemN ]]]] )

               将以新元素出现的顺序添加这些元素。

               如果参数之一为数组,那么该数组将作为单个元素添加到数组中。

           pop()

               移除数组中的最后一个元素并返回该元素。

               如果该数组为空,那么将返回 undefined。

           shift()

               移除数组中的第一个元素并返回该元素。

               如果该数组为空,那么将返回 undefined。

           unshift([item1[, item2 [, . . . [,itemN]]]])

               将指定的元素插入数组开始位置并返回该数组。

     

           splice(start, deleteCount, [item1[,item2[, . . . [,itemN]]]])

               移除从 start 位置开始的指定个数的元素,并插入新元素,从而修改         concat([item1[, item2[, . . . [, itemN]]]])

               返回一个新数组,这个新数组是由两个或更多数组组合而成的。原数组不变。

               要加的项目(item1 … itemN)会按照从左到右的顺序添加到数组。  

               如果某一项为数组,那么添加其内容到 array1 的末尾。

               如果该项目不是数组,就将其作为单个的数组元素添加到数组的末尾。    

           slice(start, [end])

               返回一个包含了指定的部分元素的数组。

               将返回索引大于等于start且小于end的一段。

               原数组不变。

           join(separator)

               把所有元素由指定的分隔符分隔开来组成一个字符串,返回这个字符串值。

               如果数组中有元素没有定义或者为 null,将其作为空字符串处理。

    var a = [1, 2, 3];

    //    连接两个或更多的数组,并返回结果。

    document.write(a.concat([100, 30]) + "<br/>");

    document.write(a.concat([100, 30], [60, 90]) + "<br/>");

    //    把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。

    var b = a.join("$");

    document.write(b + "<br/>");

    document.write( typeof b + "<br/>");

    //string

    //    删除并返回数组的最后一个元素

    document.write(a.pop() + "<br/>");

    //    向数组的末尾添加一个或更多元素,并返回新的长度。

    document.write(a.push(99, 78) + "<br/>");

    //    把数组转换为字符串,并返回结果。

    document.write(a.toString() + "<br/>");

    // 返回数组对象的原始值

    var c = a.valueOf();

    document.write( typeof c + "<br/>");

     

    排序:

    var a = [100, 9, 20, 3, 7, 96];

    document.write(a + "<br/>");

    //如果调用该方法时没有使用参数,将按字母顺序对数组中的元素进行排序

    a.sort();

    document.write(a + "<br/>");

    //指定比较方式

    a.sort(compareTo);

    document.write(a + "<br/>");

    function compareTo(a, b) {

       return a - b;

    }

     

     

    5.5. 自定义对象

    5.5.1.  无参构造函数

     

    /*

     * 自定义对象

     *

     *  */

    function Person() {

       window.document.write("constructor()<br>");

    }

     

    var person = new Person();

    //定义属性

    person.name = "jack";

    person.age = 23;

    //定义方法

    person.work = function() {

       window.document.write("person working...<br/>");

    };

    //获取构造函数

    window.document.write(person.constructor + "<br/>");

     

    window.document.write(person.name + "," + person.age + "<br/>");

    person.work();

     

     

    5.5.2.  有参数构造函数

    function Person(name, age) {

       this.name = name;

       this.age = age;

       this.work = function() {

          alert(this.name + ":" + this.age);

       }

    }

     

    var person = new Person("jack", 28);

    person.work();

     

     

     

    5.5.3.  Object方式

    /*

     * 自定义对象Object方式

     *

     *  */

    var person = new Object();

    person.name = "jack";

    person.age = 28;

    person.sayHello = function() {

       document.write(this.name + ":" + this.age);

    }

    person.sayHello();

     

     

    该例子创建了一个名为person的对象,并添加了2个属性(name age)和一个方法(sayHello)

     

    使用构造函数模式方式创建对象:

        先自定义类,其实就是定义一个和类名相同的函数。

        再使用new关键字调用定义好的类。

        (任何函数,只要通过new操作符来调用,那它就可以作为构造函数)

     

        说明:

           要将属性与方法赋给this,这样才是表示是对象的属性,如果写var str则是方法中的局部变量。

           不要写new Object()。

           不要写return语句。

     

        JS在new Person()会做如下事:

           1,创建一个新对象。

           2,this指向新对象。

           3,执行构造方法中的代码。

           4,返回新对象。

    字面量方式创建对象:

    var person={

       name:"李四",

       age:88,

       eat:function(){

          alert("eating...");

       }

    };

    alert(person.name+person.age);

    person.eat();

    5.6. prototype

     “prototype”字面翻译是原型,是javascript实现继承的主要手段。粗略来说就是:prototypejavascript中的函数(function)的一个保留属性,并且它的值是一个对象(我们可以称这个对象为"prototype对象")。

    Prototype注意的细节:

    1.     prototype是函数(function)的一个必备属性(书面一点的说法是"保留属性")(只要是function,就一定有一个prototype属性)

    2.     prototype的值是一个对象

    3.     可以任意修改函数的prototype属性的值。

    4.     一个对象会自动拥有这个对象的构造函数的prototype的成员属性和方法。

     

     

     

    需求:

    1.  自定义一个数组的工具类。

    function arrTool(){}

    var ArrayTool  = new arrTool();

    ArrayTool.getMax = function(arr)

    {

        var max = 0;

       

        for(var x=1; x<arr.length; x++)

        {

           if(arr[x]>arr[max])

               max = x;

        }

        return arr[max];

    };

    ArrayTool.getMin = function(arr)

    {

        var min = arr[0];

       

        for(var x=1; x<arr.length; x++)

        {

           if(arr[x]<min)

               min = arr[x];

        }

        return min;

    }

    /*

    ArrayTool.getMax = getMax;

    //获取最值。

    function getMax(arr)

    {

        var max = 0;

       

        for(var x=1; x<arr.length; x++)

        {

           if(arr[x]>arr[max])

               max = x;

        }

        return arr[max];

    }

    */

    ArrayTool.binarySearch = function(arr,key)

    {

        var min,max,mid;

       

        min = 0;

        max = arr.length-1;

       

        while(min<=max)

        {

           mid  = (min+max)>>1;

          

           if(key>arr[mid])

               min = mid + 1;

           else if(key<arr[mid])

               max = mid - 1;

           else

               return mid;

        }

        return -1;

    }

    /*

    ArrayTool.binarySearch = halfSearch;

    //折半查找,必须是对有序的数组。

    function halfSearch(arr,key)

    {

        var min,max,mid;

       

        min = 0;

        max = arr.length-1;

       

        while(min<=max)

        {

           mid  = (min+max)>>1;

          

           if(key>arr[mid])

               min = mid + 1;

           else if(key<arr[mid])

               max = mid - 1;

           else

               return mid;

        }

        return -1;

    }

    2.  把数组的工具方法添加到javascript内置对象Array中。

     

        Array.prototype.getIndex = function(element)

    {

        for(var x=0; x<this.length; x++)

        {

           if(this[x]==element)

               return x;

        }

        return -1;

    }

    Array.prototype.getMin = function()

    {

        var min = this[0];

        for(var x=1; x<this.length;x++)

        {

           if(this[x]<min)

               min = this[x];

        }

        return min;

    }

    3.  给 字符串添加新的方法

    // JavaScript Document

    //给字符串string对象添加新功能。

    //去除字符串两端的空格。

    String.prototype.trim = function()

    {

        var start,end;

        start = 0;

        end = this.length-1;

       

        while(start<=end && this.charAt(start)==" ")

           start++;

          

        while(start<=end && this.charAt(end)==' ')

           end--;

          

        return this.substring(start,end+1);

    }

     

    //将字符串变成数组。

    String.prototype.toCharArray = function()

    {

        var arr = new Array(this.length);

       

        for(var x=0; x<this.length; x++)

        {

           arr[x] = this.charAt(x);

        }

       

        return arr;

    }

    //将字符串进行反转。

    String.prototype.reverseString = function()

    {

        var arr = this.toCharArray();  

       

        return arr.reverse().join("");

    }

     

     

    展开全文
  • javaScript学习笔记(一)js基础

    万次阅读 多人点赞 2018-09-21 10:07:18
    JavaScript是目前web开发中不可缺少的脚本语言,js不需要编译即可运行,运行在客户端,需要通过浏览器来解析执行JavaScript代码。 诞生于1995年,当时的主要目的是验证表单的数据是否合法。 Java...

     

                                          公众号  关注一波  不定期分享视频资料

     

                                                                   

    一、简介

    1、概述:

    JavaScript是目前web开发中不可缺少的脚本语言,js不需要编译即可运行,运行在客户端,需要通过浏览器来解析执行JavaScript代码。

    诞生于1995年,当时的主要目的是验证表单的数据是否合法

    JavaScript本来应该叫Livescript,但是在发布前夕,想搭上当时超热的java顺风车,临时把名字改为了JavaScript。(也就是说js跟java没有关系,当时只是想借助java的名气)。

    js组成部分:

    (1)核心(ECMAScript):这一部分主要是js的基本语法。

    (2)BOM:Brower Object Model(浏览器对象模型),主要是获取浏览器信息或操作浏览器的,例如:浏览器的前进与后退、浏览器弹出提示框、浏览器地址栏输入网址跳转等操作等。

    (3)DOM:Document Object Model(文档对象模型),此处的文档暂且理解为html,html加载到浏览器的内存中,可以使用js的DOM技术对内存中的html节点进行修改,用户从浏览器看到的是js动态修改后的页面。(增删改查)

    2、特点:

    1. 交互性(它可以做的就是信息的动态交互)
    2. 安全性(不允许直接访问本地硬盘)
    3. 跨平台性(只要是可以解析js的浏览器都可以执行,和平台无关)

    3、和Java区别:

    4、作用

    avaScript 被用来改进设计、验证表单、检测浏览器、创建cookies,等等。JavaScript 是因特网上最流行的脚本语言,并且可在所有主要的浏览器中运行,比如: Internet Explorer、 Maxthon、Mozilla、Firefox、Netscape、Chrome和 Opera等。

    在目前学习阶段只要记住最常用的二个:(1)运态修改html及css代码 (2)验证表单

    5、书写位置

    5.1、内嵌式:

    理论上js可以书写在页面的任意位置。

    <script>

    alert("内嵌式")

    </script>

    5.2、外链式:

    首先新建一个文件类型为.js的文件,然后在该文件中写js语句,通过script标签对引入到html页面中。

    <script src="js文件路径地址">这里不能写js语句</script>

    5.3、行内式:

    直接书写在标签身上,是一个简写的事件,所以又称之为事件属性。     onclick单击事件

    <input type="button" value="点我呀!" onclick="alert('点我干啥!^6^');">
    <button onclick="alert('恭喜你,中 500 万.');">点我呀!</button>
    

    6、注释:

    单行注释:		//	注释语句		快捷键ctrl+/
    多行注释:		/* 注释语句 */    快捷键ctrl+shift+/   
    注意:多行注释相互不能嵌套使用,只能在多行注释里面使用单行注释!
    

    7、数据类型:

    Js中的数据类型:
     

    数值型:number(凡是数字都是数值型,不区分整数和小数)
    字符串:string(凡是引号包裹起来的内容全部都是字符串)
    布尔:boolean(true、false)
    对象类型:object(特殊取值null)
    未定义型:undefined
    

    对比java中的数据类型:

    整数:byte short int long
    小数:float double
    字符:char 
    布尔:boolean
    字符串:String

    8、变量:

    8.1、定义:就是存放数据的、内疗可以存储任意数据

    8.2、声明变量:
     

    var 变量名称 = 存储的数据;   	(variable 变量)

    8.3、变量命名规范:

    1.	只能由字母、数字、_(下划线)、$(美元符号)组成。
    2.	不能以数字开头。
    3.	命名中不能出现-(js会理解成减号进行减法的操作),不能和关键字冲突。
    

    js是弱类型语言,不重视类型的定义,但js会根据为变量赋值的情况自定判断该变量是何种类型:

    数值型:var i = 1;	var d = 2.35;
    字符串:var str = "用心学习";
    布尔型:var b = true;
    

    对比Java:java是强类型的语言,注重类型的定义,Java定义类型如下:

    整型:int i = 1;
    浮点型:double d = 2.35;
    字符串:String str = “用心学习”;
    布尔型:boolean b = true;
    

    总结:js中变量的定义。只要加一个var就行。java则使用什么类型的变量就要定义什么类型的。

    9、检测数据类型:

    typeof(value); 或者typeof value;     返回这个变量的类型. 
    说明 : 同一个变量, 可以进行不同类型的数据赋值.
    
    <script type="text/javascript">
        
        var a;
        alert(typeof a);  // undefined
    
        a = 998;
        alert(typeof a); // number
    
        a = "用心学习";
        alert(typeof a); // string
    
        a = true;
        alert(typeof a); // boolean
        
    </script>
    

    10、算术运算符

    +	-	*	/	%	++	--

    注意:

    1.	由于js中的小数和整数都是number类型,不存在类似整数除以整数还是整数的结论。
    2.	字符串和其他的数据使用+号运算,会连接成一个新的字符串。
    3.	字符串使用除了+以外的运算符:如果字符串本身是一个数字,那么会自动转成number进行运算
    ,否则就会返回一个NaN的结果,表示这不是一个数字。NaN:not a number
    
    <script>
    
        alert(1234 / 1000 * 1000); // 1234
      
        var s = "12";
         s -= 10;
        alert(s);  // 2
     
        var s = "aa";
        s -= 10;
        alert(s);  // NaN       Not a Number 不是一个数字
    
        var s = "12";
        s += 10;
        alert(s);       // 1210 
    
    </script>
    

    11、关系(比较)运算符

    >		>=		<		<=  	!=		
    ==	等于(只比较内容)	===	恒等于(比较内容的同时还要比较数据类型)
    注意:关系运算符返回的结果只有两个:true / false
    
    <script>
    
        // 请问1 : 3 > 5, 结果为 ?
        alert(3 > 5);   // false
    
        // 请问2 : “22” == 22  结果为 ?
        alert("22" == 22); // true  (仅仅判断数值)
    
        // 请问3 : “22” === 22  结果为 ?
        alert("22" === 22);  // false  (恒等于, 数值和类型都要相等)
        
    </script>
    

    12、逻辑运算符

    &&	 	与		true&&false		====>false
    || 		或		true||false			====>true
    ! 		非		!true				====>false
    false(理解):false,  0,  null,  undefined 
    true(理解):true, 非0,  非null,  非undefined
    
    针对 && 顺口溜: 找第一个出现的假值. (一假即假)
    针对 || 顺口溜: 找第一个出现的真值. (一真即真)

    演示一:

    <script>
    
        // 短路与 (一假即假)
        // 口诀 : 找第一个为假的值.
    
        // 请问1 :  8 < 7 && 3 < 4, 结果为 ?
        alert(8 < 7 && 3 < 4);  // false
    
        // 请问2 :  -2 && 6 + 6 && null 结果为 ?
        alert(-2 && 6 + 6 && null); // null
    
        // 请问3 :  1 + 1 && 0 && 5  结果为 ?
        alert(1 + 1 && 0 && 5); // 0
    
    </script>
    

    演示二:

    <script>
    
        // 短路或 : 一真即真.
        // 口诀 : 找第一个为真的值.
    
        // 请问1 :  0 || 23 结果为 ?
        alert(0 || 23); // 23
    
        // 请问2 :  0 || false || true  结果为 ?
        alert(0 || false || true); // true
    
        // 请问3 :  null || 10 < 8 || 10 + 10结果为 ?
        alert(null || 10 < 8 || 10 + 10);  // 20
    
        // 请问4 :  null || 10 < 8 || false结果为 ?
        alert(null || 10 < 8 || false); // false
        
    </script>
    

    13、三元运算符:

    条件?表达式1:表达式2
    如果条件为true,返回表达式1的结果
    如果条件为false,返回表达式2的结果
    

    演示:

    <script>
    
        // 请问1 :  3 ? “aaa” : “bbb” 结果为 ?
        alert(3 ? "aaa" : "bbb");       // aaa
    
        // 请问2 :  0 ? “ccc” : “ddd”  结果为 ?
        alert(0 ? "ccc" : "ddd");       // ddd
        
    </script>
    

    14、if条件语句

    这个和Java中if语句一样。

    演示:

    <script>
    
          var score = 59;
    
          if (score >= 90) {
              alert("优秀");
          } else if (score >= 80) {
              alert("良好");
          } else if (score >= 60) {
              alert("及格");
          } else {
              alert("不及格");
          }
    
      </script>
    

    15、switch分支结构

    这个和java中switch结构一样。只是Java中表达式为:常量 整型(去long)、字符、字符串

    演示:

    <script>
    
          var score = 59;
    
          // 需求 : 将需要一个整型数值, 不想要小数点.
          // window 对象的 parseInt 方法.
          score = window.parseInt(score / 10 + "");
          // alert(score);
    
          switch (score) {
              case 10:
              case 9:
                  alert("优秀!");
                  break;
              case 8:
                  alert("良好!");
                  break;
              case 7:
              case 6:
                  alert("及格!");
                  break;
              default:
                  alert("不及格!");
                  break;
          }
    
      </script>
    

    16、循环结构 while、do-while. for;

    while(循环条件){循环体;}
    do{循环体;}while(循环条件);
    for(循环变量赋初值;循环条件;循环变量增值){循环语句;}
    console.log(...); 以日志的形式在控制台输出结果!
    

    演示:

    <script>
    
        // 需求 : 统计 1~100 之间能够被3和7整除的数字个数
    
        var count = 0;
    
        // 1. 遍历 1~100 之间的所有整型数值
        for (var i = 1; i <= 100; i++) {
    
            // 2. 判断
            if (i % 3 == 0 && i % 7 == 0) {
                // alert(i);
                console.log(i);
                // 3. 累加个数
                count++;
            }
        }
    
        // 4. 查看结果
        // alert(count);
        console.log(count);
    
    

    console.log显示如下:

    17、循环嵌套

    演示案例9*9乘法表

     <style>
            table {
                /* 将 table 表格的线变成了细线 */
                border-collapse: collapse;
                /*color: red;*/
                border-color: red;
            }
        </style>
    
        <script>
    
            // 需求 : 九九乘法口诀表
            document.write("<table border='1px solid red' cellspacing='0' cellpadding='8px'>");
            document.write("<caption>九九乘法口诀表</caption>");
            for (var i = 1; i <= 9; i++) {
                document.write("<tr>");
                for (var j = 1; j <= i; j++) {
                    document.write("<td>");
                    document.write(j + "*" + i + "=" + (j*i) + "&nbsp;&nbsp;&nbsp;&nbsp;");
                    document.write("</td>");
                }
                document.write("</tr>");
            }
            document.write("</table>");
    
        </script>
    
    

    18、自定义函数

    函数是命名的独立的语句段,这个语句段可以被当作一个整体来引用和执行:

    格式:

    function 函数名(形式参数){函数体}
    调用函数:函数名(实际参数);
    

    18.1、函数只有被调用后才会执行

    18.2、如果函数需要返回值、直接使用return 返回、不会像java一样要考虑返回值的类型

    <script type="text/javascript">
    
        // 定义一个函数 : function
        function demo2() {
            return 666;
        }
    
        // 调用函数 :
        alert(demo2());
    
    </script>
    

    18.3、如果函数需要传递参数、不需要指定参数的类型、直接使用变量即可

    <script type="text/javascript">
    
        // 定义一个函数 : function
        function demo3(a, b) {
            return a + b;
        }
    
        // 调用函数 :
        alert(demo3(10, 20));//显示30
    
    </script>
    

    18.4、js中出现二个重名的函数名、后者会把前面的覆盖掉

    对比java、java有重载(同名不同参)、重写(同名同参同返回值类型、方法体不一样)

    演示:

    <script type="text/javascript">
    
        // 定义一个函数 : function
        function demo4(a, b) {
            alert("调用1...");
        }
    
       function demo4() {
           alert("调用2...");
       }
    
        demo4(10, 20);
        demo4();
    
    </script>
    

    会显示二次下面的图片:

    19、匿名函数

    匿名函数是没有名字的函数

    function(形式参数){函数体}
    调用方式:将匿名函数赋值给一个变量,通过变量名调用函数
    定义函数并赋值给变量:var fn = function(形式参数){函数体}
    调用函数:fn(实际参数);
    

    演示:

    <script type="text/javascript">
    
        // 匿名函数 : 没有名称的函数
        var func = function(i, u) {
            alert(i + " love " + u);
        }
    
        // 调用函数 :
       func("柳岩", "小白");//显示柳岩love小白
    
    </script>
    

    20、案例-轮播图

    说明1 : script 标签需要放在 body 标签之后.
    
    说明2 : window.setInterval(“字符串函数名称()”, 时间毫秒数);
    
    说明3 : window.setInterval(函数名称, 时间毫秒数);
    
    说明4 : window.setInterval(匿名函数, 时间毫秒数);            推荐使用
    <head>
        <meta charset="UTF-8">
        <title>轮播图</title>
    
        <style>
    
            div {
                width: 80%;
                margin: 50px auto;
            }
    
            img {
                width: 100%;
            }
    
        </style>
    
    </head>
    <body>
        <div class="container">
            <img src="../img/01.jpg" alt="图片">
        </div>
    </body>
    

    实现一:

    <script>
    
        // 需求 : 动态获取页面中的 img 标签, 然后修改 img 标签的 src 属性.
        // 1. 获取 img 标签
        var img = document.getElementById("img");
        // alert(img);
    
        // 定义一个变量
        var count = 1;
    
        // 1.2 定义一个函数
        function changeImageSrc() {
            count++;
            img.src = "../img/0"+count+".jpg";
    
            // 判断
            if (count == 8) {
                count = 0;
            }
        }
    
        // 2. 循环切换图片
        // window.setInterval(函数, 时间毫秒); 在指定的时间毫秒间隔, 不断调用第一个参数传入的函数.
        // 调用方式一 :
        // window.setInterval("changeImageSrc()", 1000);
        // 调用方式二 :
        window.setInterval(changeImageSrc, 1000);
    
    </script>
    

    实现二:

    <script>
    
        // 需求 : 动态获取页面中的 img 标签, 然后修改 img 标签的 src 属性.
        // 1. 获取 img 标签
        var img = document.getElementById("img");
        // alert(img);
    
        // 定义一个变量
        var count = 1;
    
        // 2. 循环切换图片
        // window.setInterval(匿名函数, 时间毫秒); 在指定的时间毫秒间隔, 不断调用第一个参数传入的匿名函数.
        window.setInterval(function() {
            count++;
            img.src = "../img/0"+count+".jpg";
    
            // 判断
            if (count == 8) {
                count = 0;
            }
        }, 1000);
    
    </script>
    

    21、js事件

    21.1、事件概述:

    事件三要素:
    1.	事件源:被监听的html元素(就是这个事件加给谁),就是某个(某些)html标签
    2.	事件类型:某类动作,例如点击事件,移入移除事件,敲击键盘事件等
    3.	执行指令:事件触发后需要执行的代码,一般使用函数进行封装
    语法格式:事件源.事件类型=执行指令
    

    21.2、常用的事件:

    案例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>事件</title>
    
        <script>
            // 窗口 : window 对象提供了一个事件类型  onload 页面加载完成事件.
            // 事件源 : window    事件类型 : 页面加载完成事件 (onload)  执行指令: 就是赋值的 function 函数.
            window.onload = function () {
    
                // 获取页面的 btn 按钮
                var btn = document.getElementById("btn");
                // alert(btn);
    
                // 给 btn 按钮绑定一个事件 (单击事件 onclick)
                // 事件源 : btn按钮    事件类型 : 单击事件 (onclick)  执行指令: 就是赋值的 function 函数.
                btn.onclick = function () {
                    alert("恭喜你, 中了 500 万!");
                }
            }
    
        </script>
    
    </head>
    <body>
        <button id="btn">按钮</button>
    </body>
    </html>
    

    到此基础结束。

     

    ==============《轮播图图片路径问题》================

     

                                                           =================================

                        公众号  关注一波  (一叶知秋博客)不定期分享视频资料

                                                           

     

     

    展开全文
  • JavaScript学习总结(思维导图篇)

    万次阅读 多人点赞 2021-02-18 22:28:51
    javaScript大牛总结篇

    不管是前端开发还是后端开发,js一直担任着重要的角色。需要深刻理解,才能把工作做得更加出色。

    目录

     

    JavaScript BOM对象

     JavaScript Dcoument对象

    JavaScript 事件处理

    JavaScript变量

    JavaScript函数基础

    JavaScript流程控制

    JavaScript数据类型

    JavaScript数组

    JavaScript运算符

    JavaScript正则表达式

    JavaScript字符串函数


    JavaScript BOM对象

     JavaScript Dcoument对象

    JavaScript 事件处理

    JavaScript变量

    JavaScript函数基础

    JavaScript流程控制

    JavaScript数据类型

    JavaScript数组

    JavaScript运算符

    JavaScript正则表达式

    JavaScript字符串函数

    好啦,本期的内容就分享到这里,我们下期见!

     

    11

     

    好书不厌百回读,熟读自知其中意。让学习成为习惯,用知识改变命运,让博客见证成长,用行动证明努力。
    如果我的博客对你有帮助、如果你喜欢我的博客内容,请 “点赞” “评论” “收藏” 一键三连哦!
    听说 👉 点赞 👈 的人运气不会太差,每一天都会元气满满呦!^ _ ^ ❤️ ❤️ ❤️
    码字不易,大家的支持就是我坚持下去的动力。点赞后不要忘了👉 关注 👈我哦!
    更多精彩内容请前往 孙叫兽的博客

    微信公众号【电商程序员】,分享改变自己的项目。


    如果以上内容有任何错误或者不准确的地方,欢迎在下面 👇 留个言。或者你有更好的想法,欢迎一起交流学习~~~

     

    展开全文
  • javascript 学习笔记

    千次阅读 2019-09-20 15:59:40
    javascript 学习笔记 <html> <head> <script> function test() { var a = 0.1; var b = 0.2; //alert(a + b); console.log(a + b); var c = 0.1; var d = 0.7;...

                                              javascript 学习笔记

     

    <html>
    	<head>
    		<script>
    			function test() {
    				var a = 0.1;
    				var b = 0.2;
    				//alert(a + b);
    				console.log(a + b);
    				var c = 0.1;
    				var d = 0.7;
    				//alert(c + d);
    				console.log(c + d);
    				console.log(Number.MAX_VALUE);
    				console.log(Number.MAX_VALUE * 2);
    				console.log(Number.MIN_VALUE);
    				console.log(Number.NEGATIVE_INFINITY);
    				console.log(Number.POSITIVE_INFINITY);
    				console.log(-5 / 0);
    				console.log(NaN / 1)
    				console.log(NaN == NaN)
    				console.log(isNaN(true));
    				console.log(isNaN(NaN));
    				console.log(Number("2fadsd"));
    				console.log(Number(true));
    				console.log(parseInt("2ddfew"));
    				console.log(parseInt("-2"));
    				console.log(parseInt("060", 8));
    				console.log(parseInt("0xf"));
    				console.log("aaaaa\raaaaaaaaaaa");
    				var e = 29;
    				var f = e-- + 2;
    				console.log(f);
    				
    				for (var property in window) {
    					document.write(property);
    					document.write("</br>");
    					//console.log(property);
    				}
    				
    				
    				
    			}
    			
    			function say(name, msg) {
    				return "Hi " + name + " " + msg + "!";
    			}
    			
    			test();
    			
    			var m = say("qianqiann", "baby");
    			console.log(m);
    			
    			function aa() {
    				return arguments[0] + " " + arguments[1];
    			}
    			console.log("---------------[" + typeof aa + "]");
    			
    			console.log(aa("A", "B", "C"));
    			
    			
    			function a(bb, cc) {
    				return "bbb";
    			}
    			function a(aa) {
    				return "aaa";
    			}
    			console.log(a);
    			
    			var _a = new Array();
    			console.log(typeof _a);
    			var _s = "sfnzmbs";
    			console.log(typeof _s);
    			var _b;
    			console.log(typeof _b);
    			var _n = 31;
    			console.log(typeof _n);
    			var _null = null;
    			console.log(typeof _null);
    			var _true = false;
    			console.log(typeof _true);
    			
    			console.log(_a instanceof Array);
    			var _null = new Object();
    			console.log(_null instanceof Object);
    			
    			if (true) {
    				var color = "red";
    			}
    			console.log(color);
    			
    			function testColor() {
    				var _color = "blue";
    			}
    			//console.log(_color);
    			
    		</script>
    	</head>
    	<body>
    	</body>
    </html>

     

    展开全文
  • javascript学习记录

    千次阅读 2016-02-29 10:26:51
    javascript学习记录学习资源慕课网,带交互界面学习,效果不错,强烈推荐。 http://www.imooc.com/course/list?c=javascript w3c,可以用来查看文档。 http://www.w3school.com.cn/b.aspJavaScript是什么...
  • Javascript学习大纲

    千次阅读 2014-09-21 10:00:45
    今天闲逛某JS前端培训网站,发现推出了最新的Javascript学习dagang
  • javascript学习总结

    千次阅读 2014-06-30 17:42:11
    javascript学习总结  牛腩讲解的JavaScript已经讲解完毕,下面我对这段时间的学习进行一下总结。 一、JavaScript简介: (1)基本概念  JavaScript是一种基于对象和事件驱动并具有相对安全的客户端脚本...
  • JavaScript学习书籍推荐(步步为营)

    千次阅读 2020-07-17 09:01:44
    本文只要介绍,JavaScript学习的书籍。 《JavaScript之美》 《JavaScript设计模式》 《JavaScript框架设计(第2版)》 《JavaScript开发框架权威指南》 《JavaScript核心技术开发解密》 《JavaScript函数式...
  • JavaScript学习笔记整理

    千次阅读 多人点赞 2018-12-12 23:57:23
    整理一篇工作中的JavaScript脚本笔记,不定时更新,笔记来自网上资料或者自己经验归纳。ps:都是一些小技巧,只能作为学习参考,要系统性学习还是要多看书
  • JavaScript学习指南笔记

    千次阅读 2016-09-19 11:24:19
    说明:本文档来源于JavaScript学习指南第二版 目录 4 JavaScript数组 2 FIFO队列 2 For循环遍历数组新方法: 3 JavaScript函数参数传递 3 匿名函数 4 JavaScript字面量 4 函数闭包与内存泄漏 5 内存泄漏 5 ...
  • javascript学习路线图

    千次阅读 多人点赞 2016-10-11 14:00:49
    史上最全的javascript学习路线图 JavaSctipt学习路线 完成整个课程大纲需要花上6~8周的时间,将学会完整的JavaScript语言(包括jQuery和一些HTML5)。如果你没有时间在6个星期里完成所有的课程(确实...
  • JavaScript学习笔记

    万次阅读 2019-12-17 14:15:58
    什么是JavaScript? 客户端的解释性脚本语言.与Java之间不存在任何关系; 2.JavaScript的语法结构,声明与引入 <script type="text/javascript">...</script> <script type="text/javascript" ...
  • JavaScript学习路线,JS思维导图,前端学习总结

    千次阅读 多人点赞 2018-08-20 19:20:31
    **JavaScript学习路线,JS思维导图,前端学习总结**
  • JavaScript学习指南

    千次阅读 多人点赞 2018-11-30 17:34:00
    1.1 JavaScript基础概念: JavaScript (ECMAScript) :JavaScript 是脚本语言。JavaScript和ECMAScript通常被人用来表达相同的含义,但是JavaScript并不是这么一点含义,它是由ECMAScript 核心. DOM 文档对象模型. ...
  • JavaScript学习

    千次阅读 2020-04-15 19:26:30
    变量相关 隐式定义的都是全局变量,用...JavaScript没有块范围,只认方法的大括号,其他诸如if for switch等等不受限制 代码示例: <script> function test(o){ var i = 0; if(typeof o == "object"){...
  • JavaScript学习路线

    千次阅读 多人点赞 2018-04-02 14:47:13
    今天回想自己的 深入学习JavaScript过程(基本是看前辈的优秀博客),因为有前辈的指点(这里也非常感激前辈的细心指导),所以学习很高效,就总结出来了1基础相关博客1.1 汤姆大叔前辈的深入理解JavaScript 这里...
  • 为什么要学习JavaScript语法,没有理由,因为工作需要,也为了成为全栈,那现在还是好好努力学习吧! 发展 说实话,JavaScript很好学也很重要,也很容易懂,发展很迅猛,基础语法学会后就是api的各种学习,就更...
  • JavaScript 学习指南

    2018-07-23 11:47:12
    在过去的一年间(2017年),我们对比了近24000篇 JavaScript 文章,并从中...通过这个目录,您可以更轻松地找到去年的最佳 JavaScript 教程,在这里有经验的开发人员会分享他们学习 JavaScript 的课程、见解和遇到的...
  • javascript学习指南——先导片

    千次阅读 2017-11-06 10:47:36
    javascript学习: - 带有src属性的&amp;lt;script&amp;gt;元素不应该在其&amp;lt;script&amp;gt;和&amp;lt;/script&amp;gt;标签之间再包含额外的JavaScript代码,如果包含了嵌入的代码,...
  • JavaScript 学习笔记

    千次阅读 2007-12-06 17:28:00
    JavaScript 学习笔记(一) 彭建军2005-01-17根据网上收集的文章整理 JavaScript简介JavaScript是一种居于 Java 程序语言的脚本语言。JavaScript 语言设计出来是用在居于 web 的网页(包括客户端和服务器端)上的...
  • js总结示意图、javascript总结、javascript 学习线路图

    万次阅读 多人点赞 2015-10-14 16:55:46
    javascript DOM操作javascript windows对象javascript变量javascript函数基础javascript流程控制javascript数据类型javascript数组javascript运算符javascript正则表达式javascript字符串函数
  • HTML5学堂-码匠:JavaScript学习难度要远高于HTML与CSS,其知识杂乱而繁多,如何才能高效率的学习?JS的知识体系应该按照怎样的顺序搭建?今天我们就来一一揭晓。
  • JavaScript学习总结

    千次阅读 热门讨论 2018-12-29 20:07:03
    ①从学习内容来讲,JS的视频还是很多的,视频材料中讲述了JS的起源和基础,以及DOM和BOM还有JQuery。这些东西我都是第一次接触,虽说现在还未能学的很好,不过的确在我的脑子里都留下了印象了。 ②学习方式上,我...
  • JavaScript学习心得

    千次阅读 2017-10-25 10:07:36
    1.注释的代码块在JavaScript之中是不会运行的。注释是一个非常好的方式让你自己以及其他人明白这段代码是怎么运行的。 JavaScript中的注释方式有以下两种: 使用 // 来告诉JavaScript来忽略当前行的代码 // This...
  • javascript学习心得

    万次阅读 2017-04-24 22:18:49
    不论你是想学各种前端框架还是nodejs,都需要深入理解javascript的工作原理以及特性,只有这样才能以不变应万变。最近看了一些js的教学视频与NC的《JS的高级程序设计》这本书,在这里总结一下js的一些特性,以防自己...
  • JavaScript学习书籍推荐

    千次阅读 2018-09-22 13:02:19
    《深入浅出JavaScript》 《JavaScript DOM编程艺术》 《JavaScript DOM高级程序设计》 进阶: 《ppk谈JavaScript》 《精通JavaScript》 《JavaScript高级程序设计》 高级: 《JavaScript语言精粹》 ...
  • JavaScript学习思维导图

    千次阅读 2018-01-27 15:02:50
    JavaScript基本数据类型 JavaScript数组 JavaScript运算符 JavaScript正则表达式 JavaScript字符串函数 window对象 DOM基本操作 JavaScript变量 JavaScript函数基础 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 116,881
精华内容 46,752
关键字:

javascript学习

java 订阅