JavaScript知识小结

JAVASCRIPT知识小结

标签： web作业

首先了解什么是js

JS是JavaScript的简称，这是一门最流行的运行在浏览器的脚本语言。
JavaScript 与 Java 是两种完全不同的语言，无论在概念还是设计上。
JS是一种轻量级的编程语言，可由所有的现代浏览器执行

js有什么作用

DOM操作: 增删改查HTML元素可以直接操作HMTL
动效: 可以通过JS完成各种动效让网页动起来
交互: 让用户和网页形成交互 (点击、滑动、拖拽等)

1.用法

HTML 中的 Javascript 脚本代码必须位于 <script>与 </script> 标签之间。
Javascript 脚本代码可被放置在 HTML 页面的 <body>和 <head>部分中。
这里又提到script标签。
＞　<script>和 </script>会告诉 JavaScript 在何处开始和结束。

<script>和 </script> 之间的代码行包含了 JavaScript．

例如：
<script> alert("我的第一个 JavaScript"); </script>

2.输出

avaScript 可以通过一下不同的方式来输出数据：

使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。

1.window.alert（）；

例如：
<!DOCTYPE html>
<html>
<body>
<h1>page1</h1>
<p>first phase</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html>

2.document.getElementById(id)

使用 "id" 属性来标识 HTML 元素，并 innerHTML 来获取或插入元素内容：

<!DOCTYPE html>
<html>
<body>
<h1>我的第一个 Web 页面</h1>
<p id="demo">我的第一个段落</p>
<script>
document.getElementById("demo").innerHTML = "段落已修改。";
</script>
</body>
</html>

3.document.write()

使用 document.write() 仅仅向文档输出写内容

<!DOCTYPE html>
<html>
<body>
<h1>我的第一个 Web 页面</h1>
<p>我的第一个段落。</p>
<script>
document.write(Date());
</script>
</body>
</html>

4.console.log()

<!DOCTYPE html>
<html>
<body>
<h1>我的第一个 Web 页面</h1>
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>
</body>
</html>

3.语法

语法规则定义了语言结构。

1.数字（Number）字面量可以是整数或者是小数，或者是科学计数(e);

2.字符串（String）字面量可以使用单引号或双引号;
3.数组（Array）字面量定义一个数组;
4.对象（Object）字面量定义一个对象;
5.函数（Function）字面量定义一个函数;
6.双斜杠 // 后的内容将会被浏览器忽略;
7.引用一个函数 = 调用函数(执行函数内的语句);
8.JavaScript 对大小写是敏感的。
！这里特别注意大小写

4.语句标识符

break：用于跳出循环。
catch：语句块，在 try 语句块执行出错时执行 catch 语句块。
continue：跳过循环中的一个迭代。
do ... while：执行一个语句块，在条件语句为 true 时继续执行该语句块。
for：在条件语句为 true 时，可以将代码块执行指定的次数。
for ... in ：用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）。
function ：定义一个函数
if ... else：用于基于不同的条件来执行不同的动作。
return：退出函数
switch：用于基于不同的条件来执行不同的动作。
throw：抛出（生成）错误。
try：实现错误处理，与 catch 一同使用。
var：声明一个变量。
while：当条件语句为 true 时，执行语句块。

5.数据类型

JavaScript 一共有8种数据类型，可大致分为基本数据类型（也叫原始数据类型）与引用数据类型。
基本数据类型：Undefined、Null、Boolean、Number、String、Symbol（es6新增，表示独一无二的值）和 BigInt（es10新增）；
引用数据类型：Object（Object本质上是由一组无序的键值对组成），里面包含 Function、Array、Date 等。

JavaScript 不支持任何创建自定义类型的机制，而所有值最终都将是上述 8 种数据类型之一

6.存储方式

基本数据类型：直接存储在栈（stack）中，占据空间小、大小固定、频繁使用，所以放入栈中存储；

引用数据类型：同时存储在栈（stack）和堆（heap）中，占据空间大、大小不固定。引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引用值时，会首先检索其在栈中的地址，取得地址后从堆中获得实体。

7.对象

JavaScript中，几乎所有的事物都是对象,JavaScript 对象是变量的容器。

对象也是一个变量，但对象可以包含多个值（多个变量），每个值以 name:value 对呈现。
var car = {name:"Fiat", model:500, color:"white"};
对象的定义
定义 JavaScript 对象可以跨越多行：
例如：
var person = { firstName:"John", lastName:"Doe", age:50, eyeColor:"blue" };
对象属性
键值对通常写法为 name : value (键与值以冒号分割)。
键值对在 JavaScript 对象通常称为对象属性。
访问对象属性
1.person.lastName;
2.person.lastName;

对象方法
1.name = person.fullName();
2.name = person.fullName;
创建对象方法：
methodName : function() { // 代码 }
调用对象方法：
objectName.methodName()

8.函数

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

JavaScript 函数语法
函数就是包裹在花括号中的代码块，前面使用了关键词 function： function functionname() { // 执行代码 }
!注意：JavaScript 对大小写敏感。关键词 function 必须是小写的，并且必须以与函数名称相同的大小写来调用函数。

9.事件

JavaScript 事件
HTML 事件是发生在 HTML 元素上的事情。
当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。
HTML 事件
HTML 事件可以是浏览器行为，也可以是用户行为。
以下是 HTML 事件的实例：
HTML 页面完成加载
HTML input 字段改变时
HTML 按钮被点击

事件可以用于处理表单验证，用户输入，用户行为及浏览器动作:
JavaScript 可以

页面加载时触发事件

页面关闭时触发事件

用户点击按钮执行动作

验证用户输入内容的合法性

10.if...Else 语句

条件语句

if 语句只有当指定条件为 true 时，使用该语句来执行代码
if (condition) { 当条件为 true 时执行的代码 }

if...else 语句当条件为 true 时执行代码，当条件为 false 时执行其他代码
if (condition) { 当条件为 true 时执行的代码 } else { 当条件不为 true 时执行的代码 }
if...else if....else 语句- 使用该语句来选择多个代码块之一来执行
if (condition1) { 当条件 1 为 true 时执行的代码 } else if (condition2) { 当条件 2 为 true 时执行的代码 } else { 当条件 1 和条件 2 都不为 true 时执行的代码 }
switch 语句 - 使用该语句来选择多个代码块之一来执行
switch(n) { case 1: 执行代码块 1 break; case 2: 执行代码块 2 break; default: 与 case 1 和 case 2 不同时执行的代码 }

11.循环

for循环
for (var i=0;i<cars.length;i++) { document.write(cars[i] + "<br>"); }
除此之外，还有不同类型的循环

for - 循环代码块一定的次数

for/in - 循环遍历对象的属性
while - 当指定的条件为 true 时循环指定的代码块
do/while - 同样当指定的条件为 true 时循环指定的代码块

12.类型转换

在 JavaScript 中有 6 种不同的数据类型：

string
number
boolean
object
function
symbol

3 种对象类型：

Object
Date
Array

2 个不包含任何值的数据类型：

null
undefined

JavaScript 变量可以转换为新变量或其他数据类型与有两种方法：
1.通过使用 JavaScript 函数
2.通过 JavaScript 自身自动转换

将数字转换为字符串
String(x) // 将变量 x 转换为字符串并返回 String(13) // 将数字 13 转换为字符串并返回 String(10 + 23) // 将数字表达式转换为字符串并返回
将布尔值转换为字符串
String(false) // 返回 "false" String(true) // 返回 "true"
关于类型转换有许多种，就不一一赘述了，可以去菜鸟教程中查看详细的情况

13.代码规范

代码规范通常包括以下几个方面:

变量和函数的命名规则

空格，缩进，注释的使用规则。
其他常用规范……

posted @ 2022-07-10 02:04 看到我請讓我滾去學習阅读(22) 评论(0) 收藏举报

刷新页面返回顶部

Bonny