前端JavaScript基础

计算机语言指用于人与计算机之间通讯的语言，它是人与计算机之间传递信息的媒介。
计算机语言可分为机器语言、汇编语言、高级语言。

编程语言是用来控制计算机的一系列指令，它有固定的格式和词汇（不同编程语言的格式和词汇不一样），必须遵守，如今通用的编程语言有两种形式，汇编语言和高级语言。
汇编语言和机器语言实质是相同的，都是直接对硬件操作，只不过指令采用了英文缩写的标识符，容易识别和记忆。

编程语言有很强的逻辑和行为能力，它是主动的；
标记语言不用于向计算机发出指令，常用于格式化和链接，被读取，是被动的；

JavaScript 是 web 开发者必学的三种语言之一：

-HTML 定义网页的内容 （人的身体）
-CSS 规定网页的布局 （给人化妆、穿衣服）
-JavaScript 对网页行为进行编程，决定功能 （人的各种动作）

JavaScript 在 1995 年由 Brendan Eich 发明，并于 1997 年成为一部 ECMA 标准。
ECMA-262 是其官方名称。ECMAScript 6 （发布于 2015 年）是最新的 JavaScript 版本。

1. JavaScript是一种运行在客户端（自己的电脑）的脚本语言。
2. 脚本语言：不需要编译，运行过程中由js解释器逐行来进行解释并执行。
3. 现在也可以基于Node.js技术进行服务端编程。

JavaScript的作用：

4. 表单动态校验（密码强度检测）（最初目的）
5. 网页特效
6. 服务端开发（node.js）
7. 桌面程序（Electron）
8. APP（Cordova）
9. 控制硬件-物联网（Ruff）
10. 游戏开发
    

JavaScript组成：

1. ECMAScript
2. DOM：文档对象模型
3. BOM：浏览器对象模型

JavaScript有三种书写位置，行内、内嵌和外部：

JavaScript注释：

    // 1.单行注释  ctrl + /
    /* 2.多行注释  默认快捷键 shift + alt + a
         多行注释  可自行修改为 ctrl + shift + /
    */

JavaScript输入输出语句：

例如：

<script>
        // prompt 这是一个输入框
        prompt('请输入你的年龄')
        // alert 弹出警示框，输出的，展示给用户的
        alert('希望你永远开心')
        // console 控制台输出，给程序员测试用的
        console.log('我是程序员能看到的')
    </script>

JavaScript变量：

变量是用于存放数据的容器，本质是程序在内存中申请一块用来存放数据的空间。

变量的使用：
1.声明变量
2.赋值

<script>
        // 1. 声明一个变量age
        var age;
        // 2. 赋值
        age = 18;
        // 3. 输出结果
        console.log(age);
    </script>

3.变量的初始化：

 // 4. 变量初始化
        var myname='陈乐怡'
        console.log(myname)

更新变量：
一个变量被重新赋值以后，原有的值会被覆盖，变量值以最后一次赋的值为准。
声明多个变量：
写一个var，多个逗号隔开。
声明变量的特殊情况：
//只声明，未赋值，结果为undefi（未定义的）
var sex;
console.log(sex)
//不声明不赋值，直接使用某个变量，会报错
//不声明，直接赋值，可以使用
变量命名规范：

注：name尽量不要作为变量名使用

交换两个变量的值：

        // 1.我们需要一个临时变量
        // 2.把apple1 给临时变量temp
        // 3.把apple2 里面的变量给apple1
        // 4.把临时变量里面的值给apple2

 var temp;
        var apple1='青苹果'
        var apple2='红苹果'
        temp=apple1
        apple1=apple2
        apple2=temp
        console.log(apple1)
        console.log(apple2)

数据类型：

js的数据类型是只有程序在运行过程中，根据右边等号的值来确定的，运行完毕之后，变量就确定了数据类型。
js拥有动态数据类型，相同的变量可用作不同的数据类型。

数据类型包括简单和复杂两类：

八进制，前面为0；
十六进制，前面为0x；

//简单数据类型：
//数字型：
        var num=10     //数字型
        var pi=3.14    //数字型
        // 1.八进制，0~7，在程序里面的数字前面加上0表示八进制
            var age=010
            console.log(age)
        // 2.十六进制，0~9，a~f，数字前面加0x表示十六进制
            var num=0xa
            console.log(num)
        // 3.数字型的最大值：
            console.log(Number.MAX_VALUE)
        // 4.数字型的最小值：
            console.log(Number.MIN_VALUE)
        // 5.无穷大：
            console.log(Number.MAX_VALUE * 2)    //infinity无穷大
        // 6.无穷小：
            console.log(-Number.MAX_VALUE * 2)   //-infinity无穷小
        // 7.非数字：
            console.log('苹果'-10)               //NAN非数字
        // 8.isNAN() 用来判断非数字，并且返回一个值；如果是数字则返回false，不是数字返回true。
            console.log(isNaN(12))      //false
            console.log(isNaN('草莓'))   //true   

字符串型：
字符串型可以是引号中的任意文本，其语法为单引号和双引号。
js推荐单引号；
还可以用单引号嵌套双引号，或者双引号嵌套单引号（内单外双，内双外单）

//字符串型：
/字符串型可以是引号中的任意文本，其语法为单引号和双引号。
js推荐使用单引号；
// 1.还可以用单引号嵌套双引号，或者双引号嵌套单引号（内单外双，内双外单）/

console.log('我是一个"白富美"程序员')

 // 2.字符串转义字符 ，都是以\开头， 要写到引号里

 console.log('我是一个"白富美"\n程序员')

 //案例：

alert('酷热难耐，火辣的太阳底下，我挺拔的身姿，成为了最独特的风景。\n我审视四周，这里是我的舞台，我就是天地间的王者。\n这一刻，我豪气冲天，终于大喊了一声，"收破烂啦~"')

    // 3.检测获取字符串的长度  length

 var str='my name is jnne'
    console.log(str.length)

    // 4.字符串的拼接   +            (口诀：数值相加，字符相连)

console.log('沙漠'+'骆驼')      //沙漠骆驼
    console.log('陈同学'+22)        //陈同学22
    console.log('chen'+ true)       //chentrue
    console.log(12+12)              //24

    // 5.字符串拼接的加强

  console.log('pink老师' + 18 + '岁')      //pink老师18岁
    var age=19
    console.log('pink老师age岁')          //pink老师age岁
    console.log('pink老师' + age+ '岁')   //pink老师18岁

 //变量和字符串相加的口诀：引引加加

   console.log('pink老师'+ age +'岁')     //变量不能加引号，变量加引号会变成字符串

一个案例：利用js进行的一个非常简单的交互效果程序

var fruit=prompt('请输入您爱吃的水果')
        var result='您最爱吃的是' + fruit
        alert(result)

//布尔类型 Boolean:     true正确，为1          false假，为0

  var flag=true
    var flag1=false
    console.log(flag + 1)
    console.log(flag1 + 1)

//如果一个变量声明未赋值   就是undefined  ，未定义数据类型

 var desk
    console.log(desk)
    var caomei=undefined;
    console.log(caomei + 'pink');      //caomeipink
    console.log(caomei + 1);           //NAN undefined和数字相加，结果不是数字，  NAN

//空值：

   var xx=null;
    console.log(xx);
    console.log(xx+'pink');
    console.log(xx + 1);

//typeof检测数据类型：

var xy =10;
console.log(typeof xy);
var xy ='xy'
console.log(typeof xy);

//prompt取过来的数据类型是字符型

var myage = prompt('请输入您的年龄');
console.log(myage);
console.log(typeof myage);

数据类型转换：

数字类型转换为字符串型：

   // 1.变量.toString()

 var num1 = 10;
        var str1 = num1.toString();
        console.log(str1);
        console.log(typeof str1);

    //2.利用String(变量) 

 console.log(String(num1));

    // 3.利用+拼接字符串实现转换：

console.log(num1 + '');

字符型转换为数字型：

 // 1. parseInt(变量)  得到的是整数

  var age =prompt('请输入年龄');
    console.log(parseInt(age));
    console.log(parseInt('3.14'));
    console.log(parseInt('3.94'));
    console.log(parseInt('120px'));
    console.log(parseInt('rem120px'));
    

   // 2.parseFloat(变量)   得到的是小数，浮点数

  console.log(parseFloat('3.14'));
    console.log(parseFloat('120px'));
    console.log(parseFloat('rem120px'));

    // 3.利用Number(转换)

  var num = '123';
    console.log(Number(num));
    console.log(Number('123'));

    // 4.利用算数运算  -  *  / 隐式转换

  console.log('12' - 0);    
    console.log('123' - '120');    

转换为布尔类型：

console.log(Boolean(''));
        console.log(Boolean(NaN));
        console.log(Boolean('你好吗'));