javascript基础知识及变量(1)

编程

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

计算机程序

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

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

计算机语言

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

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

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

机器语言

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

汇编语言

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

高级语言

高级语言指C++ JAVA PHYthon go语言 javascript等等

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

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

计算机基础

数据存储单位

程序运行的顺序

注意事项

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

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

初识javascript

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

javascript是什么?

运行在客户端的脚本语言，服务器端的脚本语言：NodeJS，从上到下依次执行

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>

js的组成

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

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

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>
</head>
<body>
   <input type="button" value="China" onclick="alert('中国 我爱你')">
</body>
</html>

内嵌JS


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

    </script>

外链JS

my.js

   alert("hello 中国")


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

    </script>

注意事项

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

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>
        // 输入语句
        prompt("请输入“china")
        // 输出语句
        alert("恭喜你 输入正确")
        // 在控制台打印
        console.log("2020")
    </script>
</head>

<body>

</body>

</html>

变量

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

注意事项
本质：变量是从内存中申请的空间，用来存取数据

变量的使用

1. 声明变量
1. 赋值


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

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

结果

变量的初始化

何为变量的初始化，在声明变量的同时且赋值 var是一个操作符而变量名相当于标识符


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


    </script>

结果

变量案例

案例1：在控制台打印自己个人信息


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

案例2：用户输入自己的姓名，并在网页中弹出来


    <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的值赋值给num1
4.把temp的值赋值给num2

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

<!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>
      
        
        // 声明临时变量
        var temp; 

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

        // 交换变量
        var temp = num;
        var num = num2;
        var num2 = temp;

        console.log(num)
        console.log(num2)

     </script>
</head>
<body>
    
</body>
</html>

变量的总结

数据类型

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

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


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

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


    </script>

数据类型的分类

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

Number

注意事项

1.Number包括整数浮点数（小数）八进制十六进制 Number.MAX_VALUE(最大值) Number.MIN_VALUE(最大值) Infinity(正无穷) -Infinity(负无穷) NaN(非数值)

2.八进制前面数字加0(0~8) 十六进制前面添加ox(0~9 A-F)

3.所有的八进制和十六进制会被转换成十进制

4.isFinite()函数位于最大值和最小值之间会返回true

5.parseInt()可以转换成二进制八进制十六进制，而parseFloat()只能转换十进制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dcument</title>
    <script>
        var num = 20;
        console.log(num); //整数

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

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

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

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

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

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

isNaN()函数

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

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

<!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>
        //判断是否是非数值

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

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

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属性可以获取字符串的长度
字符串可以和变量相加，结果仍是字符串类型

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

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

年龄案例

步骤

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

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

        alert(str)
    </script>
</head>

<body>

</body>

</html>

Boolean布尔值

布尔值有两个值 true（真） false（假）
'' 0 undefined null NaN会被转换成false，其它值会被转换成true

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

<!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>
        var flag = true;
        var flag1 = false;

        console.log(flag+1); //2
        console.log(flag1+1);//1



    </script>
</head>
<body>
    
</body>
</html>

Undefined

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

注意：undefined与任何数值相加，其结果为NaN(不是一个数值)


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

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

Null

Null：表示一个空对象指针


    <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
        
        var username = prompt("请输入年龄");
        console.log(typeof username)
    </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()) //转换成字符串10

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


    <script>
        // 利用paeseInt进行转换成整数
        var str = "20";
        console.log(parseInt(str)) //20 

        // 利用parseFloat转换成浮点数
        var str2 = '1.314';
        console.log(parseFloat(str2));//1.314

        //利用Number进行转换
        var str3 ='20.55';
        console.log(Number(str3));

        //利用算数运算中的 - * /进行转换
        var str4 = '205';
        console.log(str4-"");



    </script>

年龄案例

计算用户的年龄

步骤如下

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

<!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>
        //1.弹出输入框 用户输入自己的年龄
         var  age = prompt('请输入出生的年份')

         //2.把用户输入的年龄用变量的方式保存起来，拿今年的月份减去变量名即可得到结果

         var userName = 2020-age;

         //3.弹出结果
         alert('你的年龄为'+userName+'岁')
    </script>
</head>
<body>
    
</body>
</html>

简单的加法器

1.弹出第一个输入框用户输入数字用变量名保存起来

2.弹出第二个输入框用户输入数字用变量名保存起来

3.引用数据类型转换成数值型，两个值进行相加

4.用alert弹出结果即可

<!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>
       /* 1.弹出第一个输入框 用户输入数字 用变量名保存起来
          2.弹出第二个输入框 用户输入数字 用变量名保存起来
          3.引用数据类型转换成数值型，两个值进行相加
          4.用alert弹出结果即可
        */
        var  userName1= prompt("请输入第一个数字");
        var userName2 = prompt("请输入第二个数字");
`
        var result = parseFloat(userName1) + parseFloat(userName2);

        alert(result) 
    </script>
</head>`
<body>
    
</body>
</html>

Boolean（）

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

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

<!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>
        //下面的值会被转换成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>
</head>
<body>
    
</body>
</html>

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

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

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

标识符关键字保留字

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

关键字及保留字

个人信息案例

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

<!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>
 ![image.png](/img/bVbLbuy)

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

    </script>
</head>
<body>
    
</body>
</html>

总结

1.NaN == NaN 这句话是错误的，NaN与任何值都不相等 包括NaN本身

2.isNaN（）函数是用来检测里面的参数是否为非数值，isNaN(true)的值为false,因为true会默认转换成1

3.isNaN(false)的值为false ，因为false会默认转换成0

4.在if语句中，会自动执行相对应的Boolean转换

5.undefined == null 这句话是正确的 undefined衍生于Null

特别注意事项

js中逗号保留原始数据类型，而加号是拼接字符串（对控制台而言）
使用alert时，要使用加号

javascript基础知识及变量(1)

编程

计算机程序

计算机语言

机器语言

汇编语言

高级语言

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

计算机基础

数据存储单位

程序运行的顺序

初识javascript

javascript是什么?

javascript的作用

HTML/CSS/Javascript的关系

浏览器执行Javascript的过程

js的组成

js初体验

行内的js

内嵌JS

外链JS

js注释

JS中的输入输出语句

变量

变量的使用

变量的初始化

变量案例

案例1：在控制台打印自己个人信息

案例2：用户输入自己的姓名，并在网页中弹出来

变量的扩展

更新变量

同时声明多个变量

其它情况

变量名的规则

案例 ：交换两个变量

变量的总结

数据类型

数据类型的分类

Number

isNaN()函数

String(字符串类型)

转义符

String案例

字符串扩展

年龄案例

Boolean布尔值

Undefined

Null

typeof

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

字面量

数据类型转换

转换成字符串类型

转换成数值型

年龄案例

简单的加法器

Boolean（）

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

标识符 关键字 保留字

个人信息案例

总结

特别注意事项

已注销

引用和评论

Vue

Vue.js-Vue实例

2025年最新反编译微信小程序的教程及工具

你可能不知道的图片加载相关知识

Base64编码的“暗坑”：解密失败？可能是这些原因！

手写一个动态海洋和天空效果的vue hooks

原生electron起步-从零到一完成构建和打包

案例：交换两个变量

标识符关键字保留字