如鹏网静态Web开发第三章：Javascript

时间 2019-11-21

标签静态 web 开发第三 javascript 栏目网站开发繁體版

原文原文链接

本章主干知识点：javascript

一、定义js的三种方式：写到html标签中；写到html的script标签中；写到单独的js文件中；html

二、JavaScript中类型的转换java

三、function、匿名functionsql

四、js中字符串常见用法；编程

五、js中的万能集合Array：是数组“['aa','bbb']”、又是字典{name:'rupeng',age":8}json

--------------------------------------------------------------------------------------数组

什么是JavaScript(简称js)？

JavaScript是一种脚本语言。

常见的脚本:cmd,t-sql,vbscript等等都属于脚本语言

Javascript的做用

HTML只是描述网页长相的标记语言，没有计算、判断能力，若是全部计算、判断（好比判断文本框是否为空、判断两次密码是否输入一致）都放到服务器端执行的话网页的话页面会很是慢、用起来也很难用，对服务器的压力也很大，所以要求能在浏览器中执行一些简单的运算、判断。JavaScript就是一种在浏览器端执行的脚本语言。

能够直接嵌入HTML页面，但写成单独的 js文件有利于结构和行为的分离。

跨平台特性，在绝大多数浏览器的支持下，能够在多种平台下运行（如 Windows、 Linux、Mac、Android、iOS等）。

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

JS的开发环境及动态语言

WebStorm,: Ctrl+/ 注释快捷键

Editplus,

Nodpad++,

Dreamweaver MyEclipse,

Visual Studio201*;

JS是很是灵活的动态语言，开发工具中的JS完成功能只是一个辅助、建议。

“.”出来的成员调用可能不能用，

“.”不出来的成员也许也能调用，所以不要由于“点儿不出来”而担忧代码有问题。

编写js时，本身应该清楚当前对象有些什么成员，不能依赖智能提示。

动态语言：在运行时肯定数据类型。

JavaScript基本组成

Dom(文档对象模型)由著名的w3c制定

(封装好的一些函数库在html于xml中都是用dom)

DOM：Document Object Model

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

JavaScript语法及注意事项

大小写敏感 :JavaScript严格区分大小写。(n与N是两个不一样的变量。)

弱类型语言,声明变量用var:var num=10;num=true;能够

字符串能够用单引号:var msg=‘坚持不泄’

每句话后面分号:

虽然若是语句结束后能够不加分号,建议有个好的代码风格,手动加“分号”的好处：1>能够放心的作js压缩（压缩多余空白）2>提升代码可读性.

Js的注释，与C#、Java的相同（//单行注释(推荐)、/* 多行注释 */

不少语法与Java语言或C#语言相似。有Java语言或C#语言编程基础的同窗学习JavaScript语法会很容易上手。

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

JavaScript初级

编写第一个JavaScript程序：个人年龄是18岁

编写第二个JavaScript程序:显示当前时间

网页中的JavaScript代码应该放到<script></script>标签中，<script>标签能够放到<head>、<body>等任意位置，而且一个页面能够有不止一对<script></script>标签。放到<head>中的<script>在body加载以前就已经运行了。写在body中的<script>是随着页面的加载而一个个执行的。

alert()函数是弹出一个消息窗口。new Date()建立一个Date对象， 默认时间是当前时间。

Javascript若是遇到错误， 有错误的<script></script>中的代码不会执行，可是不会影响后面的而其余<script></script>代码和html的显示。（演示）

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

JavaScript导入和错误

外部导入 :

导入外部JavaScript文件：除了能够在页面中声明JavaScript之外，还能够将JavaScript写到单独的js文件中，而后在页面中引入：<script src=“test.js”type=“text/javascript”></script>。

声明到单独的js文件的好处是多页面也能够共享、减少网络流量。

能够将导入外部文件的<script>标签写在文档最后，提升用户体验。

注意：

在<script></script>标签中不要出现’</script>’元素。

错误 :

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

JavaScript的事件

JavaScript中也有“事件”的概念。

案例1:

单击一个按钮显示当前时间。就触发了一个事件

案例2:

单击一个超连接显示当前时间。

超连接为“死链”时，使用#与javascript:void(0);的区别。void(0)没有用的值,不会去任何地方,就没有意义了

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

JavaScript变量声明

变量命名规则:以字母、下划线或$开头，中间能够包括字母、数字、下划线或$。（变量命名中多了一个$）,通常不要用$开头。

JavaScript中便可以使用双引号声明字符串，也可使用单引号声明字符串。主要是为了方便和html集成，避免转义符的麻烦。

JavaScript是动态类型，所以

var i=10;i=‘test’是合法的。

var m,n,x,y=10;是否合法

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

JavaScript数据类型

Boolean（布尔）、 Number（数字）、 String（字符串）、 Undefined（未定义）、 Null（空对象）、 Object（对象类型）、Function

引用类型：对象、数组、函数。

原始数据类型： 数值、布尔值、null 、字符串

值类型的变量不能动态添加成员。

引用类型的对象能够动态添加成员。(演示) new出来的和funcation。

变量是否是对象就看后面有没有new。

undefined与其余值计算获得的结果不是咱们想要的。

一个变量声明了，没有初值那么结果就是 undefined.属于未知状态

一个变量赋值为 null。空对象。表示的是还没有存在的对象.已知状态

typeof能够作什么

Instanceof能够作什么

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

JavaScript中的“==”与“===”

var n1=‘1’,n2=1;

alert(n1==n2);

alert(n1===n2);

上面的结果是什么 ?

var n1=‘1’;

var n2=new Number(1);

alert(n1==n2);

alert(n1===n2);

特殊状况

alert(undefined==null);

alert(undefined===null);

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

JavaScript中判断变量是否可用

JavaScript中判断已声明变量、参数是否初始化(可用)的方法：

假设已有变量x：

if (typeof(x) !=‘undefined’ && x!=null) { alert("可用"); }

if(x) { alert(‘变量可用！’); } else { alert(‘变量不可用！’); } //null、undefined、’’、0都认为是false

当x声明但没有赋值，或x为null，或x为0时，都表示不可用！// if(x),返回false

推荐用最后一种方法。但若是x有可能没有声明，则只能用typeof判断（不然会报错）。

常常会遇到的一个场景：if语句的小括号中直接写一个变量。各类值与Boolean之间的关系。

若是肯定x存在使用：if(x){}

若是不肯定X是否存在使用：if(typeof(x)!='undefined' && x!=null){}

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

JavaScript转义

JavaScript中字符串一样须要转义符。

想在页面输出：

C:\Users\Administrator\Desktop\代码\logo.png如何作?

常见转义符：

\t、\n、\’、\”、\\

if-else、for、while、do-while、switch、continue、break的用法都很是的简单

for循环稍有差别：for(var i=0;i<10;i++){ … }

注：switch判断时，是“全等于”，===

案例 :经过switch判断变量n=10是数字仍是字符串显示给与用户

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

类型转换

parseInt(arg)将指定的字符串，转换成整数 NaN

parseFloat(arg)将指定的字符串，转换成浮点数

Number(arg)把给定的值(任意类型)转换成数字（能够是整数或浮点数）；转换的是整个值，而不是部分值。若是该字符串不能彻底转换为整型，则返回NaN。 （Not a Number）

isNaN(arg)，判断arg是否为一个非数字（NaN）,NaN与NaN也不相等。

String(arg)把给定的值(任意类型)转换成字符串；

Boolean(arg)把给定的值(任意类型)转换成 Boolean 型；

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

函数声明

JavaScript中声明函数的方式：

不须要声明返回值类型、参数类型。 函数定义以function开头。

JavaScript中不像C#和java那样要求全部路径都有返回值 没有返回值就是 undefined。

undefined:没有定义；没有返回值。

无参数无返回值的方法,无参数有返回值的方法,有参数有返回值的方法。（ 演示）

代码演示，结论:JavaScript中没有方法重载。

易错：自定义函数名不要和js内置、dom内置方法重名，好比selectAll、focus等函数名不要用。//不要与系统函数重名。(在单击事件中调用本身定义的focus方法，有问题。与系统的focus()方法重名了)

通常在js中编写大括号都是直接跟在后面。

演示return的例子

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

arguments 对象

代码演示

结论:JavaScript中没有方法重载。

方法中写参数叫命名参数

用户调用计算多个数的和的方法，如何获取方法中有多少个参数?

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

匿名函数

var f1=function(p1,p2){ return p1+p2; };//将函数赋值给一个变量

匿名函数无法调用,只能赋值给一个变量,因为是赋值语句,后面要加分号

(function(p1,p2){alert(p1+p2);})(20,30);

这种匿名函数的用法在jQuery中的很是多。

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

看看执行结果

var x=1;

var y=0;

var z=0;

var add=function (n){n=n+1;return n}

y=add(x);

add=function(n){n=n+3;return n;}

z=add(x);

alert(y+’,’+z);//执行结果？

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

匿名函数测试练习

function aa()

{

alert("aaa");

return function(){alert("bbb");};

}

alert(aa);

alert(aa());

alert(aa()());

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

JavaScript变量的做用域

默认若是直接在script标签中定义变量，则属于“全局做用域范围”(全局执行环境)，即属于window对象。

全局做用域范围的变量直到网页关闭或浏览器关闭时才释放资源

一个页面中的多个<script>标签中的变量能够互相访问。

JS有垃圾回收机制，会定时对可释放资源的变量回收。将变量设置为null则表示能够被回收了。

注意：在函数内部的for或者while或者if等块中声明的变量，做用域范围也是整个函数以内，因此为了不混淆，不如直接在函数内一开始的时候就声明这些变量。var n=10;function ff(){n++;}; ff();alert(n);

变量使用前能够不用var声明，这样的变量会变认为是“全局变量”（不推荐）

结论：JS中没有块级做用域范围。

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

String的经常使用方法

length属性：获取字符串的字符个数。

charAt(index)方法:获取指定索引位置的字符,索引从0开始

indexOf(‘e’,index)方法：获取指定字符串第一次出现的位置。startIndex表示从第几个开始搜索。

split(‘分隔符’,limit);根据分隔符将一个字符串返回为一个数组。limit表示要返回的数组的最大长度（可自定义）。

substr(startIndex,len)从startIndex开始，截取len个字符。

substring(startIndex,stopIndex)从startIndex开始，截取到stopIndex位置,不包括stopIndex所在的字符。

toUpperCase()转换大写、toLowerCase();转换小写

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

Array声明方式

JavaScript中的Array对象就是数组，首先是一个动态数组，并且是一个像C#、Java中“数组、List、HashMap/Dictionary”等的超强综合体。

数组的使用方式：

var names = new Array();//无需初始化长度，动态

names[0] = “乐乐";

names[1] = “老杨老湿";

names[2] = “杜教授";

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

Array对象使用

循环遍历数组（forin循环）

使用forin循环能够遍历对象的全部属性。 forin循环其实遍历的仍是key.

数组的其余几种声明方式 ：

new Array();

new Array( 5 );表示该数组长度是5

new Array(10,20,30);

var arr = [90,true,100];(推荐。)

JS中的Array是数组仍是键值对

字典风格的简化建立方式：

var arr = {“帅”:”shuai”,“哥”:”ge”};//json格式。

Dictionary风格数组的length为0。因此不能用for遍历。

键值对中能够有function,键值对作参数,能够体现一个参数多个值

键值对是能够做为参数进行传递

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

Array小案例

本身定义通用的max方法进行比较-比较器

Array系统中的排序和反转-自

调用系统的sort方法

如鹏网：http://www.rupeng.com浏览器

如鹏网 静态Web开发 第三章：Javascript

如鹏网静态Web开发第三章：Javascript