认识JavaScript

一.认识JavaScript

js书写的三种形式
在编写js代码之前，首先要认识到js代码在编写的页面中的作用，之前我编写的页面为静态页面，只能是通过HTML 和 CSS 代码实现一些静态功能和一些很简单的动态功能，比如使用hover添加给盒子让其有一些动画效果，但当我做电商网站时，想通过hover来实现一些商品展示效果的时候发现了我无法百分之百的还原原网页的选择效果，所以，JS才显得尤为重要。

二.变量

1.变量的命名
js通过定义变量来存储相应的字面量，实现对其值的更改，我学习了var变量和变量的命名，命名可以使用(a ~ z),(A ~ Z),(0 ~ 9)还有特殊符号(_和$)。
命名不可以使用数字开头，并且命名时应采用驼峰命名法，例如(myName)
2.变量的使用
要先声明一个变量 再对变量进行赋值操作

点击查看代码

var a = '我是凳子'

3.输出语句 我目前学习了三种输出方法

点击查看代码

prompt('')//提供一个输入框
alert('')//弹出一个警告框
console.log('')//在打印框输出结果

其中最为常用的是console.log这种输出方式，我通过网上参考别人的网站搭建发现alert和prompt这两种方式很少有被使用。

3.变量的数据类型

这个是重点
js的数据类型一种有七种 可以按照相关度分为三组，
第一组为
Number 数字类型
Boolean 布尔类型
String 字符串类型
第二组为
undefined 未定值变量的字面量
null 空值变量
第三组为
BigInt 任意大的整数
Symbol 符号类型

三简单案例

学以致用
1.首先先做一个简单地交换案例，需求为交换字面量

点击查看代码

var banana = '我是一个香蕉';

var apple = '我是一个苹果';

var temp//放置字面量的盒子;

temp = banana;//将banana的字面量赋给放置盒子

banana = apple ;//将apple的字面量赋值给banana
apple = temp; //将放置盒子中的字面量赋值给apple 完成交换

通过这个简单案例，让我掌握了些变量的意义，明白了变量之间的交换关系，和赋值方法。 2.在数字型变量的学习中，我学科一个简单地判断是否为数字的方法 isNaN() 需求：判断'12',12,'12px'是否为数字

点击查看代码

console.log(isNaN('22'))//false
console.log(isNaN(12))//flase
console.log(isNaN('12px'))
//true

isNaN的含义是not a number 判断是否不是数字，这个非常绕口，输出为true的时候就代表它不是一个数字，而输出为false的时候就是它是一个数字，这里有个问题，就是12和'12',后者在直观的时候是一个字符串，应该输出为true，但结果却是判断它是一个数字，查阅了CSDN上面的一篇文章 [isNaN](https://blog.csdn.net/weixin_39093202/article/details/84644674?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165469250416782350940986%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=165469250416782350940986&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~top_positive~default-1-84644674-null-null.142^v11^pc_search_result_control_group,157^v13^control&utm_term=isNaN&spm=1018.2226.3001.4187 "isNaN") 上面代码之所以返回false，原因是这些数组能被Number函数转成数值。

变量之间也是可以拼接的，通过使用"+"实现拼接的目的，也可以使用"${}"来对变量进行拼接，

案例三，出一个输入框（prompt),让用户输入年龄（用户输入)把用户输入的值用变量保存起来,把刚才输入的年龄与所要输出的字符串拼接 （程序内部处理使用alert语句弹出警示框（输出结果）

点击查看代码

var age = prompt('你今年多少岁了')
     alert('我掐指一算你今年'+age+'岁了')
    //  在使用``这个符号是才可以使用${}来替代+号
     alert(`我掐指一算你今年${age}岁了`)

     var str2 = `我今年${age}岁了`
     console.log(str2)

学习布尔类型的转换

点击查看代码

var demo;
console.log(demo);
console.log(demo + 1);
console.log(demo + "hello");

var space = null;
console.log(space);
console.log(space + "hello");
console.log(space + 1);

var bool1 = true;
var bool2 = false;
console.log(bool1 + 1);
console.log(bool1 + "hello");
console.log(bool2 + 1);
console.log(bool2 + "hello");
console.log(bool1 + bool2);

// 1. 布尔类型 只有两个值， true 和 false 表示真或者假
var flag = true;
var flag1 = false;

// 2. Boolean 参与运算  true 当作1 ， false 当作0
console.log(true + 1); // 2
console.log(false + 1); // 1
console.log(true + "1"); // true1
console.log(true + false); // 1+0 = 1

//  undefined 未定义
var demo; // 声明变量未赋值
console.log(demo);

console.log(undefined + "pink"); // 'undefinedpink'
// undefined 和数字相加 得到 NaN  / not a number
console.log(undefined + 1); // NaN

// null 空值
console.log(null + "pink"); // nullpink
console.log(null + 1); // 1

计算年龄的案例
需求为弹出一个输入框（prompt)，让用户输入出生年份 （用户输入）
把用户输入的值用变量保存起来，然后用今年的年份减去变量值，结果就是现在的年龄 （程序内部处理）弹出警示框（alert) ， 把计算的结果输出 （输出结果）

点击查看代码

var birth; birth = prompt("请输入你出生的年份"); var a = 2022-parseInt(birth) alert('你今年'+a+'岁了');