javascript基础知识及变量(1)

编程

何为编程，计算机为解决某个问题而使用某种程序设计语言编写的代码，并最终得到结果的过程。

计算机程序

可以通过计算机语言的一系列指令集合来控制计算机

注意：任何能够执行代码的设备都被称为计算机，例如：ATM 手机智能机器人等等

计算机语言

计算机语言是人类与计算机之间通讯的语言，是人类与计算机之间传递信息的媒介。

计算机语言：机器语言汇编语言高级语言

计算机最终识别的是二进制语言，二进制语言是由0和1组成

机器语言

机器语言是由二进制组成的二进制语言泛指0和1

在这里插入图片描述

汇编语言

 汇编语言和机器语言本质相同 都是直接对计算机硬件进行操作，但指令符采用英文缩写的标识符，更便于记忆和缩写

高级语言

高级语言指C++ java Phython go语言 javascript等等

标记语言与编程语言的区别

标记语言是被动读取的，没有逻辑性可言
编程语言是具有逻辑性，是可以主动读取的

计算机基础

计算机组成

在这里插入图片描述

数据存储单位

在这里插入图片描述

程序运行的顺序

在这里插入图片描述

程序运行时，会将程序的代码从硬盘转移到内存中，cpu从内存中读取数据。

内存用的是电而硬盘用的是机械 cpu从内存中读取数据

初识javascript

javascript的发明者：布兰登.艾奇，在1995年仅利用10天的时间便发明javascript,最初在网景公司命名为Livescript,后改名为javascript

javascript是什么？

运行在客户端的脚本语言。服务端的脚本语言：Node.js(从上到下依次执行)

在这里插入图片描述

javascript的作用

表单验证
APP开发
游戏开发
网页交互
服务端开发

HTML/CSS/Javascript的关系

HTML CSS属于标记语言，被动读取数据
Javascript属于高级语言，会主动读取数据，具有很强的逻辑性。

浏览器执行javascript的过程

浏览器分为两部分：渲染引擎 JS引擎

渲染引擎：俗指浏览器内核主要是用来解析HTML CSS等等
Js引擎：用来解析Js代码。最有名的js引擎：chorme v8引擎

注意事项

JS引擎也就是常说的编译器，浏览器本身并不执行js语句，js引擎会把js语句逐行进行编译并执行。


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // js引擎会逐行执行js代码  解析一行运行一行
        alert("尧子陌");
        alert('临风笑却世间');
    </script>
</head>

<body>

</body>

</html>

在这里插入图片描述

Javascript的组成

Javascript:ECMAscript(js的语法核心) DOM(文档对象模型) BOM(浏览器对象模型)

ECMAscript:Javascript（网景）与JScript（微软）的核心语言功能
DOM:提供访问与操作网站内容的借口与方法
BOM:提供与浏览器交互的接口与方法

Javascript初体验

行内js

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="button" value="China" onclick="alert('中国 我爱你')">
</body>

</html>

在这里插入图片描述

内嵌js


    <script type="text/javascript">
        alert("hello 中国")

    </script>

在这里插入图片描述

外链JS

My.js

alert('hello word')

<script src="./My.js"></script>

在这里插入图片描述
注意事项

使用外链JS的时候，script元素之间不要添加任何内容
尽量不要使用行内js,会增加DOM结构，使页面加载速度变慢。

Javascript注释

Javascript注释分为单行注释及多行注释

单行注释：//
多行注释 /* */

code中的快捷键
在这里插入图片描述

js中的输入输出语句

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    prompt('请输入china')
    alert('恭喜你 输入的内容正确')
    console.log('2020');
</script>

</html>

在这里插入图片描述

变量

变量：变量仅仅是为了保存值的占位符而已，通过变量名可以获取数据，甚至修改数据。

注意事项

本质是从内存中申请一块空间，用来存储数据

在这里插入图片描述

变量的使用

1.声明变量
2.赋值


<script>
    // 1.声明变量
    var age;
    // 2.赋值
    age = 18;

    // 在控制台打印
    console.log(age)
</script>

在这里插入图片描述

变量的初始化

声明变量的同时且赋值，var是一个操作符，而变量名相当于标识符。



    <script>
    // 声明变量的同时直接赋值
        var name = "尧子陌";
        console.log(name)


    </script>

在这里插入图片描述

变量案例

控制台打印个人信息


    <script>
        // 声明变量
        var name ="尧子陌";
        var age = 24;
        var  sex = "男";
        var site = "南阳";
        //在控制台进行打印
        console.log(name);
        console.log(age);
        console.log(sex);
        console.log(site)
    </script>

在这里插入图片描述

用户输入自己的姓名并在网页中弹出来

<script>
    var username = prompt('请输入姓名');

    alert('你的姓名:' + username);
    
</script>

在这里插入图片描述

变量的扩展

更新变量

变量倍重新赋值后，值以最后一次为准，原来的值会被覆盖掉


    <script>
        // 初始化变量
        var age = 12;

        // 重新赋值
        age = 20;

        // 在控制台打印
        console.log(age) //20
      
    </script>

在这里插入图片描述

同时声明多个变量

同时声明多个变量，代码的结尾需要用逗号结束


    <script>
        // 同时声明多个变量
        var name = '尧子陌',
            age = '18',
            sex = '男',
            site = '南阳';
        // 在控制台打印
        console.log(name, age, sex, site)
     </script>

在这里插入图片描述

其它情况

1.只声明不赋值的情况下
2.不声明只赋值的情况下
3.不声明不赋值的情况下

<script>
    //只声明  不赋值的情况下
    var age;
    console.log(age) //undefined

    //不声明 只赋值的情况下
    sex = 20;
    console.log(sex) //20

    // 不声明 不赋值的情况下

    console.log(num)
</script>

在这里插入图片描述

变量名的规则

1.严格区分大小分
2.由字母下划线数字 $组成
3.不能以数字开头
4.变量名要有意义
5.遵循驼峰式命名，即首字母小写，后面单词的首字母需要大写
6.不能使用js中的关键字和保留字

注意：不能使用name作为变量名
在这里插入图片描述

交换两个变量

思路

1.声明一个临时变量temp
2.把num的值赋值给temp
3.把num2的值赋值给num
4.把temp的值赋值给num2

注意：右边的值赋值给左边

  <script>
        //1.声明一个临时变量temp
        var temp;

        //声明变量num num2
        var num = 10;
        var num2 = 20;

        //把num的值赋值給temp
        var temp = num;

        //把num2的值赋值給num
        var num = num2;

        //把temp的值赋值給num2;
        var num2 = temp;

        console.log(num);
        console.log(num2);
    </script>

在这里插入图片描述

变量的总结

在这里插入图片描述

数据类型

计算机中，数据占用存储空间不同，定义的数据类型不同

javascript属于弱类型语言，只有在赋值的情况下，才能确定数据类型

<script>
    var num = 20;
    console.log(num); //20  数值型

    var str = "hello word";
    console.log(str); //hello word 字符串型
</script>

在这里插入图片描述

数据类型的分类

简单数据类型：Number String Boolean Undefined Null
复杂数据类型：Object

在这里插入图片描述

Number

注意事项

1.Number包括整数浮点数（小数）二进制八进制十六进制 Number.MAX_VALUE(最大值) Number.MIN_VALUE(最大值) Infinity(正无穷) -Infinity(负无穷) NaN(非数值)
2.八进制前面数字加0(0~8) 十六进制前面添加0x(0~9 A-F)
3.所有的八进制和十六进制会被转换成十进制

    <script>
        var num = 20;
        console.log(num); //整数

        var num2 = 1.314;
        console.log(num2) //浮点数

        var num3 = 050;
        console.log(num3) //八进制

        var num4 = 0x5;
        console.log(num4) //十六进制

        console.log(Number.MAX_VALUE) //最大值
        console.log(Number.MIN_VALUE); //最小值

        console.log(Infinity) //正无穷大
        console.log(-Infinity) //负无穷大

        console.log("Hello" - 123); //NaN(非数值)
    </script>

在这里插入图片描述

isNaN()

isNaN()函数：判断里面的参数是否为非数值 为非数值则显示true 反之则显示false,参数会进行隐式转换

注意事项

isNaN(true)结果为false，因为true会转换成1，isNaN(false)结果为false,因为false会转换成0

   <script>
        //判断是否是非数值

        console.log(isNaN(20)); //false

        console.log(isNaN("hello")) //true
    </script>

在这里插入图片描述

String

引号里面的任意文本在JS中被称为字符串，引号可以为单引号也可以为双引号

注意事项

js里面的嵌套法则，外单内双，外双内单。
特殊情况下，需要用到转义符

<script>
    var str = "hello 中国";
    console.log(str)

    var str2 = "我是一个'高富帅'的男孩子";
    console.log(str2);

    var str3 = "大家好\n我的名字叫做尧子陌";
    console.log(str3)
</script>

在这里插入图片描述

转义符

在这里插入图片描述

string案例

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

在这里插入图片描述

字符串扩展

字符串+任意类型 = 拼接之后的新的字符串口诀：数值相加字符相连
通过length属性可以获取字符串的长度
字符串可以和变量相加，结果仍是字符串类型

 <script>
        var str = "my name is 尧子陌";
        console.log(str.length) //通过length属性可以获取字符串的长度

        var str = "hello";
        console.log(str + "尧子陌"); //拼接之后的字符串
        alert(str + "尧子陌") //拼接之后的字符串
    </script>

在这里插入图片描述

字符串之年龄案例

步骤

1.弹出一个输入框，用户输入年龄
2.把输入的结果用变量的形式保存起来，与所需要的字符串拼接起来
3.使用alert弹出警示框

   <script>
        /*
                1.弹出一个输入框，用户输入年龄
                2.把输入的结果用变量的形式保存起来，与所需要的字符串拼接起来
                3.使用alert弹出警示框
                */
        var age = prompt('请输入你的年龄');

        var str = "你今年" + age + "岁";

        alert(str)
    </script>

在这里插入图片描述

Boolean

布尔值有两个值 true（真） false（假）

‘’ 0 undefined null NaN会被转换成false，其它值会被转换成true\

注意：在进行加法运算中，true会被转换成1，而false会被转换成0


 <script>
        console.log(true + 1);
        console.log(false + 1);
    </script>

在这里插入图片描述

Undefined

声明未被赋值的，其结果为undefined

注意：undefined与任何数值相加，其结果为NaN(非数值)



    <script>
        // 声明未赋值的 其结果为undefined
        var age;
        console.log(age);//undefined

        var result= age+"2";
        console.log(result);//undefined2
        
         var result2 = age+2;
        console.log(result2)//NaN
        
    </script>

在这里插入图片描述

Null

Null:表示一个空指针对象，在加法运算中与数值相加时，Null会被转换成0


<script>
    // Null表示空对象指针
    var car = null;
    console.log(car + 1); //1
    console.log(car + "2020"); //null2020
</script>

在这里插入图片描述

typeof

typeof:检测数据类型


<script>
    //使用typeof 检测数据类型
    var num = 10;
    console.log(typeof num); //number

    var str = "hello";
    console.log(typeof str); //string

    var flag = true;
    console.log(typeof flag); //boolean

    var age;
    console.log(typeof age); //undefined 

    var N = null;
    console.log(typeof null) //object
</script>

在这里插入图片描述

通过控制台的颜色来区分数据类型


 <script>
        console.log(10); 
        console.log("尧子陌"); 
        console.log(true) 
        console.log(undefined) 
        console.log(null) 
    </script>

在这里插入图片描述

字面量

字面量：一个固定值的表示法

数字字面量：8 20 50 等等
字符串字面量 :“hello” “work”
布尔值表示法：true false

数据类型转换

一种数据类型的变量转换成另一种数据类型

转换成字符串类型

利用toString()方法转换成字符串
利用String函数进行转换
利用+号进行隐式转换
利用toString()可以转换2进制 8进制 10进制 16进制


    <script>
        // 利用toString()方法转换成字符串
        var  num = 20;
        console.log(num.toString()) //转换成字符串

        //利用String函数进行转换
        var num2 = 25;
        console.log(String(num2));

        //利用+号进行隐式转换
        var num4 = 30;
        console.log(""+num4);

        // 利用toString()可以输出2进制 8进制 16进制等等

        var num6 = 20;
        console.log(num6.toString(2)) //转换成2进制
        console.log(num6.toString(8)) //转换成8进制
        console.log(num6.toString(10)) //转换成10进制
        console.log(num6.toString(16)) //转换成16进制
        
    </script>

在这里插入图片描述

转换成数值型

parseInt():转换成整数
parseFloat():转换成浮点数
Number():强制转换 ""会转换成0 true会转换成1 false会被转换成0
利用算数运算符中的 - * / 进行隐式转换
parseInt和parseFloat及number遇到非数字开头的参数，会显示NaN


    <script>
        /*              parseInt():转换成整数
                        parseFloat():转换成浮点数
                        Number():强制转换 ""会转换成0 true会转换成1 false会被转换成0
                        利用算数运算符中的 - * / 进行隐式转换
                        parseInt和parseFloat及number遇到非数字开头的参数，会显示NaN
          */

        var num = '20';
        console.log(parseInt(num)); //20

        var num2 = '1.1314';
        console.log(parseFloat(num2)); //1.1314

        var num3 = '';
        console.log(Number(num3)); //0

        var num4 = '520';
        console.log(num4 - ''); //520

        var num5 = 'bull2020';
        console.log(parseInt(num5)); //NaN
    </script>

在这里插入图片描述

计算用户的年龄的案例

弹出一个输入框，用户输入自己的出生日期
把用户的年龄用变量保存起来，用今年的年份减去用户输入的变量值，从而得到自己的结果（程序内部处理）
弹出警示框，把结果弹出来


    <script>
        var username = prompt('请输入出生的日期');

        var age = 2020 - Number(username);

        alert('你今年' + age + '岁')
    </script>

在这里插入图片描述

简单的加法器

1.弹出第一个输入框用户输入数字用变量的方式保存起来
2.弹出第二个输入框用户输入数字用变量的方式保存起来
3.使用parseFloat进行数据转换，把两个变量进行相加
4.用alert弹出结果即可


  <script>
        var username1 = prompt('请输入第一个数值');
        var username2 = prompt('请输入第二个数值');

        var result = parseFloat(username1) + parseFloat(username2);
        alert(result)
    </script>

在这里插入图片描述

Boolean

Boolean(): 否定的值会被转换false 其它的值会被转换成true

0 “” null undefined NaN会被转换成false
其余的值会被转换成true

<script>
        //下面的值会被转换成false
        console.log(Boolean('')) //false
        console.log(Boolean(null)); //false
        console.log(Boolean(NaN)); //false
        console.log(Boolean(0)); //false
        console.log(Boolean(undefined)); // false
        
        //下面的值会被转换成true
        
        console.log(Boolean('hello'));
        console.log(Boolean(2020));
        
             
    </script>

在这里插入图片描述

个人信息案例

注意：要用到输入框 alert弹出框字符串拼接转义符等等


   <script>


        var name = prompt("请输入名字");
        var age = prompt("请输入年龄");
        var sex = prompt("请输入性别");
        alert('姓名:'+name+'\n'+'年龄:'+age+'\n'+'性别:'+sex+'\n')

    </script>

在这里插入图片描述

编译型语言和解释性语言的区别

编译性语言和解释性语言唯一的区别：在于翻译的时间点不同。

举例如下

如同请客吃饭，编译性语言相当于把菜上齐才吃饭，而解释性语言相当于吃火锅，边涮边吃

在这里插入图片描述

标识符保留字关键字

标识符是指开发人员为变量函数属性起的名字。
关键字是指JS已经使用的字不能当做变量名函数名
保留字是即将未来将被使用的关键字

总结

NaN == NaN 这句话是错误的，NaN与任何值都不相等包括NaN本身
isNaN（）函数是用来检测里面的参数是否为非数值，isNaN(true)的值为false,因为true会默认转换成1
isNaN(false)的值为false ，因为false会默认转换成0
undefined == null 这句话是正确的 undefined衍生于Null
js中逗号保留原始数据类型，而加号是拼接字符串（对控制台而言）