zoukankan      html  css  js  c++  java
  • JavaScript教程1

    1、什么是 JavaScript?

      JavaScript 是一门跨平台、面向对象的动态的弱类型的轻量级解释型语言,是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。应用于 HTML 文档能够在网站上提供动态的交互能力,他不同于 Java。简单说就是基于浏览器处理 HTML 文档,实现各种网页特效,响应用户的各种操作,为网页添加动态效果,提升用户操作体验,比如图片滚动播放效果,点击登录按钮弹出对话框,鼠标移入移出动画,表单提交数据验证等。

    2、为什么要学习 JavaScript?

      JavaScript 通常被称为 JS,他发明的目的,就是作为浏览器的内置脚本语言,为网页开发者提供操控浏览器的能力,他可以让网页呈现出各种特殊效果,为用户提供友好的互动体验。随着 Ajax 技术的出现,前端可以在不刷新页面的情况下和后端进行数据交换,更新页面数据,jQuery 等库的盛行让 JS 编写变得异常简单,Bootstrap 框架更让前端的成本无限降低,大大提高了前端开发的效率,JS 在前端领域前景非常广阔。

      随着 Node 的发布,使得 JS 不仅可以运行在前端,还可以运行在服务器上。这对 JS 来说是一次质的突破,Node.js 项目使得 JS 可以用于开发服务器端的大型项目,网站的前后端都用 JS 开发已经称为了现实。

      至此 JS 除了可以被浏览器解析,也可以作为后端语言使用,越来越多的应用程序,将 JS 作为内嵌的脚本语言,可以用来构建移动端 APP,开发 HTML 游戏,可以不依赖于浏览器,构建桌面应用程序。

      可以预期,最终只使用 JS 这一种语言,就可以开发出适应不同平台(包括桌面端,服务器端,手持端)的程序。在 Jeef Atwood 发布的博客中,他提出了著名的“Atwood定律”,即“任何能够用 JavaScript 实现的应用程序,最终都必将用 JavaScript 实现”。

      相比学习其他语言,JS 很容易学习。只要有浏览器,就能运行 JS 程序,只要有文本编辑器,就可以编写 JS 代码。不用安装复杂的 IED(集成开发环境)和编译器。JS 的语法相对简单一些,本身的语法不是特别多,而且语言灵活,完全可以只用简单的命令,完成大部分的操作。

      虽然 JS 的核心语法不难学习,但是要真正学透还不是一件容易的事,JS 其实是很复杂的,随着学习,越能体会到他的强大。JS 要发挥作用,必须与其他组件配合,这些外部组件五花八门,而且数量庞大,涉及到了网络应用的各个方面,比如编辑器组件,QQ 空间提供的关注组件等,要掌握他们并非易事,必须下狠功夫。JS 语言有一些设计缺陷,在一些地方会出现怪异的运行结果,各主流浏览器对于 JS 的支持不尽相同,兼容性是最让人头疼的事情,学习 JS,很大一部分时间都是用来搞清除哪些地方有陷阱。

      尽管如此,JS 的地位还是不可动摇的,2015年公布的世界语言使用排名,JS 排在第七位,较去年又有了提升。Ecma(通过 Ecma-262 制定脚本语言的标准)加快了语言的标准化,使得 JS 功能日益增强,而语法缺陷和怪异之处也得到了弥补,截至今年 JS 最新版本为 ECMAScript 2015,也叫 ES6,增加了许多新特性。所以,JS 还是值得学习的,不仅要掌握,而且要学精,尤其对于 Web 前端开发工程师尤为重要。

    3、JavaScript 组成

      JS 由三部分组成:

      ECMAScript:也叫解释器,充当翻译角色,这是 JS 的核心部分。

      DOM:文档对象模型(Document Object Model)。DOM 赋予了 JS 操作 HTML 的能力,即 document 操作。

      BOM:浏览器对象模型(Browser Object Model)。BOM 赋予了 JS 操作浏览器的能力,即 window 操作。

    4、JavaScript 用法

      HTML 中的脚本必须位于 <script></script> 标签之间。可以在 HTML 文档中放入不限数量的脚本。脚本可位于 HTML 的 <head>或<body> 中,或者同时存在于这两个部分中。通常的做法是把函数放在 <head> 中,或者放在页面底部,这样不会干扰页面的内容。

      也可以把脚本保存在外部文件中,文件扩展名为 .js,外部文件通常包含被多个网页使用的代码。注意:在使用外部脚本时,脚本内不能包含 <script> 标签。

    5、编写 JavaScript 的流程

      首先,也是最重要的,先要搞清楚网页效果的实现原理,要达到什么目的,需要对哪些属性做出修改,以及用户的哪些操作,通过用户的某种操作,一步步的构思 JS 实现的方法。

      然后 HTML+CSS 布局页面。

      接着选择需要修改的属性的名称(id 或 class)。

      再根据用户的操作,选择相应的触发事件。

      最后,在事件中,根据第一步的构思,编写 JS 代码。

    6、JS 命名规范

      命名规范是很有必要的,可增强代码的可读性,一眼就能看懂要表达的意思,规范就是符合规则,使代码有利于后期维护,也能很大程度的提高开发效率。一个正常的网站有很多 JS 代码,如果在编写的过程中,不遵循某种规则,那么写到后面自己都看不懂自己写的什么,这是很麻烦的一件事,所以要在平时的练习过程中,养成良好的编写代码的习惯。

      一般都采用匈牙利命名法或者驼峰命名法。

      匈牙利命名法的原则:变量名=属性+类型+对象描述。他的关键是:以一个或多个小写字母作为前缀,前缀之后是一个或多个首字母大写的单词组合,该单词指明变量的用途。

      驼峰命名法的原则:第一个单词以小写字母开始,之后每一个单词的首字母大写。例如:myFirstName、myLastName,这样的变量名看上去就像驼峰一样此起彼伏,因此得名。驼峰法的关键是:除第一个单词外,其他单词首字母大小,混合使用大小写字母来构成变量名和函数名,还可以使用下划线来形成逻辑断点,这样更能增强代码的可读性。

      使用什么样的命名规范,还要要看个人喜好,或者公司规定。注意:在命名时不能使用保留字和太长不容易记忆的名称,要避免使用两个相似的变量名。下面是一些常用的匈牙利命名法的前缀:

    7、注释很重要

      JS中单行注释用“ // 注释内容” 标识,多行注释使用“  /* 注释内容 */  “标识。注释的作用是提高代码的可读性,不仅自己以后用着方便,也有助于别人阅读和理解你所编写的JS代码,注释中的内容不会在网页中显示。为了方便阅读,注释一般放在需要解释的语句结尾处或者周围。在学习的过程中,我们更要养成书写注释的良好习惯,有利于我们对于代码的理解,或者标记出当时比较模糊的概念,回头再做深入的定向学习,更牢固的掌握该知识点。

    8、JS 语句和符号

      JS 语句是发送给浏览器的命令。这些命令的作用是告诉浏览器要做的事情。JS 的执行规则是自上往下以行为单位的,一般情况下,每一行就是一个语句。比如:var a = 1+2;  这条语句先用 var 关键词,声明了变量 a,再将 1+2 的运算结果赋值给变量 a。这里需要注意 = 符号,在 JS 中并不是等号的意思,而是赋值。再比如:alert('hello');  这是一条 JS 语句,一行的结束被认定为语句的结束,通常在结尾加上一个 ; 来表示语句的结束,如果有多行 JS 语句,每句结束都有 ;,则按顺序执行语句。注意:JS 中的代码和符号都必须在英文状态下输入,虽然 ; 也可以不写,但难免会遇到一些错误,浏览器会判定前一句和后一句是可以连在一起解释的,这样就导致了一些意想不到的错误。我们要养成良好的编程习惯,记得在必须加分号的地方一定不要忘记加上。

      JS 对大小敏感,在编写JS代码时,需要留意是否关闭了大小写切换键。

    9、JS 判断语句和 for 循环

      if 判断语句和 for 循环在 JS 中使用非常频繁。

      通常在写代码时,总是需要为不同的决定来执行不同的动作,在代码中就可以使用 if 条件语句来完成该任务。

      在 JS 中,可以使用以下条件语句:

      (1)、if 语句:只有当指定条件为 true 时,也就是条件成立时执行的代码。

      (2)、if... else 语句:当条件成立时执行 if 后代码,条件不成立(为 false )时执行 else 后的代码。

      (3)、if... else if.... else 语句:使用该语句根据判断条件来选择多个代码块之一来执行。

      实例:根据不同的时间,提示不同的问候,当时间小于12点,问候早上好,当时间大于或等于12点小于18点,问候下午好,否则都问候晚上好。

    <script>
    var d = new Date();
    var time = d.getHours();
    if (time < 12){
        alert('早上好');
    }
    else if (time >= 12 && time < 18){
        alert('下午好');
    }
    else{
        alert('晚上好');
    }
    </script>

     如果希望一遍又一遍的运行相同的代码,并且每次的值都不同,那么使用循环是很方便的,当有一组元素的时候,就可以使用 for 循环为这一组元素添加事件。

      for循环的语法:

    for (语句 1; 语句 2; 语句 3){
      被执行的代码块
    }
    
    语句1用于初始化循环中所有的变量。通常为:var i=0;
    语句2用于设置初始变量的条件。通常为:i<object.length;
    语句3用于增加初始变量的值。通常为:i++ 也可以为:i--

    实例:循环遍历数组中的数据,依次输出:

    //在不使用循环时,我们可以这样输出数组中的值:
    var cars=["路虎","宝马","奔驰","奥迪","别克","大众"];
    document.write(cars[0] + "<br>"); 
    document.write(cars[1] + "<br>"); 
    document.write(cars[2] + "<br>"); 
    document.write(cars[3] + "<br>"); 
    document.write(cars[4] + "<br>"); 
    document.write(cars[5] + "<br>");
    
    //使用for循环可以很简洁的完成输出:
    for (var i=0, i<cars.length; i++){
        document.write(cars[i] + "<br>");
    }

    document.write() 可用于直接向 HTML 输出流写内容,可以在平时做练习时用于向页面输出内容测试代码,这里需要注意 document.write() 一定要向文档输出写内容,如果文档已经加载完成后,再来执行该语句,则整个页面将会被覆盖。如果 document.write() 放在事件中,则会先清空页面上所有的内容,然后再写入内容。

    JS 一些基本概念

      (1)、标识符:标识符是 JS 中定义的符号,可以由任意顺序的大小写字母、数字、下划线、和美元符号( $ )组成。标识符就是识别一个具体对象的名称,最常见的标识符就是变量名和函数名,JS对大小写敏感,所以 a 和 A 是两个不同的标识符。标识符不能以数字开头,也不能是JS中的保留关键字,具体可百度参考资料。另外还有三个虽然不是保留字,但是因为他们具有特别的含义,也不能用作标识符:Infinity、NaN、undefined。

      (2)、代码块:代码块其实不难理解,先来解释以下 JS 代码,JS 代码就是 JS 语句的序列,浏览器依据编写 JS 语句的顺序依次逐行的执行每个语句,而代码块则是 JS 语句的组合,并且包含在花括号内,代码块的作用是告诉浏览器这些代码一起执行语句序列。JS 函数就是将语句组合在块中的典型例子。

      (3)、变量:从字面上来理解,变量就是可以改变的量,但是从编程角度讲,变量是用于存储某种/某些数值信息的“容器”,简单说就是对“值”的引用,使用变量等同于引用一个值,每一个变量都有一个变量名。比如:var x = 1; 先声明一个变量 x,x 就是变量名,然后用 = 赋值,也就是将 1 赋值给 x,以后,在引用 x 的时候,就会得到值 1。在 JS 中创建一个变量通常被称为“声明”一个变量,var 就是用来声明变量的。变量在声明之后是空的,他的值为undefined(未定义),需要给他赋值后使用,= 就是建立这种引用关系。上面的代码可以看作为:var x;x=1;这样写是先声明一个变量,再给其赋值,上面的代码则在声明的同时就进行了赋值。在一条语句中,可以声明多个变量,并使用逗号隔开。注意:在给变量命名的时候不能使用 JS 关键词和 JS 保留词。

      (4)、常量:有变量就会有常量,变量可以理解为变化的量,而常量就是不变的量。其实在 JS 中并没有常量这个概念,所谓的常量,只不过是提前赋值的变量而已。常量和变量都属于变量,只不过常量是赋过值后就不能再改变的变量,而普通的变量可以再次进行赋值操作。为了与变量有所区分,增强代码的可读性,所以在声明一个常量时,一般采用常量名全部大写,若有多个单词,可用下划线隔开。

      (5)、变量的作用域:变量分为:全局变量和局部变量。全局变量简单说就是在函数外声明的变量,任何地方都可以使用,而局部变量就是在函数内部声明的变量,只能在声明他的函数内部使用。这就是变量的作用域,通俗理解就是他的作用范围。JS 变量的生命期从他们被声明的时候开始,全局变量会在页面被关闭之后删除,局部变量则在函数被运行以后删除。

      (6)、表达式:表达式与数学中的定义相似,是指具有一定的值、用运算符把常量和变量连接起来的代数计算式,一个表达式可以包含常量或变量。比如:var a=a+1;  a 是变量名称,a+1 就是表达式。在生活中”再见“表达方式有很多种,比如:英语(goodbey),网络语(886),肢体语言(摆摆手)等。JS 中的表达式无处不在,可以表达以下几种内容:字符串的连接,被称为串表达式,var str = "I" + "love" + "you";  还有这种形式:var str = "hello"; var str1 = str + "World";  串表达式值为字符串。数值表达式,var num = 10 + 2.5;  也有如下形式:var num = 10 + 2.5; var num1 = num + 10 * 2.5;  数值表达式值为数值。还是有一种是布尔表达式,var num = 2; alert(num == 2); 返回 ture,alert(num > 10); 返回 false。布尔表达式值为 true 或 false。

      (7)、函数:一看到函数,很多人可能就头疼,但是编程中函数还是很好理解的,是由事件驱动的或者当它被调用时执行的可重复使用的代码块。简单说就是完成某个特定功能的一组语句,使用function关键字定义包裹在花括号中的代码块,便于反复调用。其基本形式为:function moveStart(){代码} 。声明一个函数只是在告诉浏览器这有一个函数,不会被实际执行,而在函数调用的时候,才真正执行函数内的代码。moveStart 就是函数名,遵循 JS 命名规范,在函数调用的时候使用:moveStart()。若将函数定义在变量后,变量则可作为函数使用。函数存储在变量中,不需要函数名,可以通过变量名调用。我们把没有名称的函数称为匿名函数。函数返回值,函数执行的结果就是函数返回值,return 可以将函数内的结果返回到函数外调用,在使用 return 语句时,函数会停止执行,并返回指定的值,再从调用的地方开始执行,函数调用会被返回值取代,同样一个函数应该只返回一种类型的值,在仅仅是希望退出函数时,也可以使用 return,返回值是可选的,比如下面的代码:如果 a 大于 b,则退出函数,并不会计算 a 和 b 的和。

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

    (8)、函数传参:在调用函数时,可以向其传递值,这些值被称为参数,这些参数可以在函数中使用,可以传递任意多的参数,并由逗号分割,比如:function myFunction(x, y){return x * y;} ,在调用的时候传入值:myFunction(3 ,4),则返回 x乘y 的运算结果。简单理解,参数就是一个占位符,即先把位置占住,后面再用。传递的值必须与参数以一致的顺序出现,第一个值就是第一个被传递的参数给定的值,依次类推。函数很灵活,可以传递不同的值,来调用该函数。函数参数可分为:显式参数和隐藏参数( arguments )。函数的显式传参,也叫固定参,就是在函数被声明定义的时候列出的参数。隐藏参数也叫可变参,或者不定参,arguments 对象是 JS 内置的对象,对象包含了函数调用的参数数组,通过这一点可以很方便的找到最后一个参数的值,或者计算所有参数的和。当函数里有一部分定不下来的时候可以用函数传参,举一个简单的例子:点击按钮改变 DIV 的样式:

     1 <style>
     2 #div1{
     3     200px;
     4     height:200px;
     5     background:red;
     6 }
     7 </style>
     8 <body>
     9 <div id="div1"></div>
    10 <input type="button" value="变宽" onclick="setWid('width','400px')" />
    11 <input type="button" value="变高" onclick="setWid('height','400px')" />
    12 <input type="button" value="变绿" onclick="setWid('background','green')" />
    13 <script>
    14 function setWid(name, value){    //函数传参
    15     var x = document.getElementById('div1');
    16     x.style[name] = value;
    17 }
    18 </script>
    19 </body>
     1 //参数求和:
     2 <script>
     3 function sumArr() {
     4     var result = 0;
     5     for(var i = 0; i < arguments.length; i++) {
     6         result += arguments[i];
     7     }
     8     return result;
     9 } 
    10 alert(sumArr(3,5,2,12,8,51,99));    //和为:180
    11 </script>

    (9)、对象:在现实生活中,一个人可以被视为一个对象,对象有他的属性,比如性别、身高、年龄,籍贯等,方法有:走、跑、跳等。所有的人都有这些属性,但是每个人的属性又不尽相同,所有的人都有这些方法,但是他们执行的时间都不尽相同。在 JS 中,对象就是拥有属性和方法的数据,JS 中的所有事物都是对象:字符串、日期、数组、数字等等。可以说在 JS 中一切皆对象,属性是与对象相关的值,方法是能够在对象上执行的动作。简单说对象只是带有属性和方法的特殊数据类型。在 JS 中对象是数据(变量),拥有属性和方法,当在声明一个变量时,var txt = "你好"; 实际上已经创建了一个字符串对象,该对象拥有 length 属性,字符串对象同时拥有很多个内置的方法,比如:charAt() 可获取某个字符,返回字符串的某一位的字符。可以说 JS 对象是变量的容器,但是,通常认为 JS对象是键值对的容器,键值对的写法为:name:value,键与值以冒号分隔,键值对又常被称为对象属性,所以 JS 对象就是属性变量的容器。JS支持自定义对象,可以通过 new 关键字创建。

    6、JS 数据类型

      JS 数据类型可分为基本数据类型和复合数据类型两种,其中基本数据类型有五种:字符串(String)、数字(Number)、布尔(Boolean)、空(Null)、未定义(Undefined)。复合数据类型即 Object,Object 本质是一组无序的名值对组成的,严格来说,又被分为三类:对象(Object)、数组(Array)、函数(function)。

      (1)、字符串:字符串是存储字符的变量。比如:var a='小明';,字符串可以是引号中的任意文本,可以使用单引号或者双引号。

      (2)、数字:数字就是用来存储数字的变量。可以为整数也可以是小数。比如:var a1=314; var a2=3.14;。

      (3)、布尔:布尔值是 "ture" 真和 "false" 假两个特定值,布尔常用在条件测试中。

        什么是真 ture:非零数字、非空字符串、非空对象

        什么是假 false:数字零、空字符串、空对象(null)、undefined  

      (4)、Null:null 是一个只有一个值的特殊类型,表示一个空对象引用,可以用来清空变量。

      (5)、Undefined:表示为定义,有两种情况:1:真的没有定义。2、虽然定义了,但是没有赋值。

      (6)、Object:对象由大括号包含。在括号内部,对象的属性以名称和值对的形式{name : value}来定义。属性由逗号分隔,包括了除数字、字符串和布尔值以外的所有类型。比如:var person = {name:"小明", sex:"男", id:5566};,此例子中的对象(person)有三个属性:name, sex,id。

      (7)、Array:使用单独的变量名来存储一系列的值。创建一个数组的方法:var arr = new Array();,之后可以给数组添加值:arr[0] = 1; arr[1] = 2; arr[2] = 3;,数组的下标是基于零的,所以从 0 开始算起。在 JS 中,很多时候,要避免使用 new 关键字,所以将数组创建为:var arr = [1,2,3] 的形式。

      (8)、function:函数其实是处理数据的方法,JS 将函数视为一种数据类型,可以像其他数据类型一样,进行赋值和传递,这就为编程带来了很大的灵活性。

      变量的类型:变量本身是没有类型的,取决于他里边存储的什么数据类型,存的什么类型就是什么类型的变量。当声明新变量时,可以使用 new 来声明其类型,比如:var userName = new String;  var x = new Number;  var y = new Boolean;  var cars = new Array;  var person = new Object; 。JS 变量均为对象,当声明一个变量时,就创建了一个新的对象。

      typeof运算符:typeof 操作符用来检测变量的数据类型,返回一个字符串。字符串、数字、布尔值分别返回 string、number、boolean。用 typeof 检测 null 返回 object,在 JS 中 null 表示什么都没有,但是他是一个对象。undefined 是没有赋值的变量,所以 typeof 一个没有值的变量会返回 undefined。typeof 一个对象则返回 object。JS 中数组是一种特殊类型的对象,所以也返回 object。函数则返回 function。

      undefined 和 null 的区别:typeof undefined,返回 undefined。typeof null,返回 object。(null === undefined),返回 false,(null == undefined),返回true。

    7、JS 运算符

      (1)、算数运算符:

      除了平时常见的加减乘数之外,JS 中还有一些其他的运算符:

      取模运算符:%,取模通俗理解就是取余数,比如:5%2,值为1,5除2,商2余1。

      自增运算符:++,自增运算分为两种情况,一种是先赋值再运算,一种是先运算再赋值。实例:假设 a = 2

        先赋值再运算:var b = a++; 运算结果为:b=2,a=3 解析:b = a,a = a+1。

        先运算再赋值:var b = ++a;运算结果为:b=3,a=3 解析:a = a+1,b = a。

      通过上面的例子,可以看到,先赋值再运算,实质是先把 a 赋值给 b,然后自己再加 1。先运算再赋值,实质是先自己加 1,再把值赋给 b。

      他们的相同点都是自增1,a = a+1,都被作为一个整体表达式运算,即 (a++)(++a),虽然他们的值都自增 1,但是 (a++) 取 a 自增前的值,而 (++a) 取 a 自增后的值。

      自减运算符:--,自减运算符和自增运算符一样,即每次自减1。也分为两种情况:实例:假设a=2

        先赋值再运算:var b=a--; 运算结果为:b=2,a=1 解析:b=a,a=a-1。

        先运算再赋值:var b=--a;运算结果为:a=1,b=1 解析:a=a-1,b=a。

        + 运算符可用于字符串变量的连接,若需要把多个字符串连接起来,就可以使用 + 运算符。

        如果把字符串和数字相加,则得到一个字符串。比如:var str='hello'+2; 返回:hello2

      (2)、赋值运算符:

      赋值运算符用于给变量赋值。有以下几种:= += -= *= /= %=

        实例:假设 a=10 b=5

        =:a = b 结果:5

        +=:a += b,相当于:a = a+b 结果:15

        -=:a -= b,相当于:a = a-b 结果:5

        *=:a *= b,相当于:a = a*b 结果:50

        /=:a /= b,相当于:a = a/b 结果:2

        %=:a % b,相当于:a = a/b 结果:0 (取模运算是取余数)

      (3)、比较运算符:

      比较运算符在条件语句中使用,用于判断变量或值的关系,返回 ture 或 false。

      比较运算符有以下几种:== === != !== > < >= <=

        实例:假设 a=2

        ==:等于。注意双等号在JS中才表示等于,一个等号为赋值。比较:a == 2,返回 ture。a == 1,返回false。

        ===:绝对等于,值和类型均相等。比较:a === '2',返回 false。a === 2,返回 true。

        !=:不等于。和等于相反。比较:a != 2,返回 false,a != 1,返回 ture。

        !==:绝对不等于,和绝对等于相反,值和类型均不相等。比较:a !== '2',返回 ture,a !== 2,返回 false。

        >:大于。比较:a>5,返回false。

        <:小于。比较:a<5,返回ture。

        >=:大于等于。比较:a>=5,返回false。

        <=:小于等于。比较:a<=5,返回ture。

      (4)、逻辑运算符:

      逻辑运算符用于描述变量或值之间的逻辑关系。

      逻辑运算符有以下几种:&& || !

       &&:并且。在数学中我们将 b 大于 a、b 又小于 c 表示为:a<b<c,但是在 JS 中要用 && 表示:b>a && b<c。两个条件必须同时满足,则返回 ture,有一个条件不满足,则返回 false。实例:判断一个数字是否为两位数:a>9 && a<100,假设 a=50,则返回:ture。

       ||:或。当两个条件中,有任一个条件满足,逻辑或的运算结果就为真。实例:a=5,b=10,判断c=a<b || a==b,c的值为:ture。

       !:否。也叫逻辑非操作符,是非颠倒,好比小明买了一本 JS 书籍,小白说:是乌龟书;小红说:是犀牛书。小明说:小白说的不是真话,小红说的不是假话。那么是小红说对了,小明买的书是犀牛书。实例:a=10 b=5,判断c =! (a>b),c 的值为:false。

      (5)、三元运算符:

      三元运算符也叫条件运算符,其基本形式可用 if 判断语句表示,用三元运算符表示为: ? :。

      所谓三元运算符,顾名思义就是需要进行三次操作,语法为:条件?结果1:结果2 。条件写在问号之前,后面跟着用冒号分隔的结果1和结果2,当满足条件时为结果1,否则就是结果2。好比你去看演唱会,条件就是需要入场券,若你带了就可以直接进去,如果没带那就请回吧,用三元运算符可表示为:带没带入场券 ? 带了直接进去 : 没带那就请回吧。

      所有使用 if 判断语句的地方,都可以使用三元运算符,使用 if 判断语句代码比较繁琐,使用三元运算符,代码则十分简洁,但是对于初学者来说,三元运算符不是那么直观,使用 if 判断语句更容易理解,随着学习的不断深入,以及理解的加深,就可以使用三元运算符代替 if 了。

        实例:判断一个数为偶数还是奇数。假设:a=12

        先用 if 判断语句表示:

    var a = 12;
    if(a%2 == 0){
        alert('a为偶数');
    }
    else{
        alert('a为奇数');
    }

    用三元运算符可表示为:

    var a = 12;
    a%2===0 ? alert('偶数') : alert('奇数');

    (6)、运算符之间的优先级:

      从高到低依次为:算术操作符 → 比较操作符 → 逻辑操作符 → "="赋值符号

      同级的运算是按从左到右依次进行运算,若有括号,从多层括号由里向外进行运算。

        实例:

    var numA = 2;
    var numB = 5;
    
    var numC = numA + 40 > 10 && numB * 2 < 20;
    var numD =( ( numA + 40 )  /  ( 12 - numB ) ) * 10;
    
    alert(numC);    //返回:true
    alert(numD);    //返回:60

    8、JS 事件

      HTML 事件是发生在 HTML 元素上的事情。当在 HTML 页面中使用 JS 时,JS 可以触发这些事件。事件可以是浏览器行为,也可以是用户操作行为,用户操作行为可分为鼠标操作和键盘操作。比如:在页面加载完成时触发事件,这属于浏览器行为,用户的操作行为如点击按钮触发事件,鼠标的移入移出,按键提交信息等。

      下面是一些常用的事件列表:

    9、JS 常用的互动方法

      在 JS 中可以创建三种类型的消息框:警告框、确认框、提示框

      (1)、警告框

      警告框常用于确保用户可以得到某些信息,平时我们在访问网页的时候,有时突然弹出一个小窗口,上面写这一些提示文字,这就是警告框,在警告框出现之后,用户必须点击确定按钮后才能继续操作,否则就不能对网页做出任何操作。这样的弹出窗口是用”alert“实现的。

      语法:alert(str或var);

      (2)、确认框

      确认框常用于验证用户是否接受操作,允许用户做出选择,当确认框弹出时,用户可以点击”确定“或者”取消“来确定用户操作,当用户点击确定时,返回值为 ture,如果点击取消,则返回值为 false。用户在点击对话框之前不能进行任何操作。这样的弹出窗口是用”confirm“实现的。

      语法:confirm(str);

      (3)、提示框

      提示框也叫提问框,用于提示用户在进入页面前输入某个值,主要是询问一些需要与用户交互的信息,提示框包含一个确定、取消按钮,和一个文本框,当提示框弹出后,用户需要输入某个值,然后点击确定或者取消才能继续操作,当用户点击确认时,返回值为文本框输入的值,如果用户点击取消,则返回值为null。提示框可以和确认框相互配合使用。这样的弹出窗口是用”prompt“实现的。

      语法:prompt(str1, str2);

      str1 为要显示在对话框的值,也就是与用户交互的内容描述,不可修改。str2 为文本框中提示用户输入的默认内容,可以修改。

      一般情况下,在实际的网站中,这些对话框都很少或者说几乎不使用,尤其是警告框,因为用户会反感这种突然弹出来的东西,在弹出对话框后用户不点击按钮之前,浏览器就跟死了一样,不能做任何操作,确认框和提示框相对来说还有一些使用,也是比较有意义的,比如页面中一个跳转按钮,如果不使用确认对话框,则直接跳转到新页面,使用确认对话框之后,用户可以点击确认或者取消来执行对应操作,确认则跳转新页面,取消则继续浏览,有时候这个跳转按钮或者链接是用户不小心点到的,并不希望跳转。大部分网站中,都使用的是一套自定义的对话框,更友好的显示。

    10、JS 转义字符

      在 JS 中字符串通常用单引号或双引号包含起来,比如:var txt = "谁看到"小明"今天来上课了吗?"; 所以这个例子会解析错误,从 "谁看到" 被截断,浏览器报错提示:语法错误,而且这是很严重的错误,错误到代码将被终止,后面的代码无法执行。其实这个例子还是很好解决的,我们可以将其用单引号括起来,再给小明加上双引号,OK,跟原来要表达的一样,但是如果我们需要换行呢?这时候就需要用到转义字符,转义字符在 JS 中应用十分广泛,尤其是在正则表达式 (RegExp) 中,因此上面的代码应该写为: var txt = "谁看到 "小明 "今天来上课了吗?";  需要换行则写为:var txt = "谁看到 "小明 " 今天来上课了吗?"; 。

      反斜杠()是一个转义字符,转义字符可用于将特殊字符转换为字符串字符,可以用于转义撇号、引号、换行等其他特殊字符,在编写代码时需要注意特殊字符问题,很多运行时出现的问题都是因为特殊字符而引起的,由于反斜杠本身被用作转义符,因此不能在代码中只键入一个 ,如果需要显示一个反斜杠,必须一次键入两个 \ 。下面是一些常用的转义字符:

  • 相关阅读:
    操作系统进程调度策略
    runnable & callable
    leetcode 124 二叉树中的最大路径和
    leetcode 24 两两交换链表中的节点
    leetcode 93 复原IP地址
    C++ 11 move
    leetcode 64 最小路径和
    leetcode 1143 最长公共子序列
    leetcode 528 按权重随机选择
    数据挖掘面试题(1)
  • 原文地址:https://www.cnblogs.com/wu-chao/p/8207258.html
Copyright © 2011-2022 走看看