.Javascript介绍
JavaScript(简称“JS”)是当前最流行、应用最广泛的客户端脚本语言,用来在网页中添加一些动态
效果与交互功能,在 Web 开发领域有着举足轻重的地位。
JavaScript 与 HTML 和 CSS 共同构成了我们所看到的网页
HTML 用来定义网页的内容,例如标题、正文、图像等
CSS 用来控制网页的外观,例如颜色、字体、背景等
JavaScript 用来实时更新网页中的内容,例如从服务器获取数据并更新到网页中,修改某些标签的
样式或其中的内容等,可以让网页更加生动。
JS使用方法
<title>Document</title>
<!-- 外部式--在head头部标签中 通过script引入t同级别 .js 结尾的js文件 script 空格 src ./-->
<!-- 或者 ../ 找到外部js文件 -->
<script src="这里 ./ -- ../ 快速找到js文件"></script>
</head>
<body>
<!-- 内部式--在body内部写script标签 在标签内写js代码 -->
<script>
// 这里写js代码
</script>
</body>
JS输出
<body>
<script>
// print() print 可以将当前网页内容打印
// console.log 在控制台输出内容 右击 检查 控制台
console.log('啊实打实大师大师');
// alert("hello js") 在网页直接弹出
alert('打开网页自动弹出')
</script>
</body>
JS注释
<body>
<script>
// 这是单行注释
/*
这是多行注释
*/
</script>
</body>
JS变量
<body>
<!-- JS不需要指定变量的类型,JS的变量类型由他的值来决定 -->
<script>
// 声明变量let 变量赋值 简写 多个变量赋值 打印
// let a; a='哈哈' let b='哈哈' let c=10,d=20 console.log(a,b,c,d);
// var const
var aa = '你好'
const ss = 'nihao'
console.log(aa,ss);
/*let用于定义变量 const用来定义常量 var可以先使用在定义*/
</script>
</body>
JS数据类型
<body>
<!-- 分为基础类型 引用类型 -->
<!-- 基本数据类型 字符串型 (String)数值型 (Number)布尔 (Boolean)undefined (Undefined)null (Null)-->
<script>
// String用于表示一个字符序列,即字符串。字符串需要使用 '单引号' 或 "双引号" 括起来。
let a = "这是字符串a"
let b = '这是字符串b'
// Number 类型用来表示整数和浮点数,最常用的功能就是用来表示10进制的整数和浮点数。数值类型有颜色
// 整数
let c = 10
// 浮点数
let d = 10.01
// Boolean布尔型也被称为逻辑值类型或者真假值类型 首字母 t f 为小写
// true 真
let aa = true
// false 假
let as = false
// 在使用 let 声明变量但未对其加以初始化赋值时,这个变量的值就是 undefined
// 变量声明 没有赋值 就会打印undefined
let aq;
console.log(a);
// Null空,表示空对象,一般用来初始化变量
// 当变量需要为空的时候 就可以写null
let ab = null
let ba = null
/*引用数据类型--数组 (Array)是一组按顺序排列的数据的集合,数组中的每个值都称为元素,
而且数组中可以包含任意类型的数据。在 JavaScript 中定义数组需要使用方括号 [ ]
数组中的每个元素使用逗号进行分隔 跟python中列表相似*/
let ar = [1, 2, 3, 4]
// 通过索引取值
// 引用数据类型
// 1.数组 []表示
// 我们可以通过索引取值
let arr = [1, 2, 3, 4, 5, 6]
console.log(arr[0]);
// 不支持负数索引//逆向索引
console.log(arr[-2]);
// 获取数组的长度 length
// 从数组最后添加和删除数据
// push() 方法用于向数组的末尾添加一个或多个元素
// pop() 方法用于删除并返回数组的最后一个元素
arr.push(5);
console.log(arr);
arr.pop();
console.log(arr);
console.log(arr.length);
// 根据下标添加和删除元素 splice
arr.splice(start, num, element1, ...elementN)
/*参数解析:
1、start:必需,开始删除的索引
2、num:可选,删除数组元素的个数
3、elementN:可选,在start索引位置要插入的新元素
此方法会删除从start索引开始的num个元素,并将elementN参数插入到start索引位置*/
let arra = [1, 2, 3, 4, 5]
arra.splice(1, 0, "苹果")
console.log(arra);
arra.splice(1, 2)
console.log(arra);
arra.splice(1, 0, "鸭梨", "香蕉")
console.log(arra);
//对象 (Object)在 JavaScript 中,对象是一种复合数据类型,用于存储键值对。对象可以包含各种类型的数据
let bq = {
name: "景明",
age: 18,
sex: "男",
}
// 对象取值 需要通过.来取值
console.log(bq);
console.log(bq.name);
console.log(bq.age);
判断类型
// typeof 判断类型 场景:基本数据类型的判断
let aw = '我是字符串类型'
let bw = 10
let cw = undefined
let dw = null
let ew = true
console.log(typeof aw); // string
console.log(typeof bw); // number
console.log(typeof cw); // undefined
console.log(typeof dw); // 如果值是null 打印会为object类型
console.log(typeof ew); // boolean
运算符
<body>
<script>
// 运算符 字符串拼接 字符串拼接使用"+"运算符
let ae = 33
let be = 40
// 77
console.log(ae + be);
let cq = "33"
let dq = 44
// 字符串和数字进行拼接,自动把数字类型转换成字符串
// 3344
console.log(cq + dq);
// 算数运算符 用于表达式计算。加+ 减- 乘* 除/ 自增++ 自减 --
let a = 10
let b = 20
console.log(a + b); // 30
console.log(a - b); //-10
console.log(a * b); //200
console.log(a / b); //0.5
console.log(++a); //11
console.log(--b); //19
// 赋值运算符 赋值运算符用于给 JavaScript 变量赋值。= += -=
let aq = 10
let bq = 20
console.log(aq = 100); //结果 100
console.log(aq += bq); // a=a+b 结果 30
console.log(aq -= bq); // a=a-b 结果 -10
// 比较运算符 == 判断两边的值是否相等 不判断类型 如果相等返回true,否则返回false 只要值相等就相等
let aw = 30
let bw = "30"
console.log(aw == bw); //值相等就会相等 true
// != 用来判断两个值是否不相等 如果不相等返回true,否则返回false
let aa = 30
let bb = "30"
console.log(aa != bb); //值相等就会相等 false
// === 判断两边的值 和数据类型是否相等 ---判断全等
let ar = 30
let br = "30"
console.log(ar === br); // false
// 值和类型都相等就会相等 相等返回 true
</script>
</body>