Android 程序员搞 Web 之 进阶（八）

一、js基础知识 以及 WebStorm 的相关知识点

js 主要分为三部分
1、ECMAScript 标准-----js的基本的语法
2、DOM ------ Document Object Model 文档对象模型
3、BOM----- Browser Object Model 浏览器对象模型

js 是一门脚本语言、解释性语言、动态类型语言、基于对象的语言

js 代码书写位置：html 文件内书写、在 script 标签内书写；在样式行内书写；在 .js 文件内书写，需要在 html 内进行引入

script 标签一般都在 body 标签内最后

js 内 使用 var 进行声明

变量名规范
（1）、变量名需要有意义；
（2）、一般以字母，，字母，数字；
（3）、变量一般都是小写的；
（4）、驼峰命名

Ctrl +Alt +L 格式化代码

console.log("打印内容") 控制台输出log；

二、js 基本书写

1、js 内基本数据类型

number、string、boolean、null、undefined、Object

number:数字类型（整数和小数）
string：字符串类型
boolean：布尔类型
null：空值
undefined：未定义，变量被声明但是没有初始化，则为该类型；
Object：一个对象

2、获取变量的数据类型

typeof 变量名

<script>
        var num = 10;

        console.log(typeof num)
    </script>

输出结果

3、进制

js 内使用的进制为:十进制、八进制（012）、十六进制（0x12）

infinity ： 表示无穷大
-infinity ： 表示无穷小

js 内小数验证小数 存在经度问题，无法避免；
js 内不可以用一个 为 NaN 的算式去== 比较 是不是 NaN 而应该使用 isNaN 方法进行判断；

// 正确的验证方式
  <script>
        var num;
        console.log(isNaN(num + 10))
    </script>

4、字符串

（1）、字符串长度
变量名 .length;

 <script>
        var str="12345";
        console.log(str.length)
    </script>

(2)、转义符
html 的 转义符： < &lt ； > &gt ； 空格 &nbsp
js 的转义符： tab 键 \t ; \ \ ；

js中转义符.png

（3）、字符串内数字与number 类型的数据做减法 ，可以 进行运算。

5、类型转换

（1）、其他类型转换为数字类型
//转为整数
parseInt （）

  <script>
        console.log(parseInt("100"))
    </script>

类型转换

//转为小数
parseFloat();

  <script>
        console.log(parseFloat("100.999"))
    </script>

类型转换

//转为数字
Number（）；

 <script>
        console.log(Number("100.999"))
    </script>

类型转换

（2）、其他类型转 字符串类型
.toString();

  <script>
        var num = 10;
        console.log(num.toString())
    </script>

类型转换

String（）

 <script>
        var num = 10;
        console.log(String(num))
    </script>

类型转换

区别：当 对象有意义则 使用 .toString(); 无法判断是否有意义则使用 String（）；

（3）、其他类型转为布尔类型
Boolean（）；
该转换方式 只有 0，“”，null，undefined，返回为 false 其他的均为 true。

== ：不严格的等于
！==：不严格的不等于
=== ： 严格的等于
！===：严格的不等于

6、分支语句

（1）、if else

<script>
        var a = 90;
        var b = 30;
        if (a>b){
            console.log("a比较大，年龄为："+a);
        }else {
            console.log("b比较大，年龄为："+b);
        }
</script>

(2)、switch case

swich 内可以判断 number 类型 也可以判断 string 类型。

 <script>
        var num = parseInt(prompt("请输入分数"));
        switch (num) {
            case 60:
                console.log("及格");
                break;
            case 70:
                console.log("良好");
                break;
            case 80:
                console.log("优良");
                break;
            case 90:
                console.log("优秀");
                break;
            case 100:
                console.log("满分");
                break;
            default:
                console.log("没及格");
        }
    </script>

7、循环语句

while 语句

  <script>
        var i = 0;

        while (i <10) {
            console.log("学习时间：" + i);
            i++;
        }
    </script>

for 语句

 <script>
        for (var i = 0; i < 10; i++) {
            console.log("该吃饭了" + i);
        }
    </script>

8、浏览器内输出内容

document.write（）浏览器界面输出内容。

 <script>
        document.write("<a href='http://www.baidu.com'>百度</a>")
    </script>

9、break 和 continue 的使用

（1）、循环内使用则可跳出循环；
（2）、循环中遇到 continue 则可以直接进入下一次循环；

10、数组

数组的定义
（1）、通过构造函数进行构建
语法：var 变量名=new Array（）；

  <script>
        var array = new Array(5);
        array[0] = 123;
        array[1] = 234;
        console.log(array)
    </script>

new Array(5) 括号内 数字 表示数组容量

效果

（2）、通过字面量的方式进行创建
语法：var array=[1,2,3];

    <script>
        var array=[1,2,3];
        console.log(array)
    </script>

效果

获取长度方法为： .length
获取索引元素为：数组[下标]；
数组内的数据类型可以不一致，与 java 不一样；
数组长度可以改变，与 java 也不一样；
遍历数组方法 与 java 相同。

三、函数

1、函数定义

（1）、函数相当于 java 内的方法，只是不存在主函数一说

 <script>
        console.log("今天吃");
        eat();

        function eat() {
            console.log("鱼")
        }
    </script>

样例

（2）、函数需要先定义，然后才可以进行调用；
（3）、函数命名需要遵循驼峰命名法；
（4）、函数禁止重名。

2、带参函数

样例代码

  <script>
        console.log("今天吃");
        eat("鱼");
        function eat(food) {
            console.log(food)
        }
    </script>

与 java 不同的是，传入的参数不需要用 var 进行声明；

3、带返回值函数

  <script>
        console.log("今天吃" + getFood());
        
        function getFood() {
            return "鱼";
        }
    </script>

与 java 不同，完全不需要 定义返回值类型；

Android 程序员搞 js 之 基础（十）

欢迎关注.jpg