首页 > 代码库 > 蓝鸥原生JS:js的引入方式及js的基本数据类型

蓝鸥原生JS:js的引入方式及js的基本数据类型

蓝鸥原生JS:js的引入方式及js的基本数据类型


蓝鸥零基础学习HTML5—html+css基础

http://11824614.blog.51cto.com/11814614/1852769


js的引入方式

  在一对 script 标签中引入js代码

  通过这种方式引入,可以把js代码和html代码写在同一个文件中,但是注意:最好把js代码写在body之后,文档的加载顺序是从上到下加载的,先把页面内容渲染出来,再加入用户交互,这样用户体验会大大加强。

  示例代码:

    <html lang="en">

    <head>

        <meta charset="UTF-8" />

        <title>js基础一</title>

    </head>

    <body>

    </body>

    <!--script 最好放在body之后,处理交互事件,等到内容显示之后-->

    <script type="text/javascript">

            //警告框

            alert(‘网络错误!‘);

        </script>

    </html>

  用浏览器打开效果如下:

技术分享

  引入外部js代码

  我们可以把js代码写在一个后缀为.js的文件中,然后把这个js文件引入html文档里

  操作步骤:

  创建一个目录文件夹例如为js,然后再这个文件夹中创建一个一个后缀为.js的一个js文件,例如叫做index.js;

  在script标签中的src中写入js文件的路径。

  示例代码:

    <!doctype html>

    <html lang="en">

    <head>

        <meta charset="UTF-8" />

        <title>js基础一</title>

    </head>

    <body>

    </body>

    <!--script 最好放在body之后,处理交互事件,等到内容显示之后-->

    <!--第二种方式:引入js文件-->

       <script src=http://www.mamicode.com/"js/index.js" type="text/javascript">

       </script>

    </html>

alert语句

  我们注意到上边我们使用到了一个语句:alert(‘网络错误!‘);。这是一个alert语句,用来在浏览器中弹出一个提示框的。

js中的变量

  什么是变量?

  变量首先是一个容器,可以用来存放数据,而且存放在这个容器中的数据可以发生变化。举个例子:我有一个盆子,这个盆子中既可以装沙子、也可以装水,还可以装粮食。这个盆子就可以看做一个变量,里边装的水、沙子、粮食就是存放在变量中的值。

  在生活中,我们使用纸张来记录和保存信息,而在计算机中,我们使用变量来保存信息。变量的概念基本上和初中代数的方程变量是一致的,只是在计算机程序中,变量不仅可以是数字,还可以是任意数据类型。

  如何定义变量?

  使用关键字 var +变量名 + =(赋值号) + 值 + ; 就可以定义一个变量。

  示例代码:定义一个变量:

var a = 12;

  以上代码定义了一个变量 a ,变量里保存的值是数值12 

  变量的命名规则

  变量在JavaScript中就是用一个变量名表示,变量名是大小写英文、数字、$和_的组合,且不能用数字开头。变量名也不能是JavaScript的关键字,如if、while等。声明一个变量用var语句,比如:

var a; // 申明了变量a,此时a的值为undefinedvar $b = 1; // 申明了变量$b,同时给$b赋值,此时$b的值为1var s_007 = ‘007‘; // s_007是一个字符串var Answer = true; // Answer是一个布尔值truevar t = null; // t的值是null

  变量名也可以是中文,但是由于中文的兼容性不好,所以不要使用中文作为变量名。

  变量命名规范:

  类型前缀

  首字母大写

类型

前缀

类型

实例

数组

a

Array

aItems

布尔值

b

Boolean

bItsComplete

浮点数

f

Float

fPrice

函数

fn

Function

fnHandler

整数

i

Integer

iTtemCount

对象

o

Object

oDiv1

正则表达式

re

ReExp

reEmaolCheck

字符串

s

String

sUserName

变体变量

v

Variant

vAnything

 

js的基本数据类型

Number

number是数值类型,在生活中,我们把没有小数位的数称作整数,带有小数位的数称作小数(计算机中叫浮点数),JavaScript不区分整数和浮点数,统一用Number表示,以下都是合法的Number类型:

var a = 123; // 整数123var a = 0.456; // 浮点数0.456var a = 1.2345e3; // 科学计数法表示1.2345x1000,等同于1234.5var a = -99; // 负数NaN; // NaN表示Not a Number,当无法计算结果时用NaN表示Infinity; // Infinity表示无限大,当数值超过了JavaScript的Number所能表示的最大值时,就表示为Infinity

Number类型的数可以进行加、减、乘、除、求余、自增、自减运算

  字符串

  字符串是以单引号‘或双引号"括起来的任意文本,比如‘abc‘,"xyz"等等。请注意,‘‘或""本身只是一种表示方式,不是字符串的一部分,因此,字符串‘abc‘只有a,b,c这3个字符。

  如果‘本身也是一个字符,那就可以用""括起来,比如"I‘m OK"包含的字符是I,‘,m,空格,O,K这6个字符。

  如果字符串内部既包含‘又包含"怎么办?可以用转义字符\来标识,比如:

‘I\‘m \"OK\"!‘;

  表示的字符串内容是:I‘m "OK"!

  转义字符

`表示转义字符,在计算机中,有些特殊的字符被系统赋予了特殊含义,如‘表示括住字符串。但是想输出一个‘怎么办?我们就可以像上边一样使用转移字符`,在特殊字符前添加一个转义字符,计算机就会把这个特殊字符当做普通的字符串来处理。

  布尔值

  在计算机中,我们用真表示条件成立,用假表示条件不成立。真和假就是布尔值(bollean)。

  在js中,我们使用true来表示真,用false来表示假。布尔值只有真和假,没有第三个值。布尔值经常用在条件判断中。

var bo1 = true;//布尔类型 结果true和false

 //typeof()获取变量的数据类型,(在不知道变量类型的情况下,也可以通过ypeof()获取)

 alert(typeof(bo1));

null和undefined

null表示一个“空”的值,它和0以及空字符串‘‘不同,0是一个数值,‘‘表示长度为0的字符串,而null表示“空”。

  在其他语言中,也有类似JavaScript的null的表示,例如Java也用null,Swift用nil,Python用None表示。但是,在JavaScript中,还有一个和null类似的undefined,它表示“未定义”。

JavaScript的设计者希望用null表示一个空的值,而undefined表示值未定义。事实证明,这并没有什么卵用,区分两者的意义不大。大多数情况下,我们都应该用null。undefined仅仅在判断函数参数是否传递的情况下有用。

  拓展 undefined类型

 

 //如果我们不给某个变量设置值,则为undefined类型;var color;

alert(typeof color);

js中的运算符

  算数运算符

+加

-减

*乘

/除

%求余(取模)

  赋值运算符

=赋值

+=加后赋值

-= 减后赋值

*= 乘后赋值

/=除后赋值

%=模后赋值

  关系运算符

>大于

<小于

<=小于等于

>=大于等于

==等于(如果左右两边类型不一致,则隐式转换为一致的类型后再比较)

===等于(如果左右两边类型不一致,则返回false)

!=不等于(如果左右两边类型不一致,则隐式转换为一致的类型后再比较)

!==不等于(不转换类型,直接比较)

  逻辑运算符

&&与

||或

!非

js的逻辑运算符

  逻辑运算产生的结果是一个布尔值,js中有三种逻辑运算符:

&&与

||或

!非

  逻辑与&&

  书写方式:表达式一 && 表达式二。逻辑与表达式为真的条件是:左右两边的表达式同时成立时,整个逻辑与表达式才成立,只要有一个表达式不成立,整个逻辑表达式为假。

  逻辑或||

  书写方式:表达式一 || 表达式二。逻辑或表达式为真的条件是:左右两边的表达式,这要其中一个为真,则整个表达式为真。只有在两边表达式同时为假时,整个表达式才为假。

  逻辑非!

  书写方式为:!表达式。逻辑非是对原有的表达式结果进行取反操作。如原表达式为真,则进行逻辑非操作后,返回的值是假;元表达式为假,进行逻辑非运算后表达式为真。

 

 

 


蓝鸥原生JS:js的引入方式及js的基本数据类型