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

时间：2017-01-27 17:18:37 阅读：368 评论：0 收藏：0 [点我收藏+]

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

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

自定义View系列教程00–推翻自己和过往，重学自定义View
自定义View系列教程01–常用工具介绍
 自定义View系列教程02–onMeasure源码详尽分析
 自定义View系列教程03–onLayout源码详尽分析
 自定义View系列教程04–Draw源码分析及其实践
 自定义View系列教程05–示例分析
 自定义View系列教程06–详解View的Touch事件处理
 自定义View系列教程07–详解ViewGroup分发Touch事件
 自定义View系列教程08–滑动冲突的产生及其处理

版权声明

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

JavaScript简介

初识JavaScript

JavaScript是一种网页编程技术，其功能强大，实现简单方便，入门简单，即使是程序设计新手也可以快速地使用JavaScript进行简单的编程。
JavaScript是一种基于对象和事件驱动，并具有安全性能的脚本语言。脚本语言简单理解就是在客户端的浏览器就可以互动响应处理程序的语言，而不需要服务器的处理和响应，当然JavaScript也可以做到与服务器的交互响应
JavaScript可以被嵌入到HTML文件中，不需要经过Web服务器就可以对用户操作作出响应，使网页更好地与用户交互，减少用户等待时间，提升用户体验
概括地讲：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( )显示一个带有指定消息和确定及取消按钮的对话框。

利用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

复杂数据类型——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

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

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

原文：http://blog.csdn.net/lfdfhl/article/details/54748369

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)