使用JS&jQuery改善用户体验

第一章  JavaScript基本语法

 

一、运算符

运算符就是完成操作的一系列符号,它有七类:

赋值运算符(=,+=,-=,*=,/=,%=,<<=,>>=,|=,&=)、算术运算符(+,-,*,/,++,--,%)、比较运算符(>,<,<=,>=,==,===,!=,!==)、逻辑运算符(||,&&,!)、条件运算(?:)、位移运算符(|,&,<<,>>,~,^)和字符串运算符(+)。

可能很多人不知道"==="是什么。

在这里,我为大家解释一下,在javascript中,“=="是等同运算符。

 

等同运算符的比较规则:

当两个运算数的类型不同时:将他们转换成相同的类型

1)一个数字与一个字符串,字符串转换成数字之后,进行比较。

2)true转换为1、false转换为0,进行比较。

3)一个对象、数组、函数 与 一个数字或字符串,对象、数组、函数转换为原始类型的值,然后进行比较。(先使用valueOf,如果不行就使用toString)

4)其他类型的组合不星等。

 

想两个运算数类型相同,或转换成相同类型后:

1)2个字符串:同一位置上的字符相等,2个字符串就相同。

2)2个数字:2个数字相同,就相同。如果一个是NaN,或两个都是NaN,则不相同。

3)2个都是true,或者2个都是false,则相同。

4)2个引用的是同一个对象、函数、数组,则他们相等,如果引用的不是同一个对象、函数、数组,则不相同,即使这2个对象、函数、数组可以转换成完全相等的原始值。

5)2个null,或者2个都是未定义的,那么他们相等。

“===”是全同运算符,全同运算符遵循等同运算符的比较规则,但是它不对运算数进行类型转换,当两个运算数的类型不同时,返回false;只有当两个运算数的类型相同的时候,才遵循等同运算符的比较规则进行比较。

例如:null==undefined 会返回真 , 但是null===undefined 就会返回假!

 

二、表达式

运算符和操作数的组合称为表达式,通常分为四类:赋值表达式、算术表达式、布尔表达式和字符串表达式。

 

三、语句

Javascript程序是由若干语句组成的,语句是编写程序的指令。Javascript提供了完整的基本编程语句,它们是:

赋值语句、switch选择语句、while循环语句、for循环语句、for each循环语句、do while循环语句、break循环中止语句、continue循环中断语句、with语句、try...catch语句、

if语句(if..else,if...else if ...)、let语句。

 

四、函数

函数是命名的语句段,这个语句段可以被当作一个整体来引用和执行。使用函数要注意以下几点:

1)函数由关键字function定义(也可由Function构造函数构造)。

2)使用function关键字定义的函数在一个作用域内是可以在任意处调用的(包括定义函数的语句前);而用var关键字定义的必须定义后才能被调用。

3)函数名是调用函数时引用的名称,它对大小写是敏感的,调用函数时不可写错函数名。

4)参数表示传递给函数使用或操作的值,它可以是常量,也可以是变量,也可以是函数,在函数内部可以通过arguments对象(arguments对象是一个伪数组,属性callee引用被调用的函数)访问所有参数。

5)return语句用于返回表达式的值。

6)yield语句扔出一个表达式,并且中断函数执行直到下一次调用next。

 

五、一般的函数都是以下格式:

代码如下:

function myFunction(params){

//执行的语句

}

 

六、函数表达式:

代码如下:

var myFunction=function(params){

//执行的语句

}

 

代码如下:

var myFunction = function(){

//执行的语句

}

 

代码如下:

myFunction();//调用函数

匿名函数,它常作为参数在其他函数间传递

 

代码如下:

window.addEventListener('load',function(){

//执行的语句

},false);

 

七、对象

Javascript的一个重要功能就是面向对象的功能,通过基于对象的程序设计,可以用更直观、模块化和可重复使用的方式进行程序开发。

一组包含数据的属性和对属性中包含数据进行操作的方法,称为对象。比如要设定网页的背景颜色,所针对的对象就是document,所用的属性名是bgcolor,如document.bgcolor="blue",就是表示使背景的颜色为蓝色。

 

八、事件

用户与网页交互时产生的操作,称为事件。事件可以由用户引发,也可能是页面发生改变,甚至还有你看不见的事件(如Ajax的交互进度改变)。绝大部分事件都由用户的动作所引发,如:用户按鼠标的按键,就产生click事件,若鼠标的指针在链接上移动,就产生mouseover事件等等。在Javascript中,事件往往与事件处理程序配套使用。

而对事件的处理,W3C的方法是用addEventListener()函数,它有三个参数:事件,引发的函数,是否使用事件捕捉。为了安全性,建议将第三个参数始终设置为false;

传统的方法就是定义元素的on...事件,它就是W3C的方法中的事件参数前加一个“on”。而IE的事件模型使用attachEvent和dettachEvent对事件进行绑定和删除。javascript中事件还分捕获和冒泡两个阶段,但是传统绑定只支持冒泡事件。

 

九、变量

如 var myVariable = "some value";

变量有它的类型,上例中myVariable的类型为string(字符串)

 

javascript支持的常用类型还有:

object:对象

array:数组

number:数字

boolean:布尔值,只有true和false两个值,是所有类型中占用内存最少的

null:一个空值,唯一的值是null

undefined:没有定义和赋值的变量

实际上javascript的变量是弱变量类型,你赋值给他的是字符串,他就是String .

是数字他就是整形。是true和false他就是boolean型(注意,不能加引号,不然会被当成字符串处理)。

 

十、补充

with关键字用法 --简化代码用:

 开域语句,表示在with语句中的任何表达式的所属对象或者是类都由with后紧跟的变量所代表  

 功能:为一段程序建立默认对象。简化代码<br>   

 <br>格式:  

 <br>with (<对象>){  

 <br>  <语句组>  

 <br>}  

   

 <Script>  

 with (document) {  

     write ("<br><Li>限时抢购物品:");  

     write ("<Li>ViewSonic 17\" 显示器。");  

     write ("<Li>EPSON 打印机。");  

 }  

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

 document.write ("<Li>限时抢购物品:");  

 document.write ("<Li>ViewSonic 17\" 显示器。");  

 document.write ("<Li>EPSON 打印机。");  

 </Script>  

 

逻辑运算优先级

 

 

 

 

第二章  JavaScript函数和事件

 

一、JavaScript 函数语法

函数就是包裹在花括号中的代码块,前面使用了关键词 function:

function functionname() { 这里是要执行的代码 }

当调用该函数时,会执行函数内的代码。

可以在某事件发生时直接调用函数(比如当用户点击按钮时),并且可由 JavaScript 在任何位置进行调用。

提示:JavaScript 对大小写敏感。关键词 function 必须是小写的,并且必须以与函数名称相同的大小写来调用函数。

 

二、调用带参数的函数

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

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

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

myFunction(argument1,argument2)

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

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

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

实例

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

亲自试一试

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

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

实例

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

亲自试一试

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

 

三、带有返回值的函数

有时,我们会希望函数将值返回调用它的地方。

通过使用 return 语句就可以实现。

在使用 return 语句时,函数会停止执行,并返回指定的值。

语法

function myFunction() { var x=5; return x; }

上面的函数会返回值 5。

注释:整个 JavaScript 并不会停止执行,仅仅是函数。JavaScript 将继续执行代码,从调用函数的地方。

函数调用将被返回值取代:

var myVar=myFunction();

myVar 变量的值是 5,也就是函数 "myFunction()" 所返回的值。

即使不把它保存为变量,您也可以使用返回值:

document.getElementById("demo").innerHTML=myFunction();

"demo" 元素的 innerHTML 将成为 5,也就是函数 "myFunction()" 所返回的值。

您可以使返回值基于传递到函数中的参数:

实例

计算两个数字的乘积,并返回结果:

function myFunction(a,b) { return a*b; } document.getElementById("demo").innerHTML=myFunction(4,3);

"demo" 元素的 innerHTML 将是:

12

亲自试一试

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

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

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

 

四、局部 JavaScript 变量

在 JavaScript 函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问它。(该变量的作用域是局部的)。

您可以在不同的函数中使用名称相同的局部变量,因为只有声明过该变量的函数才能识别出该变量。

只要函数运行完毕,本地变量就会被删除。

 

五、全局 JavaScript 变量

在函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它。

 

六、JavaScript 变量的生存期

JavaScript 变量的生命期从它们被声明的时间开始。

局部变量会在函数运行以后被删除。

全局变量会在页面关闭后被删除。

 

七、向未声明的 JavaScript 变量来分配值

如果您把值赋给尚未声明的变量,该变量将被自动作为全局变量声明。

这条语句:

carname="Volvo";

将声明一个全局变量 carname,即使它在函数内执行。

 

八、补充

监听事件

浏览器会根据某些操作触发对应事件,如果我们需要针对某种事件进行处理,则需要监听这个事件。监听事件的方法主要有以下几种:

HTML 内联属性(避免使用)

HTML 元素里面直接填写事件有关属性,属性值为 JavaScript 代码,即可在触发该事件的时候,执行属性值的内容。

例如:

<button onclick="alert('你点击了这个按钮');">点击这个按钮</button>

onclick 属性表示触发 click,属性值的内容(JavaScript 代码)会在单击该 HTML 节点时执行。

显而易见,使用这种方法,JavaScript 代码与 HTML 代码耦合在了一起,不便于维护和开发。所以除非在必须使用的情况(例如统计链接点击数据)下,尽量避免使用这种方法。

 

DOM 属性绑定

也可以直接设置 DOM 属性来指定某个事件对应的处理函数,这个方法比较简单:

element.onclick = function(event){    alert('你点击了这个按钮'); };

上面代码就是监听 element 节点的 click 事件。它比较简单易懂,而且有较好的兼容性。但是也有缺陷,因为直接赋值给对应属性,如果你在后面代码中再次为 element 绑定一个回调函数,会覆盖掉之前回调函数的内容。

虽然也可以用一些方法实现多个绑定,但还是推荐下面的标准事件监听函数。

 

使用事件监听函数

标准的事件监听函数如下:

element.addEventListener(<event-name>, <callback>, <use-capture>);

表示在 element 这个对象上面添加一个事件监听器,当监听到有 <event-name> 事件发生的时候,调用 <callback> 这个回调函数。至于 <use-capture> 这个参数,表示该事件监听是在“捕获”阶段中监听(设置为 true)还是在“冒泡”阶段中监听(设置为 false)。关于捕获和冒泡,我们会在下面讲解。

用标准事件监听函数改写上面的例子:

var btn = document.getElementsByTagName('button'); btn[0].addEventListener('click', function() {    alert('你点击了这个按钮'); }, false);

 

移除事件监听

当我们为某个元素绑定了一个事件,每次触发这个事件的时候,都会执行事件绑定的回调函数。如果我们想解除绑定,需要使用 removeEventListener 方法:

element.removeEventListener(<event-name>, <callback>, <use-capture>);

需要注意的是,绑定事件时的回调函数不能是匿名函数,必须是一个声明的函数,因为解除事件绑定时需要传递这个回调函数的引用,才可以断开绑定。例如:

var fun = function() {    // function logic }; element.addEventListener('click', fun, false); element.removeEventListener('click', fun, false);

 

 

 

posted @ 2018-12-06 15:26 雨落秋垣 阅读(...) 评论(...) 编辑 收藏