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

时间 2019-11-10

原文原文链接

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

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

版权声明

本文原创做者：谷哥的小弟
做者博客地址：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有两种常见的写法，分别介绍例如如下markdown

第一种：内嵌式写法框架

<!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