JavaScript学习笔记(一)
JavaScript 学习笔记(一)
文章目录
- JavaScript 学习笔记(一)
-
- JS介绍
-
- JS的组成
- 体验JS
- JS书写位置
-
- 内部JavaScript
- 外部JavaScript
- 内联JavaScript
- JavaScript怎么写
-
- 注释
-
- 单行注释
- 多行注释
- 结束符
- JavaScript输入输出语法
-
- 输出语法
-
- 语法1：
- 语法2：
- 语法3：
- 输入语法
- JavaScript代码执行顺序
- 变量
-
- 变量的基本使用
-
- 变量的声明
- 变量的赋值
- 变量的初始化
- 更新变量
- 声明多个变量
- 用变量保存用户的输入
- 变量命名规则与规范
-
- 规则
- 规范
- 数组
- 常量
- 数据类型
-
- 分类
- 数字型
- 字符串类型
-
- 字符串拼接
- 模板字符串
- 布尔型
- 未定义类型
- 空类型(null)
- 数据类型检测
- 类型转换
-
- 隐式转换
- 显示转换
黑马程序员JavaScript视频学习笔记
JS介绍
JS是一种运行在客户端(浏览器)的编程语言，实现人机交互效果。可以实现
- 网页特效
- 表单验证(验证输入是否合法)
- 数据交互(获取后台数据，渲染到前端)
- 服务器编程(Node.js)
JS的组成
- ECMAScript：规定JS基础语法
- Web APIs
- DOM：页面文档对象模型，操作文档，比如对页面元素进行移动、大小、添加删除等操作
- BOM：浏览器对象模型，操作浏览器，比如页面弹窗、存储数据到浏览器等
体验JS
<head>
<style>
.pink {
background-color: pink;
}
style>
head>
<body>
<button>按钮1button>
<button>按钮2button>
<button>按钮3button>
<button>按钮4button>
<script>
let bts = document.querySelectorAll('button')
for(let i = 0; i < bts.length; i++) {
bts[i].addEventListener('click', function(){
document.querySelector('.pink').className = ' '
this.className = 'pink'
})
}
script>
body>
JS书写位置
- 内部JavaScript
- 外部JavaScript
- 内联JavaScript
内部JavaScript
直接卸载html文件里，用script标签包裹，写在/body上面
<body>
<script>
//弹出警示框
alert('你好，js')
script>
body>
外部JavaScript
首先讲JS写到一个单独的文件中，比如叫my.js然后引入
<boby>
<script src='./my.js'>script>
boby>
内联JavaScript
<boby>
<button onclick="alert('内联js')">
hhh
button>
boby>
JavaScript怎么写
注释
单行注释
// 这是一个注释
快捷键
ctrl + /
多行注释
/*
这是多行注释
*/
快捷键
shift + alt + A
结束符
JS代码每一句代码后面没有强制要求的结束符，但是可以在每一行代码后面可以用分号作为结束符，可以根据团队需要来进行选择
JavaScript输入输出语法
输出语法
语法1：
<body>
<script>
document.write('Hello World')
document.write("我是标签"
)
script>
body>
语法2：
页面中打印输出
alert('输出内容')
语法3：
控制台输出语法，程序员调试使用
console.log('控制台打印')
输入语法
prompt('请输入你的姓名')
效果：显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字
JavaScript代码执行顺序
- 按HTML文档流顺序执行JavaScript代码
alert()和prompt()会跳过页面渲染先被执行
变量
变量是计算机中用来存储数据的容器
变量的基本使用
变量的声明
语法：let 变量名
let age
变量的赋值
语法：变量 = 字面量/数据
age = 18
console.log(age)
变量的初始化
在声明的同时直接赋值
let age = 18
更新变量
let age = 18
age = 19
更新的时候不能
let age = 19，因为不能重复声明变量
声明多个变量
语法：中间用逗号隔开
let age = 18, uname = 'minxin'
不推荐，可读性较差。多行变量更容易阅读
用变量保存用户的输入
let uname = prompt('请输入姓名')
let address = prompt('请输入地址')
let num = prompt('请输入购买数量')
变量命名规则与规范
规则
- 不能用关键字作为变量名：比如
let - 只能用下划线、字母、数字、$符号，不能用数字开头
- 严格区分大小写：比如
Age和age是两个不同的变量
规范
- 起名要有意义
- 小驼峰命名法：第一个单词首字母小写，后面每个单词首字母大写，例如：
userName
数组
语法：let 数组名 = [数据1, 数据2, ..., 数据n]
let arr = [10, 20, 30]
使用数组，从0开始编号
console.log(arr)
console.log(arr[0])
数组长度
console.log(arr.length)
常量
使用const声明的变量称为常量，常量不允许重新赋值，声明的时候必须初始化
const G = 9.8
变量命名规则与规范与变量相同
数据类型
JS是弱数据类型的语言
分类
- 基本数据类型
- 数字型
- 字符串型
- 布尔型
- 未定义型
- 空类型
- 引用数据类型
- object对象
数字型
可以是整数、小数、正数、负数。可以使用各种数字运算符。
| 运算符 | 含义 | 示例代码 | 输出 |
|---|---|---|---|
| + | 求和 | 3 + 2 |
5 |
| - | 求差 | 5 - 2 |
3 |
| * | 求积 | 4 * 2 |
8 |
| / | 求商 | 6 / 3 |
2 |
| % | 取模（余数） | 7 % 3 |
1 |
字符串类型
通过单引号或双引号或反引号包裹的数据都叫字符串，单引号和双引号本质没有区别
let str = 'pink'
let str2 = "pink"
let str3 = `pink`
let str4 = ' ' // 这种情况是空字符串
字符串拼接
console.log('min'+'xin')
let age = 19
console.log('我今年' + age)
模板字符串
更方便的字符串拼接
语法：
- 必须是反引号包裹
- 用
${}包裹变量
let age = 18
console.log(`我今年${age}岁了`)
布尔型
只有True和False两种类型
let isCool = flase
未定义类型
只有一个值undefined，如果只声明了变量，没有赋值，变量默认值为undefined
let num
console.log(num)
空类型(null)
null表示赋值了，但是内容为空，数据类型为对象
let obj = null
数据类型检测
通过typeof关键字，有两种形式
typeof x
typeof(x)
类型转换
因为通过prompt获得的输入默认是字符串型，而有些时候我们需要其他数据类型，所以我们需要类型转换。数据类型就是将一种数据类型转换成另一种隐式转换
隐式转换
在某些运算符被执行时，系统内部自动将数据类型进行转换。比如
- +两边有一个字符串，就会讲另一个转换为字符串
- -、*、/则会将两边转换为数字类型
+ '123'会将后面的字符串转换为数字类型
转类型不明确，需要经验总结
显示转换
- 转换为数字型
Number(变量名)parseInt()只保留整数parseFloat()可以保留小数
- 转换为字符串：
String() - 转换为布尔型
boolean()!!value
Number("123") // 123
Number("123.45") // 123.45
Number("abc") // NaN（非数字）
parseInt("123px") // 123
parseInt("12.34") // 12（只保留整数部分）
parseInt("abc") // NaN
parseFloat("123.45") // 123.45
parseFloat("12px") // 12
parseFloat("abc") // NaN
String(123) // "123"
String(true) // "true"
String(null) // "null"
String(undefined) // "undefined"
Boolean(0) // false
Boolean("") // false
Boolean(null) // false
Boolean(undefined) // false
Boolean("hello") // true
Boolean(123) // true
!!0 // false
!!"text" // true
!!null // false
!![] // true （空数组也为真）
!!{} // true （空对象也为真）