第17章 Web开发技术4
5 响应式列表：
使用媒体查询为不同屏幕尺寸的设备设置合适的列表样式。
```css
media screen and (max-width: 600px) {
ul, li {
padding: 5px 0;
}
li {
border-top: 1px solid ccc;
}
}
```
将这些样式应用到html列表中，可以美化列表显示效果。
要使用css样式表，需要遵循以下基本步骤：
1 创建css样式表文件：使用`css`扩展名创建一个css文件，例如`stylescss`。
2 选择器：使用选择器（如类选择器、id选择器、元素选择器等）定位html元素。
3 声明样式：在css文件中，为每个选择器添加相应的样式属性和值。
4 关联样式表：将css文件与html文档关联，可以使用内联样式表、内部样式表或外部样式表方法。
以下是一个简单的css示例，展示了如何设置段落文本的颜色和字体大小：
```html
＜!-- indexhtml --＞
＜!doctype html＞
＜html lang=&34;en&34;＞
＜head＞
＜meta charset=&34;utf-8&34;＞
＜meta name=&34;viewport&34; content=&34;width=device-width, initial-scale=10&34;＞
＜title＞css示例＜/title＞
＜link rel=&34;stylesheet&34; href=&34;stylescss&34;＞
＜/head＞
＜body＞
＜p＞这是一个示例段落。＜/p＞
＜/body＞
＜/html＞
```
```css
/ stylescss /
p {
color: blue;
font-size: 14px;
}
```
在这个示例中，我们创建了一个名为`stylescss`的css文件，为`＜p＞`元素设置了颜色和字体大小。在html文件中，我们使用`＜link＞`标签将css文件与html文档关联。
javascript是一种广泛使用的客户端脚本语言，用于增强网页的交互性和动态效果。要学习javascript，您需要了解以下基本概念：
1 基本语法：
javascript的基本语法包括变量、数据类型（如字符串、数字、布尔值等）、运算符（如算术、比较、逻辑等）、条件语句（如ifelse）、循环语句（如for、while、dowhile）和函数。
了解javascript的基本语法对于编写有效的javascript代码非常重要。以下是javascript基本语法的概述：
1 变量：
使用`var`、`let`或`const`关键字声明变量。变量用于存储和引用值。
```javascript
var message = &34;hello, world!&34;;
let age = 30;
const pi = 3141592653589793;
```
2 数据类型：
常见的javascript数据类型包括字符串（string）、数字（number）、布尔值（boolean）、对象（object）、数组（array）、空值（null）和未定义（undefined）。
```javascript
// 字符串
var name = &34;alice&34;;
// 数字
var count = 42;
// 布尔值
var isdone = true;
// 对象
var person = {
name: &34;bob&34;,
age: 25
};
// 数组
var fruits = [&34;apple&34;, &34;banana&34;, &34;cherry&34;];
// null
var library = null;
// undefined
var result;
```
3 运算符：
算术运算符（如+、-、、/、）、比较运算符（如==、!=、＞、＜、＞=、＜=）、逻辑运算符（如&&、||、!）等。
```javascript
// 算术运算符
var sum = 5 + 3;
var difference = 10 - 5;
var product = 4 2;
var quotient = 10 / 2;
var remainder = 11 3;
// 比较运算符
if (5 ＞ 3) {
consolelog(&34;5 is greater than 3&34;);
}
// 逻辑运算符
if (isdone && ishungry) {
consolelog(&34;it&39;s time for lunch!&34;);
}
```
4 条件语句：
使用ifelse语句进行条件判断。
```javascript
if (age ＞= 18) {
consolelog(&34;you are an adult&34;);
} else {
consolelog(&34;you are a minor&34;);
}
```
5 循环语句：
使用for、while和dowhile循环执行重复操作。
```javascript
// for循环
for (var i = 0; i ＜ 10; i++) {
consolelog(i);
}
// while循环
var j = 0;
while (j ＜ 10) {
consolelog(j);
j++;
}
// dowhile循环
var k = 0;
do {
consolelog(k);
k++;
} while (k ＜ 10);
```
6 函数：
声明函数并使用函数名调用。
```javascript
function sayhello(name) {
consolelog(&34;hello, &34; + name + &34;!&34;);
}
sayhello(&34;alice&34;);
```
了解这些基本语法概念后，您将能够编写简单的javascript代码。随着经验的积累，您将能够使用更复杂的javascript功能来创建动态和交互式的网页。
2 dom操作：
利用dom（document object model，文档对象模型）可以操作html文档的结构和内容。例如，可以通过javascript修改元素的属性、添加或删除元素、处理事件等。
dom（document object model，文档对象模型）是html文档的对象表示。通过dom，您可以使用javascript访问和操作html文档的结构和内容。以下是一些常见的dom操作：
1 选择元素：
使用`documentgetelementbyid()`、`documentgetelementsbyclassname()`和`documentgetelementsbytagname()`方法从文档中选择元素。
```javascript
var element = documentgetelementbyid(&34;elementid&34;);
var elements = documentgetelementsbyclassname(&34;class&34;);
var alldivs = documentgetelementsbytagname(&34;div&34;);
```
2 修改元素属性：
使用html元素的属性或javascript对象属性设置元素的属性值。
```javascript
elementinnerhtml = &34;hello, world!&34;;
elementstylecolor = &34;red&34;;
elementclassname = &34;new-class&34;;
```
3 添加元素：
使用`documentcreateelement()`创建一个新元素，并使用`elementappendchild()`将其添加到现有元素。
```javascript
var newelement = documentcreateelement(&34;p&34;);
newelementtextcontent = &34;this is a new paragraph&34;;
elementappendchild(newelement);
```
4 删除元素：
使用`elementremovechild()`方法从父元素中删除子元素。
```javascript
var childelement = elementgetelementsbytagname(&34;p&34;)[0];
elementremovechild(childelement);
```
5 处理事件：
为html元素添加事件监听器，以响应用户操作。
```javascript
elementaddeventlistener(&34;click&34;, function() {
consolelog(&34;element clicked!&34;);
});
```
6 遍历dom树：
使用`elementchildren`属性或`documentqueryselectorall()`方法遍历dom树中的元素。
```javascript
var children = elementchildren;
for (var i = 0; i ＜ childrenlength; i++) {
consolelog(children[i]tagname);
}
var divs = documentqueryselectorall(&34;div&34;);
for (var i = 0; i ＜ divslength; i++) {
consolelog(divs[i]textcontent);
}
```
掌握这些dom操作技巧，您将能够使用javascript动态地修改html文档的结构和内容，创建交互式和动态的网页。
3 bom操作：
bom（browser object model，浏览器对象模型）提供了与浏览器窗口交互的方法和属性。例如，可以通过javascript获取浏览器窗口的大小、设置定时器、处理浏览器历史记录等。
以下是一些常见的bom对象和方法：
1 window对象：
window对象是bom的核心，它表示整个浏览器窗口。使用`window`对象可以访问其他bom对象和方法。
```javascript
var width = windowinnerwidth;
var height = windowinnerheight;
```
2 navigator对象：
navigator对象包含浏览器的信息，如浏览器名称、版本、平台等。
```javascript
var useragent = navigatoruseragent;
```
3 location对象：
location对象表示当前页面的url。使用`location`对象可以获取或设置页面的url。
```javascript
var url = windowlocationhref;
// 跳转到新的url
windowlocationhref = &34;&34;;
```
4 history对象：
history对象包含浏览器历史记录。使用`history`对象可以实现在浏览器历史记录中的导航。
```javascript
// 跳转到历史记录中的上一个页面
historyback();
// 跳转到历史记录中的下一个页面
historyforward();
// 跳转到指定历史记录页码
historygo(2);
```
5 screen对象：
screen对象包含用户屏幕的信息，如屏幕宽度、高度和颜色深度。
```javascript
var screenwidth = screenwidth;
var screenheight = screenheight;
```
6 settimeout和setinterval方法：
使用`settimeout`和`setinterval`方法设置定时器。
```javascript
settimeout(function() {
consolelog(&34;this will be executed after 3 seconds&34;);
}, 3000);
var intervalid = setinterval(function() {
consolelog(&34;this will be executed every 1 second&34;);
}, 1000);
// 清除定时器
clearinterval(intervalid);
```
通过使用这些bom对象和方法，您可以在javascript中实现与浏览器窗口的交互，如获取浏览器窗口大小、设置定时器、处理浏览器历史记录等。
4 异步编程：
异步编程允许您同时执行多个任务，而不必等待一个任务完成后再执行另一个任务。javascript的异步编程方法包括回调函数、promise、async/await等。
异步编程对于处理耗时操作（如网络请求、文件读取等）尤为重要，因为它可以防止阻塞ui线程，导致页面无响应。以下是javascript中常见的异步编程方法：
1 回调函数：
回调函数是一种将一个函数作为参数传递给另一个函数的方法。当异步任务完成时，回调函数将被调用。
```javascript
function fetchdata(callback) {
settimeout(function() {
var data = &34;data fetched!&34;;
callback(data);
}, 2000);
}
fetchdata(function(data) {
consolelog(data);
});
```
2 promise：
promise是处理异步操作的更现代和更强大的方法。promise表示一个异步操作的最终结果，可能是已解决（resolved）或已拒绝（rejected）。
```javascript
function fetchdata() {
return new promise(function(resolve, reject) {
settimeout(function() {
var data = &34;data fetched!&34;;
resolve(data);
}, 2000);
});
}
fetchdata()then(function(data) {
consolelog(data);
})catch(function(error) {
consoleerror(&34;error:&34;, error);
});
```
3 async/await：
async/await是处理异步操作的更简洁和易于理解的方法。async函数返回promise，而await关键字用于等待promise完成。
```javascript
async function fetchdata() {
try {
var response = await fetch(&34;/data&34;);
var data = await responsejson();
consolelog(data);
} catch (error) {
consoleerror(&34;error:&34;, error);
}
}
fetchdata();
```
这些异步编程方法可以帮助您更有效地处理javascript中的异步操作。
5 事件处理：
javascript可以响应用户在网页上的各种操作，例如点击、悬浮、滚动等。可以使用事件处理程序（event handlers）来监听这些事件，并在事件发生时执行相应的代码。
在javascript中，事件处理程序（event handlers）用于监听和响应用户在网页上的操作，如点击、悬浮、滚动等。以下是如何使用事件处理程序来处理这些事件的示例：
1 点击事件（click）：
使用`addeventlistener`方法为一个元素添加点击事件监听器。
```javascript
var button = documentgetelementbyid(&34;mybutton&34;);
buttonaddeventlistener(&34;click&34;, function() {
consolelog(&34;button clicked!&34;);
});
```
2 悬浮事件（mouseover 和 mouseout）：
监听元素进入和离开悬浮区域时的事件。
```javascript
var image = documentgetelementbyid(&34;myimage&34;);
imageaddeventlistener(&34;mouseover&34;, function() {
imagestyleopacity = &34;05&34;;
});
imageaddeventlistener(&34;mouseout&34;, function() {
imagestyleopacity = &34;1&34;;
});
```
3 滚动事件（scroll）：
监听页面滚动事件。
```javascript
windowaddeventlistener(&34;scroll&34;, function() {
consolelog(&34;page scrolled!&34;);
});
```
4 键盘事件（keydown、keyup 和 keypress）：
监听键盘按键按下、释放和按下并释放的事件。
```javascript
var input = documentgetelementbyid(&34;myinput&34;);
inputaddeventlistener(&34;keydown&34;, function(event) {
if (eventkey === &34;enter&34;) {
consolelog(&34;enter key pressed!&34;);
}
});
```
5 输入事件（input）：
监听表单元素的输入变化。
```javascript
var textarea = documentgetelementbyid(&34;mytextarea&34;);
textareaaddeventlistener(&34;input&34;, function() {
consolelog(&34;textarea content changed!&34;);
});
```
6 提交事件（submit）：
监听表单提交事件，以防止表单未经处理直接提交。
```javascript
var form = documentgetelementbyid(&34;myform&34;);
formaddeventlistener(&34;submit&34;, function(event) {
eventpreventdefault(); // 阻止表单默认提交行为
consolelog(&34;form submitted!&34;);
});
```
这些示例展示了如何在javascript中添加事件处理程序来监听用户操作。根据您的需求，您可以将这些事件处理程序与dom操作、ajax请求、动画等相结合，创建交互式和响应式的网页。
6 错误处理：
javascript提供了trycatch语句来处理异常和错误。在try块中执行的代码可能会引发错误，而catch块中的代码则在错误发生时执行，以捕获和处理错误。
在javascript中，`trycatch`语句用于处理异常和错误。使用`trycatch`语句可以确保您的代码在发生错误时不会导致整个程序崩溃。以下是`trycatch`语句的使用示例：
```javascript
function divide(a, b) {
try {
if (b === 0) {
throw new error(&34;除数不能为零&34;);
}
return a / b;
} catch (error) {
consoleerror(&34;error:&34;, errormessage);
return null;
}
}
consolelog(divide(10, 2)); // 5
consolelog(divide(10, 0)); // error: 除数不能为零
consolelog(divide(10, 5)); // null
```
在这个示例中，我们定义了一个名为`divide`的函数，该函数接受两个参数并返回它们的商。在`try`块中，我们首先检查除数`b`是否为零，如果是，则抛出一个`error`异常。在`catch`块中，我们捕获`error`异常，并打印错误消息。如果未抛出异常，`try`块中的代码将正常执行，并返回商。
7 ajax：
ajax（asynchronous javascript and xml）是一种在无需刷新整个网页的情况下，从服务器获取数据并更新网页内容的技术。ajax结合了javascript、xml、html和css，为用户提供更流畅、响应迅速的网页体验。以下是使用ajax的基本步骤：
1 创建xmlhttprequest对象：
首先，您需要创建一个`xmlhttprequest`对象，该对象负责与服务器进行通信。
```javascript
var xhttp = new xmlhttprequest();
```
2 发送请求：
使用`xmlhttprequest`对象的`open`方法和`send`方法发送请求。`open`方法接受请求类型（如get、post等）、请求的url和一个表示请求是否异步的布尔值。`send`方法发送请求到服务器。
```javascript
xhttpopen(&34;get&34;, &34;/data&34;, true);
xhttpsend();
```
3 处理响应：
当服务器响应时，您需要处理响应数据。使用`xmlhttprequest`对象的`onreadystatechange`事件监听器。在这个事件处理程序中，检查`readystate`属性（表示请求的状态）和`status`属性（表示请求的结果），以确定请求是否成功完成。
```javascript
xhttponreadystatechange = function() {
if (thisreadystate === 4 && thisstatus === 200) {
// 请求成功完成，处理响应数据
consolelog(thisresponsetext);
} else if (thisreadystate === 4) {
// 请求失败，处理错误
consoleerror(&34;error:&34;, thisstatus);
}
};
```
4 处理响应数据：
在成功的响应处理程序中，您可以将响应数据（通常是json格式）解析为javascript对象，并根据需要更新网页内容。
```javascript
if (thisreadystate === 4 && thisstatus === 200) {
var data = jsonparse(thisresponsetext);
// 更新网页内容
}
```
这是一个简单的ajax示例，展示了如何使用xmlhttprequest对象与服务器通信并处理响应。实际上，您还可以使用其他方法（如`fetch` api）以及库（如jquery、axios等）来简化ajax请求。
ajax技术广泛应用于创建动态、响应迅速的网页，如单页面应用（spa）、实时聊天应用等。通过使用ajax，您可以在不刷新整个页面的情况下，为用户提供更流畅、无缝的浏览体验。
8 库和框架：
使用javascript库和框架可以提高开发效率和代码质量。例如，jquery是一个流行的javascript库，提供了易于使用的api来操作dom、处理事件等。react、vue和angular等框架则提供了更强大的功能，如组件化、状态管理等。
以下是一些流行的javascript库和框架：
1 jquery：
jquery是一个流行的javascript库，它简化了dom操作、事件处理、动画效果等常见任务。通过使用jquery，您可以更容易地编写跨浏览器的javascript代码。
```javascript
// 使用jquery操作dom
(&34;elementid&34;)html(&34;hello, world!&34;);
// 使用jquery处理事件
(&34;button&34;)click(function() {
consolelog(&34;button clicked!&34;);
});
// 使用jquery创建动画
(&34;elementid&34;)animate({
left: &34;200px&34;,
opacity: 05
}, 1000);
```
2 react：
react是一个用于构建用户界面的javascript库，由facebook开发。react采用组件化开发方式，使代码更易于维护和重用。react还提供了强大的状态管理和虚拟dom技术，以提高性能。
```javascript
import react, { usestate } from &39;react&39;;
function counter() {
const [count, setcount] = usestate(0);
return (
＜div＞
＜p＞count: {count}＜/p＞
＜button onclick={() =＞ setcount(count + 1)}＞increment＜/button＞
＜button onclick={() =＞ setcount(count - 1)}＞decrement＜/button＞
＜/div＞
);
}
```
3 vue：
vue是一个用于构建用户界面的javascript框架，具有简单、易学、高性能等特点。vue也采用了组件化开发方式，并提供了响应式数据绑定、虚拟dom等技术。
```javascript
＜template＞
＜div＞
＜p＞count: {{ count }}＜/p＞
＜button click=&34;increment&34;＞increment＜/button＞
＜button click=&34;decrement&34;＞decrement＜/button＞
＜/div＞
＜/template＞
＜script＞
export default {
data() {
return { count: 0 };
},
methods: {
increment() {
thiscount++;
},
decrement() {
thiscount--;
},
},
};
＜/script＞
```
4 angular：
angular是一个用于构建动态web应用的开源平台。angular提供了一个完整的解决方案，包括模板引擎、依赖注入、路由、状态管理等功能。angular使用typescript进行开发，并支持构建高性能、可维护的单页面应用（spa）。
```typescript
import { ponent } from &39;angular/core&39;;
ponent({
selector: &39;app-counter&39;,
template: `
＜p＞count: {{ count }}＜/p＞
＜button (click)=&34;increment()&34;＞increment＜/button＞
＜button (click)=&34;decrement()&34;＞decrement＜/button＞
`,
})
export class counterponent {
count = 0;
increment() {
thiscount++;
}
decrement() {
thiscount--;
}
}
```
要学习javascript，可以从以下资源开始：
1 官方网站
2 在线教程（如mdn web docs、w3schools等）
3 书籍和课程（如《javascript权威指南》、《eloquent javascript》等）
4 在线实践平台（如codecademy、freecodecamp等）