当前位置：首页 > news >正文

前端---认识JS

news 来源：原创 2024/5/8 17:00:45

文章目录

什么是JS？
JS的应用
JS与HTML结合的方式
- 内联式
- 内嵌式
- 外部式
JS的注释
JS的弹窗
JS的输出
JS的变量
JS的基本数据类型
- 数字类型：number
- 字符串类型：string
- 布尔类型：boolean
- undefined类型
- null类型
JS的运算符
- 算术运算符
- 逻辑运算符
- 其他运算符

什么是JS？

JS全称是JavaScript，是一门专门用来开发前端的编程语言，它用来描述页面的行为。它和Java完全不同，起这个名字某种程度上来说是在蹭Java的热度。

JS的应用

网页开发，做各种厉害的特效
网页游戏
服务器端的开发，借助JS的引擎 v8 worker，即node.js
开发桌面程序，使用Electron框架
移动端APP开发

JS与HTML结合的方式

内联式

//直接写在html元素内部，放到标签的特殊属性中
<input type="button" value="点我一下" onclick="alert('haha')">

注：

JS中的字符串常量既能用‘’表示，又能用“”表示
html中推荐使用“”，js中推荐使用‘’

内嵌式

//使用script标签写在html的body里
<body><script>alert("haha");</script>
</body>

外部式

//把js代码写在外部的 .js文件里，通过script标签引入
<script src="hello.js"></script>

注：这种情况下script标签中间不能写代码，必须空着。

JS的注释

方式一：
/*这是一种注释*/方式二：推荐
//这又是一种注释

JS的弹窗

alert("haha");

注：在前端页面弹出弹窗，内容是 haha

JS的输出

console.log('hello world');

注：在前端的控制台输出内容。类似于Java的System.out.println

JS的变量

var name = '张三';
let age = 18;

注：

var和let都是关键字，仅仅表示后边的名字是个变量，不代表类型。
变量也是有类型的，具体的类型 = 后面值的类型。比如：name是String类型，age是int类型
let是新式的写法，var是老式的写法。推荐使用let

JS的基本数据类型

数字类型：number

//整数
let a = 10;
//浮点数
console.log(1/2);
//无穷大：Infinity
console.log(1/0);
//负无穷大：-Infinity
console.log(-Number.MAX_VALUE)
//非数字：Nan
console.log('hello'-10);

注：在JS中使用数字类型来表示数值，不区分整数和浮点数。

字符串类型：string

let a = 'hello';
let b = 'world';
//求字符串长度
console.log(a.length);
//字符串拼接
console.log(a + b);

注：如果字符串中已经包含了引号，使用转义字符进行转义再使用。

布尔类型：boolean

let a = true;
let b = false;

注：

在JS中，可以用0表示假，1表示真。
true和false也可以参与运算，分别表示1和0

undefined类型

var a;
console.log(a - 10);

注：

变量未初始化会undefined
字符串和数字相减会undefined
字符串和undefined相加会进行字符串拼接；数字和undefined相加是Nan

null类型

let a = null;

注：null表示当前变量被定义但是没有值；undefined表示当前变量未被定义。

JS的运算符

算术运算符

let a1 = 10;
let a2 = '10';
console.log(a1==a2);    //true
console.log(a1===a2);   //false
console.log(a1!=a2);    //false
console.log(a1!==a2);   //true

注：

JS是弱类型的语言，在比较时会自动进行类型转换。
使用 == 和！= 会让变量进行类型转换
使用 === 和！== 不会让变量进行类型转换

逻辑运算符

		// 如果value为真则value1的值为value；如果为假，value1的值为右侧表达式 1let value = 1;let value1 = 10;value1 = value || 1;console.log(value1);// 如果value为假则value2的值为value；如果为真，value2的值为右侧表达式 5let value2 = value && 5;console.log(value2);