javascript是一种运行在客服端(浏览器)的编程语言,实现人机交互效果的语言
作用(能做什么)
网页特效(监听用户的一些行为让网页做出对应的反馈)
表单验证(针对表单数据的合法进行判断)
数据交互(获取后台的数据,渲染到前端)
服务器编程(node.js)
js初体验
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.aqua {
background-color: aqua;
}
</style>
</head>
<body>
<button class="aqua">按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<script>
// 设置一个变量btns,并且给它赋值document(文档).queryselectorall(selector选择,all全部)的botton
let btns = document.querySelectorAll('button')
for (let i = 0; i < btns.length; i++) {
// addEventListener添加事件监听 (事件为点击事件,函数里面this.className=''aqua)
btns[i].addEventListener('click', function () {
// 清空先前的按钮颜色
document.querySelector('.aqua').className = ''
this.className = 'aqua'
})
}
</script>
</body>
</html>
js书写位置:
内联、内部、外部三个位置的书写位置。
js结束符:
js的输入和输出:
变量:变量是计算器存储数据的"容器"
变量的基本使用:
1.声明变量;
2.变量赋值(装东西)
要想使用变量,首先需要创建变量(声明变量)
语法:
let 变量名
声明关键字 变量名
变量的初始化:
声明变量并且直接赋值。
let不允许多次声明一个变量
同时声明多个变量:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// let name声明变量 =变量赋值prompt('请输入你的姓名') 意思就是把这个数据存储到变量容器里面
// document.write(name)输出变量容器里面的数据
let name = prompt('请输入你的姓名')
document.write(name)
</script>
</body>
</html>
变量的本质:
内存:计算器中存储数据的地方,相当于一个空间
变量:是程序在内存中申请开辟的一个用来存储数据的小空间
变量名规则:
不能用关键字作为变量名
只能用下划线、字母、数字、$来组成,且数字不能开头
字母严格区分大小写,如Age和age是不同的变量
规范:
起名字要有意义
遵循小驼峰命名法
let和var的简单区别:
var声明:
可以先使用 再声明(不合理,相当于吃完别人的东西,才告诉别人)
var声明过的变量可以重复声明(不合理,内存名字相同,不合理)
比如变量提升、全局变量、没有块级作用域等等,var不太好,落后的声明关键字!
以后声明变量统一使用let !!!
数组:
值类型(基本数据类型):字符串型(String)、数字型(Number)、布尔型(Boolean)、空(Null)、未定义型(undefined)、标志型(symbol)
引入数据类型(复杂数据类型):对象(Object)、数组(Array)、函数(Function),还有两个特殊的对象:正则(RegExp)和日期(Date)
通过单引号(' ')、双引号(" ")或者反引号(` `)包裹的数据都叫做字符串,单引号和双引号没有本质上的区别,推荐使用单引号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let num=123
let str='123'
// 反引号
let str1=`pan`
console.log(num);
console.log(str);
console.log(str1);
console.log('num');//打印出来的是num为字符串类型
/* 外单内双 或者 外双内单 */
console.log("潘'xianyuan'");
console.log('潘"xianyuan"');
</script>
</body>
</html>
模板字符串:(非常重要!!!渲染数据常用!!!)
作用:
拼接字符串和变量
没有它之前,拼接字符串比较麻烦
符号:
在英文输入 反引号 ``
内容拼接变量时,用${}包裹变量
布尔类型(boolean)
表示肯定或者否定时在计算机中对应的是布尔类型数据
只有两个值,分别是true(真)和false(假)
工作中的使用场景:
我们开发中经常声明一个变量,等待传送过来的数据。
如果我们不知道这个数据是否已经传递过来,此时我们可以通过检测这个变量是不是undefined,就能判断用户是否有数据传递过来。
null(空类型)
null表示值为空
null和undefined的区别:
undefined表示没有赋值
null表示赋值了,但是内容为空
把null作为尚未创建的对象
将来有个变量里面存放的是一个对象,但是对象没创建好,不知道给什么值,可以先给个null