2023-10-24

web前端开发技术考前复习

B/S和C/S的区别

B/S（Browser/Server）和C/S（Client/Server）是两种常见的应用程序架构模式。

B/S指基于浏览器和服务器的应用程序，其中所有的处理都在服务器上完成，用户通过浏览器作为客户端来访问应用程序。这种架构模式的好处是用户不需要安装任何客户端软件，只需要通过浏览器就可以访问应用程序，从而降低了维护成本和更新难度。

C/S指基于客户端和服务器的应用程序，其中客户端和服务器之间通过网络连接进行通信。在这种模式下，客户端负责一部分应用程序的逻辑处理，而服务器则负责另一部分逻辑处理。C/S应用程序通常需要在客户端上安装专门的客户端软件，因此对维护和更新的要求较高。

总体而言，B/S架构更加灵活，易于维护和升级，而C/S架构则可以提供更高的性能和更丰富的用户体验。具体选择哪种架构模式要根据实际需求和业务情况进行综合考虑。

H5和C3的新特性

我认为您指的是HTML5（或简写为H5）和CSS3（或简写为C3），它们是Web开发中最常用的技术之一。以下是它们的一些新特性：

HTML5：

语义化标签，如<header>,<footer>, <article>等。
新增表单元素，如日期选择器、搜索框、邮件地址输入框等。
视频和音频支持，无需插件即可播放媒体文件。
本地存储，可以在客户端保存数据。

CSS3：

强大的2D/3D变换和动画效果，如旋转、平移、缩放、倾斜等。
多列布局和弹性盒子布局，使得页面布局更加灵活。
自定义字体、渐变和阴影等效果。
媒体查询，根据设备屏幕大小调整CSS样式。

需要注意的是，这只是HTML5和CSS3中的一些新特性，并不是全部。同时，这些技术正在不断更新和完善，因此还有很多其他特性和功能。

JS事件处理有几种方式

在JavaScript中，事件处理有三种主要的方式：

HTML事件处理：通过在HTML元素上使用内联事件处理器来指定处理函数。
DOM级别事件处理：使用JavaScript代码将事件处理程序附加到DOM元素上，可以使用addEventListener()方法来添加事件监听器，或者使用on*属性（如onclick）将事件处理程序分配给元素。
对象级别事件处理：在JavaScript中创建自定义对象时，可以使用事件模型为该对象定义自定义事件并指定相应的事件处理程序。可以使用EventTarget接口中定义的addEventListener()、removeEventListener()和dispatchEvent()方法来处理这些自定义事件。

DOM和BOM的区别

DOM（文档对象模型）和BOM（浏览器对象模型）都是JavaScript与Web交互的重要部分，但它们有不同的作用：

DOM描述了网页内容（如HTML、XML等），并定义了一种访问和操作这些内容的方法和接口。DOM的核心是一棵树形结构，由节点和对象组成，它表示了网页中所有的元素和标签以及它们之间的关系。
BOM则提供了与浏览器窗口交互的对象和方法，例如window对象、location对象、history对象、navigator对象、screen对象等。BOM使得JavaScript能够控制浏览器的行为，例如打开新窗口、改变URL、导航历史记录等。

因此，DOM和BOM是JavaScript语言的两个最重要的API，而它们的主要区别在于它们所处理的对象和任务的不同。

JS消息对话框

JavaScript中的消息对话框是一种弹出式窗口，用于向用户显示一条消息并等待用户响应。它包括以下三种类型：

alert()：用于向用户显示一条消息，并要求用户点击“确定”按钮来关闭对话框。
prompt()：用于向用户显示一条消息和一个文本输入字段，并等待用户在该字段中输入文本以及点击“确定”或“取消”按钮。
confirm()：用于向用户显示一条消息和两个按钮：“确定”和“取消”，并等待用户选择其中一个按钮。

CSS选择器有哪些，写出名称

CSS选择器用于选择要应用样式的元素。以下是一些常见的CSS选择器名称：

标签选择器（tag selector）
类选择器（class selector）
ID选择器（id selector）
子元素选择器（child selector）
后代选择器（descendant selector）
相邻兄弟选择器（adjacent sibling selector）
通用选择器（universal selector）
属性选择器（attribute selector）
伪类选择器（pseudo-class selector）
伪元素选择器（pseudo-element selector）

还有一些其他的选择器，如组合选择器、否定伪类选择器等。

String字符串

String 对象方法

方法	描述
charAt()	返回在指定位置的字符。
charCodeAt()	返回在指定的位置的字符的 Unicode 编码。
concat()	连接两个或更多字符串，并返回新的字符串。
endsWith()	判断当前字符串是否是以指定的子字符串结尾的（区分大小写）。
fromCharCode()	将 Unicode 编码转为字符。
indexOf()	返回某个指定的字符串值在字符串中首次出现的位置。
includes()	查找字符串中是否包含指定的子字符串。
lastIndexOf()	从后向前搜索字符串，并从起始位置（0）开始计算返回字符串最后出现的位置。
match()	查找找到一个或多个正则表达式的匹配。
repeat()	复制字符串指定次数，并将它们连接在一起返回。
replace()	在字符串中查找匹配的子串，并替换与正则表达式匹配的子串。
replaceAll()	在字符串中查找匹配的子串，并替换与正则表达式匹配的所有子串。
search()	查找与正则表达式相匹配的值。
slice()	提取字符串的片断，并在新的字符串中返回被提取的部分。
split()	把字符串分割为字符串数组。
startsWith()	查看字符串是否以指定的子字符串开头。
substr()	从起始索引号提取字符串中指定数目的字符。
substring()	提取字符串中两个指定的索引号之间的字符。
toLowerCase()	把字符串转换为小写。
toUpperCase()	把字符串转换为大写。
trim()	去除字符串两边的空白。
toLocaleLowerCase()	根据本地主机的语言环境把字符串转换为小写。
toLocaleUpperCase()	根据本地主机的语言环境把字符串转换为大写。
valueOf()	返回某个字符串对象的原始值。
toString()	返回一个字符串。

简述web工作原理

Web 的工作原理涉及多个组件和协议，包括客户端浏览器、服务器、HTTP 协议以及 HTML/CSS/JavaScript 等技术。

客户端浏览器向服务器发送 HTTP 请求，请求包括所需资源的 URL 和其他相关信息。
服务器接收到请求后，根据 URL 找到对应的资源并生成 HTTP 响应，响应包括状态码、消息头和消息体。
响应被传输回客户端浏览器，浏览器解析响应并渲染页面。如果响应是 HTML 页面，则浏览器会解析 HTML 标记，并使用 CSS 样式和 JavaScript 脚本来渲染和交互。
在页面渲染期间，浏览器可能会发起其他 HTTP 请求获取页面中引用的其他资源，如图片、样式表、JavaScript 文件等。
服务器再次响应这些请求，浏览器将这些资源嵌入到页面中或者执行对应的代码。

以上是 Web 工作原理的简要流程，其中还有许多细节和复杂性，包括缓存、Cookie、会话管理、HTTPS 等。

js常用函数

JavaScript中常用的函数包括：

console.log()：将消息打印到浏览器控制台。
alert()：在浏览器中弹出一个警告框，显示指定消息。
prompt()：在浏览器中弹出一个对话框，提示用户输入值，并返回该值。
parseInt()和parseFloat()：将字符串转换为整数或浮点数。
String()：将变量转换为字符串。
Array()：创建一个新数组。
push()和pop()：向数组末尾添加元素或从末尾删除元素。
shift()和unshift()：从数组开头删除或添加元素。
splice()：从数组中删除、替换或插入元素。
slice()：从数组中提取一部分元素，返回一个新数组。
indexOf()和lastIndexOf()：查找数组中特定元素的位置。
join()和toString()：将数组转换为字符串。
Math.random()：生成一个0到1之间的随机数。
Math.floor()和Math.ceil()：向下和向上取整。
setInterval()：每隔指定时间就执行一次函数。
setTimeout()：在指定时间后执行一次函数。
typeof()：返回数据类型。
confirm()：弹出一个确认对话框，让用户选择“确定”或“取消”。
isNaN()：检查给定的值是否是数字。

js中String字符串常用的方法

以下是 JavaScript 中 String 字符串常用的方法：

length：获取字符串长度。
charAt()：返回指定索引位置的字符。
concat()：连接两个或多个字符串。
indexOf()：返回某个指定的字符串值在字符串中首次出现的位置。
lastIndexOf()：返回某个指定的字符串值在字符串中最后出现的位置。
slice()：提取字符串的一部分，并返回一个新的字符串。
substring()：提取字符串的一部分，并返回一个新的字符串。
substr()：从起始索引号提取字符串中指定数目的字符。
replace()：在字符串中用一些字符替换另一些字符。
toUpperCase()：将字符串转换为大写字母。
toLowerCase()：将字符串转换为小写字母。
trim()：去掉字符串两端的空格。
split()：将字符串分割成子字符串，并将结果存储到数组中。
match()：在字符串中搜索一个与正则表达式匹配的值。

js特点

以下是JavaScript的一些特点：

基于对象：JavaScript是一种基于对象的语言，它使用对象作为其编程模型的核心。
弱类型：JavaScript是一种弱类型语言，变量可以自动转换为所需的类型。
解释型：JavaScript是一种解释型语言，代码在运行时被逐行解析和执行。
跨平台：JavaScript可以在多种不同的环境中运行，包括浏览器、服务器和移动设备等。
事件驱动：JavaScript中的交互性主要是通过事件来实现的，例如鼠标点击、键盘输入等。
函数式编程：JavaScript中函数是一等公民，支持函数式编程范式。
动态性：JavaScript的动态性使得它能够在运行时修改程序的结构和行为。
简单易用：JavaScript相对于其他语言而言，学习曲线较低，易上手。

CSS动画animation

CSS3动画(animation)是一种利用CSS3技术实现的动画效果，通过定义关键帧(keyframes)和动画属性(animation properties)来描述元素的动画过程。它可以实现多种复杂的动画效果，如渐变、旋转、缩放、移动、透明度等，并且可以控制动画的速度、延迟、重复次数等。CSS3动画可以使网页更加生动有趣，提高用户体验。

以下是一个简单的CSS3动画(animation)的用法示例，具体实现效果可以在浏览器中查看：

<!doctype html>
<html>
<head>
  <style>
    /* 定义动画关键帧 */
    @keyframes example {
      from {transform: rotate(0deg);}
      to {transform: rotate(360deg);}
    }
    
    /* 应用动画属性 */
    .box {
      width: 100px;
      height: 100px;
      background-color: red;
      animation-name: example;
      animation-duration: 2s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
    }
  </style>
</head>
<body>
  <!-- 创建一个需要应用动画的元素 -->
  <div class="box"></div>
</body>
</html>

这个示例中，我们创建了一个红色的正方形元素(box)，并定义了一个名为example的动画关键帧，该动画会让元素以线性方式不断旋转360度。然后通过将animation-name、animation-duration、animation-timing-function和animation-iteration-count属性应用到.box元素上，来控制动画的名称、时长、速度曲线和重复次数。最终呈现出来的效果就是一个不停旋转的红色正方形。

js变量、常量及其用法

在JavaScript中，变量和常量都用于存储数据值。变量是可更改的数据存储选项，而常量则是不可更改的。

声明变量时使用 “let” 关键字，例如：

1	let age = 25;

在上面的例子中，我们声明了一个名为 “age” 的变量，并将其初始化为 25。

声明常量时使用 “const” 关键字，例如：

1	const PI = 3.14;

在上面的例子中，我们声明了一个名为 “PI” 的常量，并将其初始化为 3.14。一旦常量被赋值，就无法更改它的值。如果尝试更改常量的值，将会产生错误。

在JavaScript中，变量和常量可以用于存储各种类型的数据，包括数字、字符串、数组、对象等。例如：

1 2	let name = 'Alice'; const daysInWeek = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];

在上面的例子中，我们声明了一个 “name” 变量并将其初始化为字符串类型的 “Alice”，以及一个 “daysInWeek” 常量，其中包含一个字符串数组。

JS中的关键字

以下是 JavaScript 中的关键字：

break
case
catch
class
const
continue
debugger
default
delete
do
else
export
extends
false
finally
for
function
if
import
in
instanceof
new
null
return
super
switch
this
throw
true
try
typeof
var
void
while
with
yield

注意，这个列表并不包括一些 JavaScript 的保留字（如 let 和 async），因为它们被视为关键字的扩展。

JS中的表达式及其例子

算术表达式：用于计算数值的表达式，包括加、减、乘、除等操作。
1
例子：var sum = 10 + 20;
字符串表达式：用于处理字符串的表达式，包括字符串连接等操作。
1
例子：var greeting = "Hello, " + "World!";
逻辑表达式：用于处理布尔值的表达式，包括与、或、非等操作。
1
例子：var isTrue = (10 > 5) && (5 < 10);
赋值表达式：用于给变量赋值的表达式。
1
例子：var x = 10;
比较表达式：用于比较两个值的表达式，包括等于、不等于、大于、小于等操作。
1
例子：var isEqual = (10 == 10);
条件（三元）表达式：用于根据条件选择一个值的表达式。
1
例子：var max = (10 > 5) ? 10 : 5;

函数表达式：用于定义一个函数的表达式。

1	例子：var square = function(x) { return x * x; };

对象表达式：用于创建一个对象的表达式。
1
例子：var person = { name: "John", age: 30 };
数组表达式：用于创建一个数组的表达式。
1
例子：var numbers = [1, 2, 3, 4, 5];
正则表达式：用于处理正则表达式的表达式。
1
例子：var pattern = /hello/i;

JS内置对象及其案例

JavaScript 有许多内置对象，这些对象可以在任何时候使用。以下是一些常用的内置对象及其使用案例：

Object：Object 是 JavaScript 中所有对象的基类。你可以使用它来创建一个新的对象，或者访问和操作已有对象的属性和方法。

使用案例：

let person = new Object();
person.name = "Tom";
person.age = 25;
console.log(person.name); // 输出 "Tom"

Array：Array 对象用于在单个变量中存储多个值。你可以使用它来创建和操作数组。

使用案例：

1
2
3

let fruits = new Array("apple", "banana", "cherry");
console.log(fruits[0]); // 输出 "apple"
fruits.push("orange"); // 在数组末尾添加一个新元素

String：String 对象表示文本数据。你可以使用它来处理字符串。

使用案例：

1
2
3

let str = new String("Hello, world!");
console.log(str.length); // 输出 13
console.log(str.toUpperCase()); // 输出 "HELLO, WORLD!"

Number：Number 对象表示数字值。你可以使用它来处理数字和进行数学运算。

使用案例：

1 2	let num = new Number(42); console.log(num.toString(16)); // 输出 "2a"（将数字转换为十六进制字符串）

Math：Math 对象提供了一组用于执行数学运算的方法和常量。

使用案例：

1 2	console.log(Math.PI); // 输出 3.141592653589793 console.log(Math.sqrt(16)); // 输出 4（计算平方根）

Date：Date 对象表示日期和时间。你可以使用它来获取和设置日期、时间等。

使用案例：

1
2
3

let now = new Date();
console.log(now.getFullYear()); // 输出当前年份
console.log(now.getMonth() + 1); // 输出当前月份（注意：月份从 0 开始，所以需要加 1）

JSON：JSON 对象用于处理 JSON 数据。你可以使用它来将 JavaScript 对象转换为 JSON 字符串，或将 JSON 字符串解析为 JavaScript 对象。

使用案例：

let obj = {name: "Tom", age: 25};
let jsonString = JSON.stringify(obj); // 将对象转换为 JSON 字符串
console.log(jsonString); // 输出 '{"name":"Tom","age":25}'

let parsedObj = JSON.parse(jsonString); // 将 JSON 字符串解析为对象
console.log(parsedObj.name); // 输出 "Tom"

RegExp：RegExp 对象表示正则表达式。你可以使用它来进行字符串的模式匹配和替换操作。

使用案例：

let regex = new RegExp("\\d+", "g"); // 匹配一个或多个数字字符
let str = "There are 25 cats and 42 dogs.";
let result = str.match(regex); // 使用正则表达式匹配字符串
console.log(result); // 输出 ["25", "42"]

Function：Function 对象表示 JavaScript 函数。你可以使用它来创建和调用函数。

使用案例：

1 2	let add = new Function("a", "b", "return a + b;"); console.log(add(1, 2)); // 输出 3

Promise：Promise 对象表示一个异步操作的最终结果。你可以使用它来处理异步操作，例如 AJAX 请求、定时器等。

使用案例：

let promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Hello, world!");
  }, 1000);
});

promise.then((value) => {
  console.log(value); // 输出 "Hello, world!"（在 1 秒后）
});

这些内置对象为 JavaScript 提供了丰富的功能，使得开发者能够更方便地处理各种任务。

JS本地对象

在JavaScript中，本地对象是指那些内置于JavaScript语言中的对象。这些对象在任何时候都可以在代码中使用，无需额外的引用或导入。以下是一些常见的JavaScript本地对象：

Object：这是所有对象的基类，包含了一些通用的属性和方法，如toString()、valueOf()等。
Array：表示数组类型的对象，提供了一系列操作数组的方法，如push()、pop()、splice()等。
String：表示字符串类型的对象，提供了一系列操作字符串的方法，如charAt()、substring()、trim()等。
Number：表示数字类型的对象，提供了一系列操作数字的方法，如toFixed()、toExponential()等。
Boolean：表示布尔类型的对象，提供了一系列操作布尔值的方法，如valueOf()等。
Date：表示日期和时间的对象，提供了一系列操作日期和时间的方法，如getFullYear()、getMonth()、getDate()等。
RegExp：表示正则表达式的对象，提供了一系列操作正则表达式的方法，如exec()、test()等。
Function：表示函数类型的对象，提供了一系列操作函数的方法，如call()、apply()、bind()等。
Error：表示错误类型的对象，提供了一系列操作错误的方法，如message、name等。
Math：提供了一系列数学计算的方法，如abs()、ceil()、floor()、random()等。
JSON：提供了一系列操作JSON数据的方法，如parse()、stringify()等。
Promise：表示异步操作的对象，提供了一系列操作异步操作的方法，如then()、catch()、finally()等。

这些本地对象为开发者提供了丰富的功能，使得JavaScript编程更加方便和高效。

JS中的事件及其案例

JavaScript中的事件是指在浏览器或者用户操作过程中发生的一些特定交互行为，例如点击、滚动、按键等。通过在JavaScript代码中监听和处理这些事件，我们可以实现对用户操作的响应，从而提高网页的交互性。

以下是一些常见的JavaScript事件及其使用案例：

click事件：当用户点击某个元素时触发。

案例：点击按钮显示/隐藏一个div元素。

<button id="toggleButton">显示/隐藏</button>
<div id="content" style="display:none;">这是一个隐藏的内容。</div>

<script>
  const toggleButton = document.getElementById('toggleButton');
  const content = document.getElementById('content');

  toggleButton.addEventListener('click', () => {
    content.style.display = content.style.display === 'none' ? 'block' : 'none';
  });
</script>

mouseover和mouseout事件：当鼠标指针移动到元素上方或离开元素时触发。

案例：鼠标悬停在图片上时放大，离开时恢复原大小。

<img id="image" src="example.jpg" width="200" height="200" />

<script>
  const image = document.getElementById('image');

  image.addEventListener('mouseover', () => {
    image.width = 300;
    image.height = 300;
  });

  image.addEventListener('mouseout', () => {
    image.width = 200;
    image.height = 200;
  });
</script>

keyup和keydown事件：当用户按下或松开某个键盘按键时触发。

案例：实现一个简单的搜索框，当用户输入内容时，实时显示搜索结果。

<input id="searchInput" type="text" placeholder="输入关键词搜索" />
<div id="searchResult"></div>

<script>
  const searchInput = document.getElementById('searchInput');
  const searchResult = document.getElementById('searchResult');

  searchInput.addEventListener('keyup', () => {
    const keyword = searchInput.value;
    searchResult.innerHTML = `搜索结果：${keyword}`;
  });
</script>

scroll事件：当用户滚动页面时触发。

案例：当页面滚动到一定距离时，显示一个返回顶部的按钮。

<button id="backToTop" style="display:none;position:fixed;bottom:20px;right:20px;">返回顶部</button>

<script>
  const backToTop = document.getElementById('backToTop');

  window.addEventListener('scroll', () => {
    if (window.scrollY > 200) {
      backToTop.style.display = 'block';
    } else {
      backToTop.style.display = 'none';
    }
  });

  backToTop.addEventListener('click', () => {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  });
</script>

这些只是JavaScript事件的一些简单示例，实际应用中可能会涉及到更多的事件类型和更复杂的交互逻辑。

苏弋的博客

There is no one around me who is you, but there is no one who is not you.

web前端开发技术考前复习

web前端开发技术考前复习

B/S和C/S的区别

H5和C3的新特性

JS事件处理有几种方式

DOM和BOM的区别

JS消息对话框

CSS选择器有哪些，写出名称

String字符串

String 对象方法

简述web工作原理

js常用函数

js中String字符串常用的方法

js特点

CSS动画animation

js变量、常量及其用法

JS中的关键字

JS中的表达式及其例子

JS内置对象及其案例

JS本地对象

JS中的事件及其案例