谷哥的小弟学前端(10)——JavaScript基础知识（1）

探索Android软键盘的疑难杂症
 深入探讨Android异步精髓Handler
具体解释Android主流框架不可或缺的基石
 站在源代码的肩膀上全解Scroller工作机制

Android多分辨率适配框架（1）— 核心基础
 Android多分辨率适配框架（2）— 原理剖析
 Android多分辨率适配框架（3）— 使用指南

版权声明

本文原创作者：谷哥的小弟
作者博客地址：http://blog.csdn.net/lfdfhl

JavaScript简单介绍

初识JavaScript

JavaScript是一种网页编程技术，其功能强大，实现简单方便，入门简单，即使是程序设计新手也能够高速地使用JavaScript进行简单的编程。
JavaScript是一种基于对象和事件驱动。并具有安全性能的脚本语言。脚本语言简单理解就是在client的浏览器就能够互动响应处理程序的语言。而不须要server的处理和响应，当然JavaScript也能够做到与server的交互响应
JavaScript能够被嵌入到HTML文件里，不须要经过Webserver就能够对用户操作作出响应，使网页更好地与用户交互。降低用户等待时间。提升用户体验
概括地讲：JavaScript是一门执行在浏览器的脚本编程语言

JavaScript的组成

ECMAScript：JavaScript的语法标准
DOM：JavaScript操作网页上元素的API
BOM：JavaScript操作浏览器的部分功能的API

JavaScript的特点

简单易用
可使用文本编辑工具编写。仅仅需浏览器就可执行程序
解释执行
程序执行前不编译。而是在程序的执行过程中逐行进行解释
基于对象
不仅能够创建对象,也能使用现有的对象
跨平台特性
支持绝大多数浏览器。可在多平台下执行(如Windows、Linux、Mac、Android、iOS)

JavaScript的书写位置

JavaScript有两种常见的写法，分别介绍例如以下

第一种：内嵌式写法

<!DOCTYPE html>
<!-- 本文作者：谷哥的小弟 -->
<!-- 博客地址：http://blog.csdn.net/lfdfhl -->
<html lang="en">

    <head>
      <meta charset="utf-8">
      <title>JS的写法</title>
      <script type="text/javascript">
         //此处为JS代码
      </script>  
    </head>

    <body>

    </body>

</html>

将<script></script>置于<head></head>中
在<script></script>标签内写JavaScript的相关代码
请以分号”;”结束每一行JavaScript代码
推荐将<script></script>置于<html></html>之后

另外一种：外链式写法

<!DOCTYPE html>
<!-- 本文作者：谷哥的小弟 -->
<!-- 博客地址：http://blog.csdn.net/lfdfhl -->
<html lang="en">

    <head>
      <meta charset="utf-8">
        <title>JS的写法</title>
      <script type="text/javascript" src="test.js">
      </script>  
    </head>

    <body>

    </body>

</html>

将JavaScript相关代码写在.js文件里
请以分号”;”结束每一行JavaScript代码
利用<script></script>的src属性链接.js文件
为提高浏览器的解析效率，尽量将多个js文件合并成一个js

JavaScript之Hello World

嗯哼，我们来体验一把JavaScript

利用alert( )弹出信息

<!DOCTYPE html>
<!-- 本文作者：谷哥的小弟 -->
<!-- 博客地址：http://blog.csdn.net/lfdfhl -->
<html lang="en">

    <head>
      <meta charset="utf-8">
        <title>Hello World</title>
    </head>

    <body>

    </body>

</html>

<script type="text/javascript">
   alert("Hello World");
</script>

执行后，效果例如以下图所看到的：

这里写图片描写叙述

在此。利用alert( )在网页中弹出提示消息。

利用confirm( )显示确认对话框

confirm("您真的要关闭此网页么？");

执行后。效果例如以下图所看到的：

这里写图片描写叙述

在此，利用confirm( )显示一个带有指定消息和确定及取消button的对话框。

利用prompt( )接收用户输入

prompt("请输入您的会员卡号");

执行后，效果例如以下图所看到的：

这里写图片描写叙述

在此。利用prompt( )接收用户的输入信息。

利用console.log( )输出日志

console.log("This is log message");

执行后，效果例如以下图所看到的：

这里写图片描写叙述

在此，利用console.log( )输出日志进行代码的调试

利用document.write( )向输出流写信息

document.write("大家好<br>我是谷哥的小弟");

执行后。效果例如以下图所看到的：

这里写图片描写叙述

在此，利用document.write( )向输出流写信息。输出信息能够是纯文本也可包括HTML标签

JavaScript的变量

变量的定义

通过var关键字定义声明变量。比方:

var name;

在此定义。一个变量叫name

变量的赋值

通过”=”为变量赋值，比方：

var name;
name=”谷哥的小弟”

当然。也能够在定义变量的同一时候为其赋值，比方：

var name=”谷哥的小弟”;

变量的命名规范

变量名中不能含有空格
请注意JavaScript严格区分字母大写和小写。所以var A和var a是不同的变量
请勿使用纯数字或者以数字开头定义变量
不建议使用汉字定义变量
请勿使用纯特殊字符定义变量
请勿使用特殊字符开头(“_”除外)定义变量
请勿使用关键字定义变量。比方var、try、void 等
不建议使用保留字定义变量；比方byte、char、import等

JavaScript的数据类型

JavaScript的数据类型能够分为简单数据类型和复杂数据类型这两大类。
在实际开发中可使用typeof(var)推断变量的数据类型。

简单数据类型
- number 数字类型
- string 字符串类型
- boolean 布尔类型
- undefined 变量未初始化
复杂数据类型
- Array 数组
- Object 对象

如今，对以上数据类型具体介绍例如以下

简单数据类型——number

把数字(比方小数、正数、负数)赋值给变量，那么该变量的数据类型就是数字类型(number)。

数字类型(number)不但能够表示常见的十进制数字还能够表示十六进制，八进制的数字。

请看例如以下演示样例：

<script type="text/javascript">
   var num1=9527;//十进制
   var num2=0x22;//十六进制
   var num3=0124;//八进制
   document.write("num1="+num1+",num2="+num2+",num3="+num3);
</script>

结果为:

num1=9527,num2=34,num3=84

简单数据类型——string

用双引號或者单引號包括起来的变量都是字符串类型。

请看例如以下演示样例：

<script type="text/javascript">
   var str1="谷哥的小弟";
   var str2='有心课堂';
   document.write("str1="+str1+",str2="+str2);
</script>

结果为:

str1=谷哥的小弟,str2=有心课堂

简单数据类型——boolean

经常使用boolean类型数据表示真与假。

当中：
true表示真，相应的数字是1
false表示假，相应的数字是0

请看例如以下演示样例：

<script type="text/javascript">
   var b1=true;
   var b2=false;
   document.write("b1="+b1+",b2="+b2);
</script>

结果为:

b1=true,b2=false

简单数据类型——undefined

undefined表示定义了变量但未对其初始化。

比方：

<script type="text/javascript">
   var username;
   document.write("username的类型是:"+typeof(username));
</script>

结果为：

username的类型是:undefined

此处，尽管声明了变量username但未对其初始化，此时username的类型是undefined

复杂数据类型——Array

JavaScript的Array能够包括随意数据类型，并通过索引来訪问每一个元素。并可通过length属性取得Array的长度

请看例如以下演示样例：

<script type="text/javascript">
   var arr=[1,"hello",true,9527];
   var len=arr.length;
   document.write("len="+len+",arr[1]="+arr[1]+",arr[2]="+arr[2]);
</script>

结果为:

len=4,arr[1]=hello,arr[2]=true

在此对Array仅作很easy的介绍。我们会在随后的博客中对它作进一步的了解和学习

复杂数据类型——Object

JavaScript的Object用于描写叙述对象。它是一种由若干键值对组成的无序的集合数据类型

请看例如以下演示样例：

<script type="text/javascript">
  var cheer = {
     name:"陈绮贞",
     birth:1975,
     gender:"女",
     height:168
   };
   document.write("name="+cheer.name+",height="+cheer.height);
</script>

结果为:

name=陈绮贞,height=168

请注意，假设给变量赋值null。那么该变量也是Object类型的；比如：

<script type="text/javascript">
   var username=null;
   document.write("username的类型是:"+typeof(username));
</script>

结果为:

username的类型是:object

在此对Object仅作很easy的介绍。我们会在随后的博客中对它作进一步的了解和学习

JavaScript的强制数据类型转换

1 将number转换成string

可利用String(var)和var.toString()这两种方式将number转换成string

请看例如以下演示样例：

<script type="text/javascript">
   var age=18;
   var pai=3.14;
   document.write("age原本的数据类型是:"+typeof(age)+"<br>");
   document.write("pai原本的数据类型是:"+typeof(pai)+"<br>");
   age=String(age);
   pai=pai.toString(pai);
   document.write("age如今的数据类型是:"+typeof(age)+"<br>");
   document.write("pai如今的数据类型是:"+typeof(pai)+"<br>");
</script>

结果为：

age原本的数据类型是:number
pai原本的数据类型是:number
age如今的数据类型是:string
pai如今的数据类型是:string

2 将string转换成number

可利用Number(var)和parseInt(var)以及parseFloat(var)将string转换成number

请看例如以下演示样例：

<script type="text/javascript">
   var pai1="3.1415";
   document.write("转换前pai1="+pai1+",数据类型是"+typeof(pai1)+"<br>");
   var pai2="3.14159";
   document.write("转换前pai2="+pai2+",数据类型是"+typeof(pai2)+"<br>");
   var pai3="3.141596";
   document.write("转换前pai3="+pai3+",数据类型是"+typeof(pai3)+"<br>");

   pai1=Number(pai1);
   document.write("转换后pai1="+pai1+",数据类型是"+typeof(pai1)+"<br>");
   pai2=parseInt(pai2);
   document.write("转换后pai2="+pai2+",数据类型是"+typeof(pai2)+"<br>");
   pai3=parseFloat(pai3);
   document.write("转换后pai3="+pai3+",数据类型是"+typeof(pai3)+"<br>");
</script>

结果为：

转换前pai1=3.1415,数据类型是string
转换前pai2=3.14159,数据类型是string
转换前pai3=3.141596,数据类型是string
转换后pai1=3.1415,数据类型是number
转换后pai2=3,数据类型是number
转换后pai3=3.141596,数据类型是number

请注意：

利用Number(var)将string转换成number，最后的结果为原数据
利用parseInt(var)将string转换成number。最后的结果为原数据的整数部分
利用parseFloat(var)将string转换成number，最后的结果为原数据

3 将其他数据类型转换为boolean

可利用Boolean(var)将其他数据类型转换为boolean

请看例如以下演示样例：

<script type="text/javascript">
   var age=18;
   document.write("转换前age="+age+",数据类型是"+typeof(age)+"<br>");
   var user="谷哥的小弟";
   document.write("转换前user="+user+",数据类型是"+typeof(user)+"<br>");
   var zero=0;
   document.write("转换前zero="+zero+",数据类型是"+typeof(zero)+"<br>");

   age=Boolean(age);
   document.write("转换后age="+age+",数据类型是"+typeof(age)+"<br>");
   user=Boolean(user);
   document.write("转换后user="+user+",数据类型是"+typeof(user)+"<br>");
   zero=Boolean(zero);
   document.write("转换后zero="+zero+",数据类型是"+typeof(zero)+"<br>");
</script>

结果为：

转换前age=18,数据类型是number
转换前user=谷哥的小弟,数据类型是string
转换前zero=0,数据类型是number
转换后age=true,数据类型是boolean
转换后user=true,数据类型是boolean
转换后zero=false,数据类型是boolean

请注意：

可利用Boolean(var)可将数字0转换为false
可利用Boolean(var)将其他数据类型强制转换为true

JavaScript的算术运算符

关于JavaScript的算术运算符。请參见下表：

这里写图片描写叙述

JavaScript的赋值运算符

关于JavaScript的赋值运算符。请參见下表：

这里写图片描写叙述

JavaScript的比較运算符

JavaScript中经常使用的比較运算符有 >、<、>=、<=
比較运算符最后的结果为：true或false

请看例如以下演示样例：

<script type="text/javascript">
   var num1=9527;
   var num2=9528;
   var result=num1>num2;
   document.write("比較结果为："+result);
</script>

结果为:

比較结果为：false

JavaScript的逻辑运算符

在此介绍JavaScript中三种常见的逻辑运算符：或运算符号||和且运算符号&&以及非运算符!；开发中可运用这三种逻辑运算符对两个boolean类型的变量进行运算。

1 、或运算符号||

假若两个boolean类型的变量，当中一个为true，那么||运算的结果为true
假若两个boolean类型的变量，当中一个为false。那么||运算的结果为true
假若两个boolean类型的变量，两个均为false，那么||运算的结果为false

2 、且运算符号&&

假若两个boolean类型的变量。当中一个为true。那么&&运算的结果为false
假若两个boolean类型的变量，两个均为true，那么&&运算的结果为true
假若两个boolean类型的变量，两个均为false。那么&&运算的结果为false

3 、非运算符号!

假若一个boolean类型的变量，其值为false ,那么!运算后结果为true
假若一个boolean类型的变量，其值为true ,那么!运算后结果为false

JavaScript的等号=运算符

在此介绍JavaScript中与等号=相关的经常使用运算符

1 、=运算符

利用=运算符进行赋值操作
请看例如以下演示样例：

var age=18;

在此利用=运算符为变量age赋值

2 、==运算符

利用==运算符推断两个变量是否同样。请注意，该运算符仅仅推断两个变量的内容是否同样而与两个变量的数据类型无关。

请看例如以下演示样例：

<script type="text/javascript">
   var num1=9527;
   var num2="9527";
   document.write("num1="+num1+",数据类型是"+typeof(num1)+"<br>");
   document.write("num2="+num2+",数据类型是"+typeof(num2)+"<br>");
   var result=(num1==num2);
   document.write("比較的结果result="+result+"<br>");
</script>

结果为：

num1=9527,数据类型是number
num2=9527,数据类型是string
比較的结果result=true

3 、===运算符

利用===运算符推断两个变量是否同样。请注意，该运算符不但推断两个变量的内容是否同样并且也推断两个变量的数据类型是否同样。

请看例如以下演示样例：

<script type="text/javascript">
   var num1=9527;
   var num2="9527";
   var num3=9527;
   document.write("num1="+num1+",数据类型是"+typeof(num1)+"<br>");
   document.write("num2="+num2+",数据类型是"+typeof(num2)+"<br>");
   document.write("num3="+num3+",数据类型是"+typeof(num3)+"<br>");
   var result1=(num1==num2);
   document.write("比較的结果result1="+result1+"<br>");
   var result2=(num1===num3);
   document.write("比較的结果result2="+result2+"<br>");
   var result3=(num1===num2);
   document.write("比較的结果result3="+result3+"<br>");
</script>

结果为：

num1=9527,数据类型是number
num2=9527,数据类型是string
num3=9527,数据类型是number
比較的结果result1=true
比較的结果result2=true
比較的结果result3=false

4 、!=运算符

利用!=运算符推断两个变量是否不同样。

请注意，该运算符仅仅推断两个变量的内容是否不同样而与两个变量的数据类型无关。

请看例如以下演示样例：

<script type="text/javascript">
   var num1=9527;
   var num2="9527";
   document.write("num1="+num1+",数据类型是"+typeof(num1)+"<br>");
   document.write("num2="+num2+",数据类型是"+typeof(num2)+"<br>");
   var result=(num1!=num2);
   document.write("比較的结果result="+result+"<br>");
</script>

结果为：

num1=9527,数据类型是number
num2=9527,数据类型是string
比較的结果result=false

5 、!==运算符

利用!==运算符推断两个变量是否不同样。

请注意。该运算符不但推断两个变量的内容是否不同样并且也推断两个变量的数据类型是否不同样。假若两个变量的内容一样并且数据类型也一样。那么!==的结果为false；其余情况下为true

请看例如以下演示样例：

<script type="text/javascript">
   var num1=9527;
   var num2="9527";
   var num3="1234";
   var num4=9527;
   document.write("num1="+num1+",数据类型是"+typeof(num1)+"<br>");
   document.write("num2="+num2+",数据类型是"+typeof(num2)+"<br>");
   document.write("num3="+num3+",数据类型是"+typeof(num3)+"<br>");
   document.write("num4="+num4+",数据类型是"+typeof(num4)+"<br>");
   var result1=(num1!==num2);
   document.write("比較的结果result1="+result1+"<br>");
   var result2=(num1!==num3);
   document.write("比較的结果result2="+result2+"<br>");
   var result3=(num2!==num3);
   document.write("比較的结果result3="+result3+"<br>");
   var result4=(num1!==num4);
   document.write("比較的结果result4="+result4+"<br>");
</script>

结果为：

num1=9527,数据类型是number
num2=9527,数据类型是string
num3=1234,数据类型是string
num4=9527,数据类型是number
比較的结果result1=true
比較的结果result2=true
比較的结果result3=true
比較的结果result4=false