JavaScript教程--从入门到精通(2)

JavaScript08

JavaScript教程--从入门到精通(2),第1张

JavaScript基本数据结构

JavaScript提供脚本语言的编程与C++非常相似 它只是去掉了C语言中有关指针等容易产生的错误 并提供了功能强大的类库 对于已经具备C++或C语言的人来说 学习JavaScript脚本语言是一件非常轻松愉快的事

一 JavaScript代码的加入

JavaScript的脚本包括在HTML中 它成为HTML文档的一部分 与HTML标识相结合 构成了一个功能强大的Internet网上编程语言 可以直接将JavaScript脚本加入文档

<Script Language = JavaScript >JavaScript语言代码 JavaScript 语言代码</Script>

说明   通过标识<Script></Script>指明JavaScript脚本源代码将放入其间   通过属性Language = JavaScript 说明标识中是使用的何种语言 这里是JavaScript语言 表示在JavaScript中使用的语言

下面是将JavaScript脚本加入Web文档中的例子:l<HTML><Head><Script Language = JavaScript >document Write( 这是赛迪网互动学校 )document close()</Script></Head></HTML>

在浏览器的窗口中调用l 则显示 这是赛迪网互动学校 字串 见图 所示

图 说明: Document write()是文档对象的输出函数 其功能是将括号中的字符或变量值输出到窗口 document close()是将输出关闭 可将<Script></Script>标识放入head></Head>或<Body></Body>之间 将JavaScript标识放置<Head></Head>在头部之间 使之在主页和其余部分代码之前装载 从而可使代码的功能更强大 可以将JavaScript标识放置在<Body></Body>主体之间以实现某些部分动态地创建文档

二 基本数据类型

JavaScript脚本语言同其它语言一样 有它自身的基本数据类型 表达式和算术运算符以及程序的基本框架结构 JavaScript提供了四种基本的数据类型用来处理数字和文字 而变量提供存放信息的地方 表达式则可以完成较复杂的信息处理

基本数据类型

在JavaScript中四种基本的数据类型 数值(整数和实数) 字符串型(用 号或 括起来的字符或数值) 布尔型(使True或False表示)和空值 在JavaScript的基本类型中的数据可以是常量 也可以变量 由于JavaScript采用弱类型的形式 因而一个数据的变量或常量不必首先作声明 而是在使用或赋值时确定其数据的类型的 当然也可以先声明该数据的类型 它是通过在赋值时自动说明其数据类型的

常量  整型常量JavaScript的常量通常又称字面常量 它是不能改变的数据 其整型常量可以使用十六进制 八进制和十进制表示其值  实型常量实型常量是由整数部分加小数部分表示 如 可以使用科学或标准方法表示 E e 等

布尔值

布尔常量只有两种状态 True或False 它主要用来说明或代表一种状态或标志 以说明操作流程 它与C++是不一样的 C++可以用1或0表示其状态 而JavaScript只能用True或False表示其状态

字符型常量

使用单引号( )或双引号( )括起来的一个或几个字符 如 This is a book of JavaScript ewrt 等  空值JavaScript中有一个空值null 表示什么也没有 如试图引用没有定义的变量 则返回一个Null值  特殊字符同C语言一样 JavaScript中同样以有些以反斜杠(/)开头的不可显示的特殊字符 通常称为控制字符   变量

变量的主要作用是存取数据 提供存放信息的容器 对于变量必须明确变量的命名 变量的类型 变量的声明及其变量的作用域  变量的命名JavaScript中的变量命名同其计算机语言非常相似 这里要注意以下两点 A 必须是一个有效的变量 即变量以字母开头 中间可以出现数字如test text 等 除下划线(-)作为连字符外 变量名称不能有空格 (+) (-) ( )或其它符号 B 不能使用JavaScript中的关键字作为变量 在JavaScript中定义了40多个类键字 这些关键是JavaScript内部使用的 不能作为变量的名称 如Var int double true不能作为变量的名称 在对变量命名时 最好把变量的意义与其代表的意思对应起来 以免出现错误

变量的类型

在JavaScript中 变量可以用命令Var作声明:var mytest该例子定义了一个mytest变量 但没有赋予它的值 Var mytest= This is a book 该例子定义了一个mytest变量 同时赋予了它的值 在JavaScript中 变量以可以不作声明 而在使用时再根据数据的类型来确其变量的类型 如 x= y= xy= True cost= 等 其中x整数 y为字符串 xy为布尔型 cost为实型  变量的声明及其作用域JavaScript变量可以在使用前先作声明 并可赋值 通过使用var关键字对变量作声明 对变量作声明的最大好处就是能及时发现代码中的错误 因为JavaScript是采用动态编译的 而动态编译是不易发现代码中的错误 特别是变量命名的方面 对于变量还有一个重要性──那就是变量的作用域 在JavaScript中同样有全局变量和局部变量 全局变量是定义在所有函数体之外 其作用范围是整个函数 而局部变量是定义在函数体之内 只对其该函数是可见的 而对其它函数则是不可见的 三 表达式和运算符

1 表达式

在定义完变量后 就可以对它们进行赋值 改变 计算等一系列操作 这一过程通常又叫称一个叫表达式来完成 可以说它是变量 常量 布尔及运算符的集合 因此表达式可以分为算术表述式 字串表达式 赋值表达式以及布尔表达式等

2 运算符

运算符完成操作的一系列符号 在JavaScript中有算术运算符 如+ * /等 有比较运算符如!= ==等有逻辑布尔运算符如!(取反) | ||有字串运算如+ +=等 在JavaScript主要有双目运算符和单目运算符 其双目运算符由下列组成 操作数1 运算符 操作数2即由两个操作数和一个运算符组成 如 + This + that 等 单目运算符 只需一个操作数 其运算符可在前或后 (1)算术运算符JavaScript中的算术运算符有单目运算符和双目运算符 双目运算符 +(加) (减) *(乘) /(除) %(取模) |(按位或) &(按位与) <<(左移) >>(右移) >>>(右移 零填充) 单目运算符 (取反) ~(取补) ++(递加 ) (递减 ) (2)比较运算符比较运算符它的基本操作过程是 首先对它的操作数进行比较 尔后再返回一个true或False值 有8个比较运算符:<(小于) >(大于) <=(小于等于) >=(大于等于) ==(等于) !=(不等于) (3)布尔逻辑运算符在JavaScript中增加了几个布尔逻辑运算符: !(取反) &=(与之后赋值) &(逻辑与) |=(或之后赋值) |(逻辑或) ^=(异或之后赋值) ^(逻辑异或) ?:(三目操作符) ||(或) ==(等于) |=(不等于) 其中三目操作符主要格式如下 操作数?结果1 结果2若操作数的结果为真 则表述式的结果为结果1 否则为结果2

四 范例 下面是一个跑马灯效果的JavaScript文档

l<><head><script Language= JavaScript >var msg= 这是一个跑马灯效果的JavaScript文档 var interval = var spacelen = var space = var seq= function Scroll() { len = msg lengthwindow status = msg substring( seq+ )seq++if ( seq >= len ) { seq = spacelenwindow setTimeout( Scroll ()interval )}elsewindow setTimeout( Scroll()interval )} function Scroll () { var out= for (i= i<=spacelen/space lengthi++) out += space out = out + msglen=out lengthwindow status=out substring(seq len)seq++if ( seq >= len ) { seq = }window setTimeout( Scroll ()interval )} Scroll()</script><body></body></>

lishixinzhi/Article/program/Java/JSP/201311/19285

通常,我们不会去接触vue底层的东西,又或者我们突发奇想需要自己创造一套框架。可回头看看我们使用最多的,其实还是插件。

插件,你也可以理解为就是一套方法的集合,当我们需要调用它的时候,引入一下就行了。

举个例子,比如说,swiper和elementui。

一般来说,我们每个项目都会安装一大堆的插件。用于处理各种交互效果和逻辑,但是,网上能搜到了插件不一定能解决我们所有的问题。也就是说,我们剩下30%左右的逻辑部分是需要自己处理的,比如说,转化时间,处理字符串等等。

这些东西网上是没有现成插件的,需要我们自己来写。此时,如果你每一个组件里面都去定义方法就显得太low了。

我们需要自己写一个插件,事半功倍!

一般来说,我们自己的js通常会写成下面的两种形式:

第一种,声明多个方法。这个做法也叫函数声明,这样做的好处是,声明到全局,你只要引用了它,在页面任意地方都可以使用。但是同样的缺点也很明显,容易引起全局污染,浪费浏览器资源。而且当我方法多的时候,调用起来很不方便。

第二种,这是我们最长使用的声明方式,函数表达式。目的就是加载了这个js以后,当我需要使用的时候,直接调用str.xxx(),就可以返回我需要的内容了。并且,方法封装在变量内部,不会引起全局污染,也符合模块化的规则。

ok,ok。我们接下来,就要把我们自己的方法定义到vue上去使用。

我首先把js放到了项目文件夹中,然后在main.js中引入。

调用起来是完全没有问题的。

但是,又好像哪里不太对?是的,这样我们仅仅是引入了一个js,并没有把它形成一个js的插件。

我们来看看一个标准的js插件的调用形式:

为什么他这个可以直接从this上面调用???

个人理解他的方法应该是被定义到全局的vue对象上面了,这里的this应该指的就是vue本身!

如果你看过龙哥前面的教程,你应该知道,当我们引入的插件,是一个对象的时候,应该使用:

use方法,可以把一个符合vue标准的对象加载到vue本体上。

首先给我们的main.js下面增加一行。

然后打开我们自己的js文件,按照下面的方式书写:

最后在页面中调用的时候:

到此我们的插件已经跟vue融为一体!其实插件本身还支持更多参数和写法,请各位同学自行研究吧!