一、什么是 JavaScript
(一)介绍
是一种运行在浏览器的编程语言,进行人机交互
(二)可以做什么
可以做网页特效,表单验证,进行数据交互,还有服务端编程node.js
(三)组成
由ECMAScript 和 Web APIs组成
其中Web APIs 由DOM 和 BOM 组成
ECMAScript : js基础语法知识
Web APIs :
DOM : 操作文档 对页面元素进行移动 改变大小 留言 添加删除按钮功能等
BOM : 操作浏览器 弹窗 检测窗口宽度 存储数据等
JavaScript资料网站: http://developer.mozilla.org/zh-CN/docs/Web/JavaScript
二、JavaScript 书写位置
(一)内部 JavaScript
写在html文件里,两边用script标签包住,且规范写在</body>上面,因为得先有前面的html标签再有script标签进行操作,是有顺序的。
示例:弹出警示框显示你好
<body>
<script>
alert('你好')
</script>
</body>
(二)外部 JavaScript
<body>
<script src="start.js">不写内容</script>
</body>
(三)内联 JavaScript
目前不需要
(四)注释
单行注释:ctrl + /
多行注释:shift + alt + a
三、JavaScript 语法
(一)输出语法
1.document.write()
<body>
<script>
document.write('123')
document.write('<h1>123<h1>')
</script>
</body>
2.alert 弹出警告对话框
<body>
<script>
alert('你好')
</script>
</body>
3.console.log() 调试使用
<body>
<script>
console.log('123')
</script>
</body>
(二)输入语法
1.prompt()
<body>
<script>
prompt('请输入你的年龄: ')
</script>
</body>
四、JavaScript 代码执行顺序
从上至下按顺序执行,但会优先执行 alert() 和prompt()
五、字面量
就是所有的能看到的元素是什么类型的数据
1000是数字
‘哈哈哈哈’是字符
[]数组
{}对象
六、JavaScript 变量介绍
(一)变量是什么
变量是存储数据的容器
(二)变量的使用
1.先声明变量
let + 变量名
2.赋值
age = 18
<body>
<script>
let age
age = 18
console.log(age)
</script>
</body>
3.声明赋值同时进行
<script>
let age = 18
</script>
如果想改变age的值直接 age = 其他值就行 不用再写一遍let,会报错,因为声明过了。
(三)变量的本质
在计算机内存中开辟一块空间,通过变量名能找到那块儿空间
(四)变量的命名规范
1.不能用关键字
不能用let var 等
2.只能用下划线 字母 数字 $ 组成 数字不能开头
3.严格区分大小写
4.起名要有意义
5.遵顼小驼峰命名法
第一个单词字母小写 后面单词的首字母大写 useName
(五)let 和 var 的区别
基本不用var
var可以先使用再声明
var声明过的变量可以重复声明
而let不是 必须严格按顺序进行
<body>
<script>
var age
console.log(age)
age = 18
</script>
</body>
七、JavaScript 数组
(一)语法
let 数组名 = [数据1,数据2,...,数据n]
和c语言一样
八、JavaScript 常量
(一)概念
使用const声明的变量 当这个变量永远不会改变的时候就可以使用常量const来声明(例如),而不用let 具体使用规范和变量一致,const声明时必须指定值不能分开声明,而且常量不允许再次进行赋值。
<body>
<script>
const age = 18
</script>
</body>
九、JavaScript 数据类型
(一)基本数据类型
包含 number数字型 string字符串型 boolean布尔型 underfined未定义型 null空类型
1.数字型 number
正数 负数 整数 小数 都算数字型
JavaScript 是弱数据类型语言 由赋的值才知道数据是什么类型 let num不知道num是什么类型,let num = 18 才是整数类型
Java 是强数据类型语言 int num 则num里面一定是整数数据
数字型可以进行加减乘除取余数操作 + - * / %
NaN :意思是最后得到的不是数据类型 比如用一个字符串减去2最后得到的就是这个类型,任何对NaN操作都会返回NaN
2.字符串型 string
用‘’ “” 或者`包裹的数据就是字符串型 推荐使用单引号
已经用单引号包含的一段话里面不能再加单引号了,但是可以加双引号 (外单内双 外双内单)
字符串拼接:用 + 号就能实现字符串的拼接
<body>
<script>
let useName = '我是'
let person = '一个人'
console.log(useName + person)
</script>
</body>
字符和数字巧妙相连:
<body>
<script>
let useName = '我今年'
console.log(useName + 18)
</script>
</body>
模板字符串:用反引号和$加大括号来写`${}`
<body>
<script>
let name = '张三'
let age = 18
console.log(`大家好我叫${name}今年${age}岁了`)
</script>
</body>
3.布尔型 boolean
真假 真是true 假是false
<body>
<script>
let zhende = true
console.log(zhende)
</script>
</body>
4.未定义类型 undefined
如果只声明变量不进行赋值,变量的默认值为undefined
4.空类型 null
null 和 undefined 的区别
undefined 是没有对变量进行赋值
而 null 是对变量赋值了 但是内容为空
<body>
<script>
console.log(undefined + 1)
console.log(null + 1)
</script>
</body>
第一句返回NaN 因为一个位置的东西加1 也不知道是什么返回不是数据类型
第二句返回数字1 因为空加数字1 结果为数字1
(二)检测数据类型
1.作为运算符
typeof x 常见
2.函数形式
typeof(x)
<body>
<script>
let name = '张三'
console.log(typeof name)
</script>
</body>
(三)类型转换
用prompt()储存让用户输入的数据会默认为字符串类型的变量,所以想用别的类型就需要转换
1.隐式转换
使用运算符,系统内部自动将数据类型进行转换。
+ 号旁边只要有一个是 字符串就会把另一个转换成字符串。
- / * 只要一边有数字类型就会把另一个转换成数字类型变量。
+ 也能将字符转换成数字型 +‘123’ 123就变成数字类型的了
2.显式转换
Number(str)转换成数字 严格注意大小写
<body>
<script>
let str = prompt('请输入你的年薪')
console.log(Number(str))
let str = Number(prompt('请输入你的年薪'))
console.log(str)
let str = +prompt('请输入你的年薪')
console.log(str)
</script>
</body>
parseInt()只要整数部分
parseInt(‘12px’) 结果是12
parseInt(‘12.34px’) 结果是12 只要整数
parseFloat(‘12.34px’)结果是12.34 可以是浮点数 里面前面不能加别的 例如‘abc12.34px’就不能识别了返回NaN
(四)引用数据类型
包含 object对象
十、JavaScript 常见错误
const 声明的时候后面没赋值
没声明就使用变量
变量 或 常量被多次赋值
LAST:小练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h2 {
text-align: center;
}
table {
margin: 0 auto;
border-collapse: collapse;
border: 1px solid black;
}
td,
th {
padding: 10px 20px;
border: 1px solid black;
}
</style>
</head>
<body>
<h2>订单确认</h2>
<script>
let value = +prompt('请输入价格')
let amount = +prompt('请输入数量')
let address = prompt('请输入地址')
let all = value * amount
document.write(`
<table>
<tr>
<th>商品名称</th>
<th>商品价格</th>
<th>商品数量</th>
<th>总价</th>
<th>收货地址</th>
</tr>
<tr>
<td>小米</td>
<td>${value}</td>
<td>${amount}</td>
<td>${all}</td>
<td>${address}</td>
</tr>
</table >
`)
</script>
</body>
</html>
标签:console,log,第一天,age,JavaScript,学习,let,变量
From: https://blog.csdn.net/qq_63342197/article/details/136701108