JavaScript笔记Day01

2024年01月22日

一、实用软件推荐

1. 截图软件

Snipaste

重点快捷键	注意：如果f1和f3不好用，请用
f1 截图	fn + f1
f3 定在屏幕上	fn + f3
取色：shift切换	fn+eac键是”锁定功能“

2. 画图软件

Zoomlt

重点快捷键
ctrl + 1 放大
ctrl + 2 画图
画图的时候按住ctrl是矩形
画图的时候按住tab是椭圆
画图的时候按字母可以改变颜色：r红色 b蓝色 g绿色 p粉色 o橙色

3. 思维导图

XMind

重点快捷键
enter 同级
tab 下级

二、JavaScript介绍

简介

graph TD
A(JavaScript)==>B(ECMAScript)
A==>C(Web APIs)
C==>D(DOM)
C==>E(Bom)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

1. JavaScript
   是一种运行在客户端（浏览器）的编程语言，实现人机交互效果。
2. 作用
   网页特效（监听用户的一些行为让网页做出对应的反馈）
   表单校验（针对表单数据的合法性进行判断）
   数据交互（获取后台的数据，渲染到前端）
   服务端编程（node.js）
3. JavaScript的组成
   - ECMAScript:
     规定了js基础语法核心知识。
     比如：变量、分支语句、循环语句、对象等等。
   - Web APIs：
     DOM 操作文档，比如对页面元素进行移动、大小、添加删除等操作
     BOM 操作浏览器，比如页面弹窗，检测窗口宽度、存储数据到浏览器等

JS权威网站：[mdn](https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript)

4. 体验(按钮点击变色)

   ```html
   <body>
     <button class="pink">按钮1</button>
     <button>按钮2</button>
     <button>按钮3</button>
     <button>按钮4</button>
     <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>

JavaScript书写位置

内部JavaScript
直接在html文件里，用script标签包住
规范：script标签写在上面（放在最底端）
拓展：alert(‘你好，js’)页面弹出警告对话框
1
2
3
4
5
6
7
<body>

<script>
//页面弹出警告框
alert('你好，js')
</script>
</body>

外部JavaScript
代码写在以.js结尾的文件里
语法：通过script标签，引入到html页面中。

<body>
  <script src="./js/03-书写位置-外部.js">
    // 中间不要写内容（写了也不执行）
  </script>
</body>

1	alert('我是外部的JS文件')

内联JavaScript
代码标签写在标签内部
语法：

1 2	<body> <button onlick="alert('逗你玩')">点击我月薪过万</button>

JavaScript注释

单行注释
符号：//
作用：//右边这一行的代码会被忽略
快捷键：ctrl + /
块注释
符号：/* */
作用：在/* 和 */ 之间的所有内容都会被忽略
快捷键：shift + alt + A

JavaScript 结束符

作用：使用英文的 “ ; ” 代表语句结束。
实际情况：实际开发中，可写可不写, 浏览器(JavaScript 引擎) 可以自动推断语句的结束位置。
现状：在实际开发中，越来越多的人主张，书写 JavaScript 代码时省略结束符。
约定：为了风格统一，结束符要么每句都写，要么每句都不写（按照团队要求）。

<script>
	alert("书写1");
    alert("书写2")
</script>

JavaScript 输入输出语

概念:
输出和输入也可理解为人和计算机的交互，用户通过键盘、鼠标等向计算机输入信息，计算机处理后再展示结果给用户，这便是一次输入和输出的过程。
输出语法：
1
document.write('要输出的内容')
作用：向body语句输出内容

注意：如果输出内容写的是标签，也会被解析成网页元素
1
alert('要输出的内容')
作用：页面弹出警告对话框
1
console.log('控制台打印')
作用：控制台输出语法，程序员调式使用
输入语法：
1
prompt('请输入您的姓名：')
作用：显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字
JavaScript 代码执行顺序：
按HTML文档流顺序执行JavaScript代码
alert() 和 prompt() 它们会跳过页面渲染先被执行

字面量

在计算机科学中，字面量（literal）是在计算机中描述事/物。

三、变量

概念
变量是计算机存储数据的“容器”，它可以让计算机变得有“记忆”。
注意：变量不是数据本身，它们仅仅是一个用于存储数值的容器。可以理解为是一个个用来装东西的纸箱子。
使用
声明变量：
要想使用变量，首先需要创建变量（也称为声明变量或者定义变量）
1
let 变量名
声明变量有两部分构成：声明关键字、变量名（标识）
let 即关键字 (let: 允许、许可、让、要)，所谓关键字是系统提供的专门用来声明（定义）变量的词语
1
let age //age 即变量的名称，也叫标识符
变量赋值：
1
2
3
4
5
6
//1.声明一个age变量
let age
//2.age变量赋值18
age = 18
//3.输出age变量
alert(age)
注意：是通过变量名来获得变量里面的数据
该操作也被称为变量初始化

更新变量：
变量赋值后，还可以通过简单地给它一个不同的值来更新它。

声明多个变量：
变量赋值后，还可以通过简单地给它一个不同的值来更新它。
语法：多个变量中间用逗号隔开
1
let age = 18, nuname = 'pink'//不推荐，可读性差
1
2
3
//推荐写法
let age = 18
let nuame = 'pink'
变量本质
内存：计算机中存储数据的地方，相当于一个空间。
变量本质：是程序在内存中申请的一块用来存放数据的小空间。
变量命名规则规范
规则：
不能用关键字
关键字：有特殊含义的字符，JavaScript 内置的一些英语词汇。例如：let、var、if、for等
只能用下划线、字母、数字、$组成，且数字不能开头
字母严格区分大小写，如 Age 和 age 是不同的变量
规范：
起名要有意义
遵守小驼峰命名法
第一个单词首字母小写，后面每个单词首字母大写。例：userName
数组
参考java

四、常量

概念：
使用 const 声明的变量称为“常量”。
使用场景：
当某个变量永远不会改变的时候，就可以使用 const 来声明，而不是let。
命名规范：
和变量一致
常量使用：

//声明常量
canst G = 9.8
//修改
G = 9.9
//输出这个常量
console.log(G)

五、数据类型

JS 数据类型整体分为两大类：

1.基本数据类型
number 数字型
string字符串型
boolean 布尔型
undefind 未定义型
null 空类型

2.引用数据类型
object 对象

其余参考Java……

检测数据类型：
通过 typeof 关键字检测数据类型
typeof 运算符可以返回被检测的数据类型。它支持两种语法形式：

作为运算符： typeof x （常用的写法）
函数形式： typeof(x)
换言之，有括号和没有括号，得到的结果是一样的，所以我们直接使用运算符的写法

1	console.log(typeof age)

文章归档

最新文章