JavaScript学习总结（一）

概述

前端三剑客，html、css、js。

这三种语言基本是前端开发必备的东西，那么你知道这三种语言分别负责的功能是什么吗？

• html：负责了一个页面的结构
• css：负责页面的样式
• JavaScript：负责与用户进行交互

html与css的功能不做赘述，那么，JavaScript是如何负责与用户进行的交互呢？

比如说，我们在网页上输入一个账号，账号的格式要求是必须全部是数字，结果你输入了12343a，这时候网页会给出相应的提示，就是这个意思。

1997年欧洲的计算机协议（ECMA）组织给javascript规定了相关的协议

JavaScript由三部分构成：

• ECMAScirpt(规范了基本的语法)
• BOM （浏览器对象模型）
• DOM (文档对象模型)

接下来我们来介绍一下JavaScript特点：

• 安全性（javascript的代码不能直接访问硬盘的内容）
• 跨平台（很简单，只要有浏览器，就可以运行js）

最后来说一下javascript与java之间区别 ：

• javascript是属于网景公司产品， java是sun公司的产品
• javascript是基于对象的语言，java是面向对象的语言
  
  基于对象：不具备面向对象的三大特征，但是有对象
• javascript是解释型语言；java是解释、编译型语言
• javascript是弱类型语言， java 是强类型语言
  
  java中声明变量的时候必须要明确该变量的数据类型
  
  javascript声明变量不需要明确是何种数据类型， 任何的变量都是使用一个关键字var去声明的

在了解了JavaScript的一些基本内容之后，我们就要进入JavaScript的编写工序了！

如何编写JavaScript的代码

1.首先说一下JavaScript中常用的函数

• alert（”显示的内容”） ——弹出框
• document.write（”数据”）——-向页面输出数据

//1. 可以使用 <script> 标签体内进行编写,代码如下
<script type="text/javascript">
    alert("666");
</script>

这个时候浏览html页面的时候就会弹出窗口，并显示666。

//2. 可以引入外部的javascript文件
    格式：
        <script src="1.js" type="text/javascript"></script>
    注意：
        1.<script>是有开始标签与结束标签的，千万不要在一个标签中结束了
        2.如果<script>已经用于引入了js文件，那么该<script>标签体就不能再写js代码了

2.注释

//注释的内容 单行注释 /* 注释的内容*/ 多行注释

3.JavaScript的变量声明

格式：var 变量名 = 数据

<script type="text/javascript">
    var a = 10;
    document.write("a="+a+"<br/>");
</script>

声明变量要注意的事项：

1. 在javascript中声明变量是使用var关键字声明的，javascript中的变量可以存储任意的数据类型数据

2. javascript中变量数据类型是根据存储的值决定的，可以随时更改存储数据的类型

3. 定义了多个同名的变量是，后定义的同名变量是覆盖前面定义的同名变量

4. 声明变量的时候可以省略var关键字，但是不建议省略

JavaScript的数据类型

typeof： 查看变量的数据类型。

使用格式：

        typeof 变量名

javascript的数据类型：

number 小数与整数

string 字符串 注意： javascript中没有字符的概念，只有字符串，字符串可以写在单引号或双引号中。

boolean 布尔数据类型，

undefined  undefined代表该变量没有定义

typeof使用方法如下：

var a = 10;
    document.write("a的数据类型是"+(typeof a)+"<br/>");

将字符串转换成数字

用到的方法有：

• parseInt()—-将一个字符串转换成整数。
  
  如果接收的字符串含有非数字字符，那么parseInt方法会从字符串的首个字符开始寻找，一直找到非数字字符为止，然后就使用前面的数字字符转换成数字

var a = "a123";
var b = parseInt(a);
document.write("字符串a转换后的数字是："+b+"<br/>");

var a = "123abc123";
var b = parseInt(a);
document.write("字符串a转换后的数字是："+b+"<br/>");

var a = "012";
var b = parseInt(a);
document.write("字符串a转换后的数字是："+b+"<br/>");

输出结果如下：

字符串a转换后的数字是：NaN not a number（不是一个数字）
字符串a转换后的数字是：123
字符串a转换后的数字是：12  如果首位是0，那么就先去掉0在进行转换
字符串a转换后的数字是：18  如果一个字符串是以0x开头，那么会把字符串中的内容当成十六进行的数据处理

• parseFloat()—–将一个字符串转换成浮点型数字。
  
  代码如下：

<script type="text/javascript">
    var a = 3.14;
    var b = parseFloat(a);
    document.write("结果是：" + b);
</script>

这里输出的结果是3，14

根据上面的这些例子，我们可以知道，并不是所有的字符串都可以转换成数字，那么，我们应该如何判断一个字符串是否能够转换成数字呢？

JavaScript提供了一个IsNaN（is not a number）的方法帮助我们判断字符串是否可以转换成一个数字。千万注意的是，这个方法和以往的方法有做不同，这个方法中，不是一个数字返回true，是一个数字返回false。（有点反人类。。）

4.运算符

学到这一步，其实在其他语言（c或者java）中这部分内容都要介绍烂了，我只写一些比较重要的内容。

• 一个数值加减true，其实是加减的0。而在java中，数字不能与布尔值相加减
• 如果两个整数相除不能整除的时候，数值为小数
• 比较运算符：字符串和字符串也能够比较、字符串能够与数字进行比较（先将字符串转换成数字再进行比较）
  
  比较规则如下：

/*
字符串与字符串的比较规则是：

    情况1： 能找到对应位置上的不同字符，那么就比较第一个不同字符的大小。

    情况2： 不能找到对应位置上的不同字符，这时候比较的是两个字符串的长度。

*/
<script type="text/javascript">
    document.write("10字符串和3的字符串比较谁的大？"+("19">"18888"+"<br/>"));
</script>

所以，上述代码输出的结果应该是true。

• 逻辑运算符：没有单与（&）单或（|），只有短路与（&&）和短路或（||）
• 三目运算符：布尔表达式?值1:值2

5.控制流程语句

1. if语句
   
   特殊之处：
   
   在javascript中的if语句条件不单止可以写布尔表达式，还可以写任何的数据。

   number  非0为true, 0为false.
   string  内容不空是true， 内容空的时候是false。
   undefined：false
   NaN:    false
   

2. 选择语句
   
   特殊之处：在javascript中case后面可以跟常量与变量，还可以跟表达式
   
   代码如下：

var option = "A";
var a = "A";
var score = 66;
switch(option){
    case a:
        document.writeln("90分");
        break;
    case "B":
        document.writeln("80分")；
        break；
    case score>60?"C":"B" :
        document.writeln("60分");
    default:
        break;
             }