一.JavaScript介绍
基础概念1.js是什么:是一种运行在客户端(浏览器)的编程语言,实现人机交互效果。
2.js作用(做什么):网页特效 (监听用户的一些行为让网页作出对应的反馈) 表单验证 (针对表单数据的合法性进行判断) 数据交互 (获取后台的数据, 渲染到前端) 服务端编程 (node.js)
3.js组成(有什么):ECMAScript(规定了js基础语法核心知识)Web APIs :DOM,BOM(DOM 操作文档,比如对页面元素进行移动、大小、添加删除等操作 BOM 操作浏览器,比如页面弹窗,检测窗口宽度、存储数据到浏览器等等
1.js书写位置
1.行内(点击中奖 )
2.内部()
3.外部( )外部 js 标签中间不要写代码,否则会被忽略
2.输入和输出的语法(3+1)
<script>
// 1.在页面上输出内容,在页面可以输出标签(输出)
document.write('我是一只来自<em> 北方</em>的狼')
// 2.弹窗(输出)
alert('hello')
// 3.控制台打印(输出)
console.log('我爱你')
// 4.输入语法,也会弹窗(输入)
prompt('请输入您的银行卡密码')
</script>
3.字面量(literal) (4种)
1.1000 数字字面量
2 ' ' 字符串字面量
3 [ ] 数组字面量
4 { } 对象字面量
二.变量
1.变量:计算机存储数据的"容器"
变量不是数据本身,仅仅是一个用于储存数据的容器
2.变量的基本使用
2.1声明变量: let:变量名
let不允许多次声明一个变量
let一次声明多个变量,用逗号隔开(不推荐)let一行只声明一个变量,为了代码的可读性
2.2变量赋值: = 赋值运算符
2.3弹框输出变量: alert (变量)
2.4变量的初始化:let height=170(声明变量+赋值)
2.5案例
<!-- 1. 请输入你的名字 -->
<script>
// 将用户prompt输入的信息保存到uname这个变量里来
let uname = prompt('请输入您的姓名')
// 在页面输出uname变量
document.write(uname)
</script>
<!-- 2. 交互2个变量值 -->
<script>
let jj='居居'
let xhz='侯磊'
// 1.准备1个临时变量
// 2.把jj的值赋值给temp
let temp=jj
jj = xhz
xhz =temp
console.log(jj,xhz);
</script>
2.3变量的本质
纯概念目标:能够说出变量的本质是什么
内存: 计算机中存储数据的地方,相当于一个空间
变量本质: 是程序在内存中申请的一块用来存放数据的小空间
2.4变量名命名规则与规范
- 不能用关键字。例如:let、var、if、for等(规则)
- 只能用下划线、字母、数字、$组成,且数字不能开头(规则)
- 字母严格区分大小写(规则)
- 起名要有意义(规范)
- 遵守小驼峰命名法(第一个单词首字母小写,后面每个单词首字母大写。)(规范)
2.5变量拓展--数组(Array)
数组 (Array) —— 一种将 一组数据存储在单个变量名下
数组元素,下标,长度
<script>
// 声明空数组
let abc = []
// 声明有数据的数组,组里面的每项数据对应的编号
// 索引(下标) 0 1 2 3
let names =['小明','小红','小米','小刚']
// 获取数组里面的某个数据 数组名[索引]
console.log(names[0]);//小明
console.log(names[2]);//小米
// 数组长度 数组里面元素的个数 数组名.length
console.log(names.length);//4
</script>
三.常量 const
常量:当某个变量永远不会改变时用const赋值,不用let
<script> const π = 3.1415926 console.log(π) </script>注意:常量不允许重新赋值,声明的时候必须赋值(初始化)
四.数据类型
基本数据类型(4)+引用数据类型(1)
区别概念JS 是弱数据类型,变量到底属于那种类型,只有赋值之后,我们才能确认
Java是强数据类型 例如 int a = 3 必须是整数
1.number 数字类型 (整数、小数、正数、负数...)
1.算数运算符: + -* /求商 %取模 (取余数,开发中经常作为某个数字是否被整除)
注意运算优先级(从左往右执行) :
( )>* / %>+ -
2计算圆的面积
let r = prompt('请输入圆的半径')
let π = 3.14
let area = π * r * r
document.write(area)
</script>
3NaN(not a number)
- NaN 代表一个计算错误。它是一个不正确的或者一个未定义的数学操作所得到的结果
- NaN 是粘性的。任何对 NaN 的操作都会返回 NaN
2 .string 字符串型
通过单引号('') 、双引号( "")或反引号( ``) 包裹的数据都叫字符串
推荐使用单引号''
单引号/双引号可以互相嵌套,但是不以自已嵌套自已
必要时可以使用转义符``,输出单引号或双引号
字符串拼接 + (数字相加,字符相连)
模板字符串:拼接字符串和变量 ${变量名} 代替+
<script>
let uname=prompt('请输入您的姓名')
let age=prompt('请输入您的年龄')
document.write('我是'+uname+',我今年'+age+'岁了')//不建议
document.write(`我是${uname},我今年${age}岁了`)//模板字符串
</script>
3.boolean 布尔型 (ture/false)
4.undefined未定义型
只声明变量,不赋值的情况下,变量的默认值为 undefined
开发场景:如果检测变量是undefined就说明没有值传递过来
5.null空类型
代表"值未知",赋值了,存放的是一个对象,但是内容为空(对象字面量:4种字面量之一)
开发场景:如果一个变量里面确定存放的是对象,如果还没准备好 对象,可以放个null
6.检测数据类型console.log(typeof 变量名)
这种写法的typeof是作为运算符 另一种写法——函数形式: typeof(x)
控制台语句:数字型和布尔型颜色为蓝色,字符串和undefined颜色为灰色
console.log(
typeof '1'+ 1) //返回结果是string``1