JavaScript 学习笔记
JavaScript 介绍
权威网站：
js 在三件套中的位置
JavaScript 是 web 开发人员必须学习的 3 门语言中的一门：
- HTML 定义了网页的内容
- CSS 描述了网页的布局
- JavaScript 控制了网页的行为
js是什么
JavaScript 是脚本语言
-
JavaScript 是一种轻量级的编程语言。
-
JavaScript 是可插入 HTML 页面的编程代码。
-
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
JS 组成
-
ECMAScript: 规定了js基础语法核心知识。 比如：变量、分支语句、循环语句、对象等等
-
Web APIs :
- DOM 操作文档，比如对页面元素进行移动、大小、添加删除等操作
- BOM 操作浏览器，比如页面弹窗，检测窗口宽度、存储数据到浏览器等等
js 书写位置
-
内部 js
script标签写在
</body>上面我们将
<script>放在HTML文件的底部附近的原因是浏览器会按照代码在文件中的顺序加载HTML 如果先加载的JavaScript期望修改其下方的HTML，那么它可能由于HTML尚未被加载而失效 因此，将JavaScript代码放在HTML页面的底部附近通常是最好的策略<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- 内部js --> <script> // 页面弹出警示框 alert('你好js') </script> </body> </html> -
外部 js
外部JavaScript会使代码更加有序，更易于复用，且没有了脚本的混合，HTML也会更加易读，因此这是个好的习惯
外部 js 文件
alert('我是外部js文件')导入外部 js 文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script src="./js/my.js"> // 中间不要写内容了，写了也会被忽略 </script> </body> </html> -
内联 js
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <button onclick="alert('hello')">clickMe</button> </body> </html>
JavaScript 语法
js 注释 & 结束符
-
// 单行注释 ctrl + /
-
/* */ 多行注释 shift+ alt + a
-
结束符
;可写可不写 主张不写
js 输入和输出语法
- 输出语法：
document.write：在body中写内容alert弹窗console.log控制台输出语法，程序员调试使用
- 输出语法：
prompt对话框输入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 1.文档输出内容
document.write('我是div标签')
document.write('<h1>我是标题</h1>')
// 2.控制台打印输出 给程序员看
console.log('test')
// 3.输入语句
prompt('请输入你的年龄')
</script>
</body>
</html>
变量
基本使用
let 变量名
实例：
let age
age = 18
age = 19 // 可修改
alert('age: ' + age) // + 字符串拼接
let uname = 'Kingston'
规范：小驼峰 userName
变量拓展：数组(Array)
let 数组名 = [数据1，数据2，......数据n] // 里面的数据类型可以不同
document.write (数组名[n-1]) // 通过下标访问数组元素
document.write (数组名.length) // 求数组长度
常量
const 常量名 = 值 // 赋值后不可修改
数据类型
js 是弱数据类型语言，只有赋值了才能知道具体数据类型是什么
-
基本数据类型
number、string、Boolean、undefined、null
-
引用数据类型
object(对象)
number
运算符
+ - * / %
NaN(Not a number) 计算错误
console.log('Kingston' - 2) // NaN
console.log(NaN - 2) // NaN 和谁操作都返回NanN
string
可以用
""''``
字符串拼接：+
模板字符串：
外面用 `` 包含 ，使用${变量名}
let age = 8
document.write(`我今年${age}岁了`)
其他三种类型
-
boolean 只有
truefalse -
声明一个变量未给值则为 undefined
let vlaue -
赋值了，但内容为空则为 null
let obj = null
检测数据类型
typeof 关键字
let name = 'Kingston'
// 1.作为运算符
document.write(typeof name)
// 2.作为函数
document.write(typeof(name))
类型转换
注意：js 中表单取过来的值都为 string 类型
隐式转换
document.write(+'123') // 自动转为 123 (number)
let num = +prompt('请输入你的编号') // 转换为number
......
显式转换
类型(变量名)
let num = '123'
document.write(Number(num))
console.log(parseInt('12px')) // =>12 将字符串开头中的整形数字提取出来
console.log(parseFloat('12.34px')) // => 12.34
总结
通过本次学习，熟悉了 js 的基本语法知识：
注释、输入输出、变量、常量、类型转换
