JavaScript变量(笔记)

JavaScript的作用

表单动态检验（密码强度检测）（这是js产生的最初目的）
网页特效
服务端开发（Node.js）
桌面程序（Electorn）
App（Cordova）
控制硬件-物联网（Ruff）
游侠开发（cocos2d-js）

HTML/CSS/JS的关系

HTML相当于人的身体，决定网页结构和内容
CSS想当于给人穿衣服，决定网页呈现给用户的模样
JS脚本语言相当于人的各种动作，实现业务逻辑和页面控制（它决定功能）

浏览器执行JS简介

浏览器分为两部分：渲染引擎和JS引擎
渲染引擎：用来解析HTML和CSS，俗称内核
JS引擎：也成为JS解释器，用来读取网页的JavaScript代码，对其处理后运行

JS的组成

一个完整的JavaScript实现由三个不同部分组成
核心（ECMAScript）
文档对象模型（Document Object Model,DOM）
浏览器对象模型（browser Object Model ,BOM）

JS的书写位置

有三种位置
行内式，内嵌式，外部式

行内式JS

<input type="button" value="cilik" onclick="alert('hello')">

内嵌式JS

<script>
    alert('hello');
</script>

外部JS

<!-- 引入外部js -->
<script src="js/my.js"></script>

JS常用输入输出语句

alert(msg) 浏览器弹出警示框
console.log(msg) 浏览器控制台打印输出信息
prompt(info) 浏览器弹出输入框，用户输入

变量

变量是用于存放数据的容器，可以通过变量名获取数据，甚至修改数据

声明变量

        <script>
        // 声明一个名为age的变量
        var age;
        // 将变量赋值
        age = 18;
        // 打印变量
        console.log(age);
        // 直接变量初始化
        var myName = 'yuyang';
        console.log(myName);
        // 变量的更新
        myName = 'xinde';
        console.log(myName);
        var abc;
        // 输出undefined
        console.log(abc);
        // 不声明，不赋值，直接使用，会报错
        // console.log(safa);
        bsmzfz = 10;
        // 不声明，只赋值，会输出
        console.log(bsmzfz);
    </script>

1、严格区分大小写
2、变量的命名由字母、数字、下划线或$组成，但只能以字母、下划线、$、开头
3、不能用关键词或者保留字命名。
4、javascript自己的命名习惯
驼峰命名法：首字母小写，后面的单词的首字母要大写
5、命名一定要有意义

数据类型

<script>
    // JavaScript是一种弱类型语言，所以不用提前声明变量的类型
    // 这是数字型
    var age = 10;
    // 这是字符型
    var ok1 = '使得';
    // JavaScript有动态类型，所以不同的变量可以用作不同的类型
    var x = 7; //现在为数字
    var x = "wr3wed"; //现在为字符串
</script>

简单数据类型
Number 数字型，包括整型和浮点型
Boolean 布尔类型 true 1或者 false 0
String 字符串类型 如“张三”
Undefined 未定义的
Null 空值

<script>
    var num = 10; //10进制
    var num1 = 010; //8进制
    var num2 = 0xf; //16进制
    console.log(num);
    console.log(num1);
    console.log(num2);
</script>

数字型范围
最大值 1.7976931348623157e+308
最小值 5e-324

<script>
    console.log(Number.MAX_VALUE); //1.7976931348623157e+308  最大值
    console.log(Number.MIN_VALUE); //5e-324  最小值
</script>

三个特殊值

<script>
    console.log(Infinity);//无穷大
    console.log(-Infinity);//无穷小
    console.log(NaN);//不是一个数
</script>

String字符串
    <script>
        var str1 = "wsaf"; //可以用双引号表示字符串
        var str2 = 'wadf'; //可以用单引号表示字符串
        var str3 = wadf; //不用引号会报错
    </script>

转义字符
\n 换行
\ 斜杠
’ 单引号
" 双引号
\t tab缩进
\b 空格

字符串长度

<script>
    var str1 = "wdasfdvsb";
    console.log(str1.length);
</script>

字符串拼接
数值相加，字符相连

<script>
    console.log('hello' + ' ' + 'world'); //hello world
    console.log('100' + '100'); //100100
    console.log('11' + 11); //1111
</script>

检测数据类型

<script>
    var num = "wdfa";
    console.log(typeof num); //string
</script>

类型转换
转换成字符串

    <script>
        var num = 10;
        console.log(String(num)); //转换成字符串
        var str = num.toString(); //转换成字符串
        console.log(num);
        console.log(str);
        console.log(num + "0"); //转换成字符串
    </script>

转换成数字型

<script>
    console.log(parseInt('3.14')); //转换成整型
    console.log(parseInt('120px')); //会自动去掉单位
    console.log(parseInt('rem120px')); //不是一个数
    // -------------------------------------------
    console.log(parseFloat('3.14')); //转换成浮点型
    console.log(parseFloat('120px')); //会自动去掉单位
    console.log(parseFloat('rem120px')); //不是一个数
    // -------------------------------------------
    var str = '123';
    console.log(Number(str));
    console.log(Number('123'));
</script>

转换成布尔型

<script>
    console.log(Boolean('')); //false
    console.log(Boolean(0)); //false
    console.log(Boolean(NaN)); //false
    console.log(Boolean(null)); //false
    console.log(Boolean(undefined)); //false
    console.log(Boolean('wad')); //true
    console.log(Boolean(12)); //true
</script>