武汉公司网页制作_苏州网站开发外包公司_百度指数功能有哪些_淘宝seo是指什么

1.JavaScript概述

JavaScript 是一种广泛用于 web 开发的编程语言，最早由 Netscape 在 1995 年创建，用于在网页上实现动态功能。如今，JavaScript 不仅可以在浏览器中运行，还可用于服务器端（如通过 Node.js），并支持移动应用、桌面应用、游戏开发等多种用途。

 JavaScript 的核心特点：

1. 轻量级、解释型语言：JavaScript 不需要编译，浏览器或运行时环境会即时解释代码。

   

2. 跨平台：JavaScript 可以在不同的平台和操作系统上运行，因为大多数浏览器和环境都支持它。

3. 基于事件驱动、非阻塞 I/O：JavaScript 的运行模型以异步事件驱动为主，特别是通过事件循环实现高效的非阻塞 I/O。

4. 弱类型：变量的类型可以动态改变，JavaScript 支持隐式类型转换。

   

5. 原型继承：JavaScript 使用原型继承模型，与其他基于类的语言（如 Java、C++）不同。

6. 函数式编程支持：JavaScript 把函数视为一等公民，允许将函数作为参数传递或返回，并支持匿名函数、闭包等概念。

7. 高效的 DOM 操作：JavaScript 能与 HTML DOM 交互，动态操作页面的内容、样式、元素等，改变用户的交互体验。

 常用的 JavaScript 功能：

1. 变量声明：通过 var（旧式）、let 和 const（ES6 引入）声明变量。

    javascript

    let name = 'Alice';

    const age = 25;

    

2. 函数：可以定义命名函数或匿名函数。

    javascript   

 function greet() {console.log('Hello, world!');}let add = (a, b) => a + b;

    

3. 事件处理：JavaScript 允许对用户的操作（如点击、滚动等）进行响应。

    javascript  

  document.getElementById('myButton').addEventListener('click', function() {alert('Button clicked!');});

    

4. 异步编程：通过回调函数、Promise 和 async/await 实现异步操作。

    javascript  

  async function fetchData() {let response = await fetch('https://api.example.com/data');let data = await response.json();console.log(data);}

    

5. 对象和数组：JavaScript 支持灵活的对象和数组操作。

    javascript  

  let person = { name: 'Alice', age: 25 };let colors = ['red', 'green', 'blue'];

    

6. 模块化：JavaScript 通过 ES6 引入了模块化系统，可以导入和导出模块。

    javascript  

  // module.jsexport const name = 'Alice';// main.jsimport { name } from './module.js';console.log(name);

    

 现代 JavaScript (ES6+)

JavaScript 随着 ES6（ECMAScript 2015）的推出发生了显著的变化，引入了许多现代编程功能，如：

1. let 和 const 声明：避免 var 的作用域问题。

2. 箭头函数：简化了函数的定义，并且保留了 this 的上下文。

3. 模板字符串：通过反引号支持嵌入表达式的字符串。

    javascript

    let greeting = Hello, ${name}!;

    

4. 解构赋值：简化了从对象或数组中提取数据。

    javascript

    let {name, age} = person;

    let [firstColor, secondColor] = colors;

    

 常见的 JavaScript 框架和库

1. React.js：用于构建用户界面的前端框架。

2. Vue.js：一个渐进式前端框架，适用于构建用户界面。

3. Node.js：一个基于 JavaScript 的服务器端运行时环境。

JavaScript 是构建现代 Web 应用不可或缺的工具，凭借其灵活性、强大的生态系统和不断发展的语言特性，广泛应用于前端和后端开发。

2.JavaScript语法

JavaScript 语法是用来定义如何编写 JavaScript 代码的规则和结构。以下是 JavaScript 语法的主要组成部分：

 1. 变量声明

在 JavaScript 中，可以使用 var、let 和 const 来声明变量。

 var: 声明的变量具有函数作用域，可以在函数的任何地方使用。

 let: 块作用域，声明的变量只在块级（如 {}）中可用。

 const: 声明常量，值不能被重新赋值，具有块作用域。

javascript

var x = 5;  // 函数作用域let y = 10; // 块作用域const z = 15; // 常量，不能重新赋值

 2. 数据类型

JavaScript 支持以下基本数据类型：

 原始类型：

   Number: 数值（整数或浮点数）如 42、3.14

   String: 字符串，如 "Hello"、'World'

   Boolean: 布尔值，true 或 false

   Undefined: 未定义类型（未赋值）

   Null: 空值类型

   Symbol: 唯一且不可改变的值（ES6 引入）

   BigInt: 任意精度的整数（ES2020 引入）

javascript

let num = 42;let str = 'Hello';let isTrue = true;let notDefined;let empty = null;let unique = Symbol('id');let bigNumber = 1234567890123456789012345678901234567890n;

 对象类型：JavaScript 的对象是键值对的集合。

  javascript

 let person = { name: 'Alice', age: 25 };

  

 3. 操作符

JavaScript 提供多种操作符，用于变量和值的操作：

 算术操作符：+, -, , /, %, ++, --

  javascript  

let sum = 5 + 10; // 加法let product = 5  10; // 乘法

  

 赋值操作符：=, +=, -=, =, /=

  javascript

  let a = 5;a += 10; // 等价于 a = a + 10;

  

 比较操作符：==, ===, !=, !==, >, <, >=, <=

  javascript

  let isEqual = (5 == '5'); // true，== 会进行类型转换let isStrictEqual = (5 === '5'); // false，=== 不进行类型转换

  

 逻辑操作符：&&, ||, !

  javascript

  let isTrue = true && false; // falselet isNotTrue = !true; // false

  

 三元操作符：condition ? expr1 : expr2

  javascript

  let age = 18;let canVote = (age >= 18) ? 'Yes' : 'No'; // "Yes"

  

 4. 条件语句

JavaScript 支持常见的条件控制结构，如 if、else if、else 和 switch。

javascript

let age = 20;if (age >= 18) {console.log('Adult');} else if (age >= 13) {console.log('Teenager');} else {console.log('Child');}let color = 'red';switch (color) {case 'red':console.log('Color is red');break;case 'blue':console.log('Color is blue');break;default:console.log('Unknown color');}

 5. 循环语句

JavaScript 支持 for、while 和 do...while 循环：

for 循环：

  javascript

  for (let i = 0; i < 5; i++) {console.log(i);}

  

while 循环：

  javascript

  let i = 0;while (i < 5) {console.log(i);i++;}

  

 do...while 循环：先执行一次代码，再检查条件。

  javascript

  let i = 0;do {console.log(i);i++;} while (i < 5);

  

 6. 函数

JavaScript 中函数可以有命名函数和匿名函数，并支持箭头函数。

 普通函数：

  javascript

  function greet(name) {return 'Hello, ' + name;}console.log(greet('Alice')); // 输出 "Hello, Alice"

  

 匿名函数：

  javascript

  let greet = function(name) {return 'Hello, ' + name;};

  

 箭头函数（ES6 引入）：

  javascript

  let greet = (name) => Hello, ${name};

  

 7. 对象

JavaScript 对象是键值对集合，可以定义属性和方法。

javascript

let person = {name: 'Alice',age: 25,greet: function() {console.log('Hello, ' + this.name);}};console.log(person.name); // "Alice"person.greet(); // "Hello, Alice"

 8. 数组

数组是元素的有序集合，支持不同类型的数据。

javascript

let colors = ['red', 'green', 'blue'];console.log(colors[0]); // "red"colors.push('yellow'); // 添加新元素

 9. 异步编程

JavaScript 通过回调函数、Promise 和 async/await 来处理异步操作。

 回调函数：

  javascript  

setTimeout(function() {console.log('Executed after 1 second');}, 1000);Promise：javascriptlet promise = new Promise(function(resolve, reject) {if (success) {resolve('Success');} else {reject('Error');}});promise.then(function(result) {console.log(result);}).catch(function(error) {console.log(error);});async/await（ES8 引入）：javascriptasync function fetchData() {try {let response = await fetch('https://api.example.com/data');let data = await response.json();console.log(data);} catch (error) {console.log('Error:', error);}}

  

 10. 作用域与闭包

 作用域：在 JavaScript 中，变量的作用域分为全局作用域和局部作用域。let 和 const 是块级作用域，而 var 是函数作用域。

 闭包：函数可以访问外层函数的变量，并在函数执行后保持对这些变量的引用。

javascript

function outer() {let outerVar = 'I am outside!';function inner() {console.log(outerVar); // 可以访问 outerVar}return inner;}let closure = outer();closure(); // 输出 "I am outside!"

 总结

JavaScript 的语法涵盖了从变量声明、条件语句、循环、函数、异步编程到对象和数组操作等方面，是一种灵活且功能强大的语言，能够处理从简单的网页交互到复杂的应用逻辑。

3.JavaScript对象

在 JavaScript 中，对象是一种复杂数据类型，用于存储键值对（即属性和值）。对象是 JavaScript 的核心数据结构，几乎所有东西（包括数组、函数）都可以看作对象。

 1. 创建对象

 1.1. 对象字面量

最常见的创建对象的方法是使用对象字面量，即用 {} 包围的键值对集合。

javascript

let person = {name: 'Alice',age: 25,greet: function() {console.log('Hello, my name is ' + this.name);}};

 name 和 age 是对象的属性，分别对应字符串 'Alice' 和数值 25。

 greet 是对象的方法，可以通过 person.greet() 来调用。

 1.2. 使用 new Object() 构造函数

使用 JavaScript 内置的 Object 构造函数也可以创建对象。

javascript

let car = new Object();car.brand = 'Toyota';car.model = 'Corolla';car.year = 2020;

 2. 访问对象属性

可以通过两种方式访问对象的属性：

 点表示法：

  javascript

 console.log(person.name); // "Alice"

  

 方括号表示法：

  javascript

 console.log(person['age']); // 25

  

> 注意：方括号表示法允许通过变量动态访问属性。

javascript

let prop = 'name';console.log(person[prop]); // "Alice"

 3. 添加、修改和删除属性

 3.1. 添加或修改属性

可以直接通过赋值的方式添加新属性或修改已有属性。

javascript

person.gender = 'female'; // 添加新属性person.age = 26; // 修改已有属性

 3.2. 删除属性

可以使用 delete 运算符删除对象的属性。

javascript

delete person.age;console.log(person.age); // undefined

 4. 对象的方法

对象的方法是对象属性中保存的函数。可以像调用普通函数一样调用对象的方法，并且在方法内部可以通过 this 关键字访问对象的其他属性。

javascript

let person = {name: 'Alice',greet: function() {console.log('Hello, ' + this.name); // this 访问对象自身的属性}};person.greet(); // "Hello, Alice"

 5. 对象的遍历

可以使用 for...in 循环遍历对象的属性。

javascript

for (let key in person) {console.log(key + ': ' + person[key]);}

这会输出对象中的每个键值对：

name: Alicegreet: function() {...}

 6. 对象的属性操作

 6.1. Object.keys()

返回对象的所有属性名，组成一个数组。

javascript

let keys = Object.keys(person);console.log(keys); // ["name", "greet"]

 6.2. Object.values()

返回对象的所有属性值，组成一个数组。

javascript

let values = Object.values(person);console.log(values); // ["Alice", function() {...}]

 6.3. Object.entries()

返回一个数组，其中每一项是一个 [key, value] 对。

javascript

let entries = Object.entries(person);console.log(entries); // [["name", "Alice"], ["greet", function() {...}]]

 7. 对象的原型和继承

JavaScript 使用原型链实现继承。每个对象都有一个原型（通过 __proto__ 或 Object.getPrototypeOf() 获取），对象可以从其原型继承属性和方法。

 7.1. 创建对象的原型继承

可以通过 Object.create() 创建一个继承自其他对象的新对象。

javascript

let animal = {type: 'mammal',sound: function() {console.log('Roar');}};let lion = Object.create(animal); // 创建一个继承自 animal 的对象lion.name = 'Lion';console.log(lion.type); // "mammal" (继承自 animal)lion.sound(); // "Roar" (继承自 animal)

 7.2. 构造函数和 new 关键字

通过构造函数可以创建多个具有相似结构的对象。

javascript

function Person(name, age) {this.name = name;this.age = age;this.greet = function() {console.log('Hello, ' + this.name);};}let alice = new Person('Alice', 25);let bob = new Person('Bob', 30);alice.greet(); // "Hello, Alice"bob.greet(); // "Hello, Bob"

 8. ES6 中的类

在 ES6 中，class 是构造函数的语法糖，允许更清晰地定义对象的结构。

javascript

class Person {constructor(name, age) {this.name = name;this.age = age;}greet() {console.log('Hello, ' + this.name);}}let alice = new Person('Alice', 25);alice.greet(); // "Hello, Alice"

 9. 对象的浅拷贝与深拷贝

 9.1. 浅拷贝

可以使用 Object.assign() 或扩展运算符 ... 实现浅拷贝。

javascript

let original = { a: 1, b: { c: 2 } };let copy = Object.assign({}, original);copy.a = 10;copy.b.c = 20;console.log(original.a); // 1 (未改变)console.log(original.b.c); // 20 (原始对象受影响，因为是浅拷贝)

 9.2. 深拷贝

深拷贝需要递归地复制对象的所有嵌套属性，可以使用第三方库（如 Lodash）或 JSON 方法。

javascript

let original = { a: 1, b: { c: 2 } };let deepCopy = JSON.parse(JSON.stringify(original));deepCopy.b.c = 20;console.log(original.b.c); // 2 (原始对象不受影响)

 10. 对象的常用方法

 Object.assign()：用于将一个或多个源对象的属性拷贝到目标对象中。

 Object.freeze()：冻结对象，防止修改。

 Object.seal()：封闭对象，防止添加新属性。

javascript

let obj = { a: 1 };Object.freeze(obj);obj.a = 2; // 修改无效console.log(obj.a); // 1

 总结

JavaScript 中的对象是用于存储键值对的动态结构，灵活且强大。通过各种方法可以轻松访问、修改、遍历和继承对象的属性与方法。通过 ES6 引入的类和模块化，使得对象的使用更加现代化和模块化。

4.JavaScript事件

JavaScript 事件是指用户与网页交互时所发生的动作或事件，例如点击、键盘输入、鼠标移动等。事件驱动编程使得网页更加动态和交互性，用户可以通过事件触发相应的代码执行。

 1. 事件类型

JavaScript 中的事件大致可以分为以下几类：

鼠标事件：

  click: 鼠标点击

  dblclick: 鼠标双击

  mouseover: 鼠标移入元素

  mouseout: 鼠标移出元素

  mousemove: 鼠标移动

键盘事件：

  keydown: 按下键盘按键

  keyup: 松开键盘按键

  keypress: 按下字符键（已弃用）

表单事件：

  submit: 提交表单

  change: 表单元素值变化

   focus: 输入框获得焦点

   blur: 输入框失去焦点

窗口事件：

   Load: 页面加载完成

   resize: 窗口大小改变

   scroll: 页面滚动

 2. 添加事件监听器

使用 addEventListener() 方法可以将事件处理函数绑定到指定的事件上。

javascript

let button = document.getElementById('myButton');button.addEventListener('click', function() {alert('Button clicked!');});

 3. 事件处理函数

事件处理函数是响应事件的代码块。当事件被触发时，这些函数会被调用。可以使用命名函数或匿名函数。

 3.1. 命名函数

javascript

function handleClick() {alert('Button clicked!');}button.addEventListener('click', handleClick);

 3.2. 匿名函数

javascript

button.addEventListener('click', function() {alert('Button clicked!');});

 4. 事件对象

事件处理函数会接收一个事件对象作为参数，其中包含关于事件的详细信息，例如事件的目标元素、事件类型等。

javascript

button.addEventListener('click', function(event) {console.log(event.target); // 被点击的元素console.log(event.type); // 事件类型});

 5. 移除事件监听器

可以使用 removeEventListener() 方法来移除已添加的事件监听器。需要传入相同的事件类型和函数引用。

javascript

button.removeEventListener('click', handleClick);

 6. 事件传播

事件在 DOM 中的传播有两个主要阶段：捕获和冒泡。

捕获阶段：事件从根节点向目标节点传递。

冒泡阶段：事件从目标节点向根节点传递。

默认情况下，事件会在冒泡阶段触发。

javascript

document.getElementById('parent').addEventListener('click', function() {console.log('Parent clicked!');}, false); // false 表示在冒泡阶段触发document.getElementById('child').addEventListener('click', function() {console.log('Child clicked!');}, false);

 7. 事件委托

事件委托是一种技术，通过将事件处理程序绑定到父元素，而不是每个子元素，可以有效地管理多个事件。适用于动态添加元素的情况。

javascript

document.getElementById('parent').addEventListener('click', function(event) {if (event.target.matches('.child')) {console.log('Child element clicked!');}});

 8. 阻止默认行为和事件传播

可以使用 event.preventDefault() 阻止事件的默认行为（如链接跳转），使用 event.stopPropagation() 阻止事件的传播。

javascript

button.addEventListener('click', function(event) {event.preventDefault(); // 阻止链接跳转event.stopPropagation(); // 阻止事件冒泡});

 9. 定时器和事件

可以结合事件和定时器来实现延迟执行。

javascript

button.addEventListener('click', function() {setTimeout(function() {alert('Executed after 1 second!');}, 1000);});

 10. 触摸事件（Touch Events）

在移动设备上，可以使用触摸事件来处理用户的触摸行为。

 touchstart: 手指触摸屏幕

 touchmove: 手指在屏幕上移动

 touchend: 手指离开屏幕

javascript

element.addEventListener('touchstart', function(event) {console.log('Touch started!');});

 总结

JavaScript 事件机制是网页交互的重要基础，支持多种用户操作和事件类型。通过事件监听器、事件对象和事件传播机制，可以实现丰富的动态效果和交互体验。掌握这些概念将帮助开发者创建更具互动性的网页应用。

5.综合案例--轮播广告

代码:
 

<!DOCTYPE html>
<html lang="en">
<head><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta charset="UTF-8"><title>图片轮播效果</title><style type="text/css">* {margin: 0;padding: 0;text-decoration: none;}body {padding: 20px;}#container {position: relative;width: 600px;height: 400px;border: 1px solid #333;overflow: hidden;margin-left: auto;margin-right: auto;}#list {position: absolute;z-index: 1;height: 400px;width: 4200px;left: -600px;}#list img {float: left;height: 400px;width: 600px;}#buttons {position: absolute;left: 250px;bottom: 20px;z-index: 2;}#buttons span {float: left;margin-right: 3px;width: 10px;height: 10px;border: 1px solid #fff;border-radius: 50%;background: #333;cursor: pointer;}#buttons .on {background: orangered;}.arrow {position: absolute;top: 180px;z-index: 2;display: none;width: 40px;height: 40px;font-size: 36px;font-weight: bold;line-height: 39px;text-align: center;color: #fff;background-color: rgba(0, 0, 0, 0.3);cursor: pointer;}.arrow:hover {background-color: rgba(0, 0, 0, 0.7);}#container:hover .arrow {display: block;}#prev {left: 20px;}#next {right: 20px;}</style><script type="text/javascript">window.onload = function() {var container = document.getElementById('container');var list = document.getElementById('list');var buttons = document.getElementById('buttons').getElementsByTagName('span');var prev = document.getElementById('prev');var next = document.getElementById('next');var index = 1;var timer;function animate(offset) {var newLeft = parseInt(list.style.left) + offset;list.style.left = newLeft + 'px';if (newLeft > -600) {list.style.left = -3000 + 'px';}if (newLeft < -3000) {list.style.left = -600 + 'px';}}function play() {timer = setInterval(function() {next.onclick();}, 2000);}function stop() {clearInterval(timer);}function buttonsShow() {for (var i = 0; i < buttons.length; i++) {if (buttons[i].className == "on") {buttons[i].className = "";}}buttons[index - 1].className = "on";}prev.onclick = function() {index -= 1;if (index < 1) {index = 5;}buttonsShow();animate(600);};next.onclick = function() {index += 1;if (index > 5) {index = 1;}animate(-600);buttonsShow();};for (var i = 0; i < buttons.length; i++) {(function(i) {buttons[i].onclick = function() {var clickIndex = parseInt(this.getAttribute('index'));var offset = 600 * (index - clickIndex);animate(offset);index = clickIndex;buttonsShow();}})(i);}container.onmouseover = stop;container.onmouseout = play;play();}</script>
</head>
<body><div id="container"><div id="list" style="left: -600px;"><img src="4465CAF7A217F1A5103C23623BE7CD18.jpg" alt="5"/><img src="284B9D47E470452C71D073321346CFDB.jpg" alt="1"/><img src="4465CAF7A217F1A5103C23623BE7CD18.jpg" alt="2"/><img src="284B9D47E470452C71D073321346CFDB.jpg" alt="3"/><img src="4465CAF7A217F1A5103C23623BE7CD18.jpg" alt="4"/><img src="284B9D47E470452C71D073321346CFDB.jpg" alt="5"/><img src="4465CAF7A217F1A5103C23623BE7CD18.jpg" alt="1"/></div><div id="buttons"><span index="1" class="on"></span><span index="2"></span><span index="3"></span><span index="4"></span><span index="5"></span></div><a href="javascript:;" id="prev" class="arrow">&lt;</a><a href="javascript:;" id="next" class="arrow">&gt;</a></div>
</body>
</html>

本章习题

习题一

代码:

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>数字时钟</title><style>body {font-family: Arial, sans-serif;text-align: center;padding-top: 50px;}#clock {font-size: 60px;font-weight: bold;}</style>
</head>
<body><h1>数字时钟</h1><div id="clock">00:00:00</div><script>function updateClock() {var now = new Date();var hours = String(now.getHours()).padStart(2, '0');var minutes = String(now.getMinutes()).padStart(2, '0');var seconds = String(now.getSeconds()).padStart(2, '0');document.getElementById('clock').textContent = hours + ':' + minutes + ':' + seconds;}setInterval(updateClock, 1000);updateClock();  // 初始化时钟显示</script>
</body>
</html>

习题二

代码:

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>禁止右键菜单</title><style>body {background-color: #f0f0f0; /* 背景颜色 */background-image: url(4465CAF7A217F1A5103C23623BE7CD18.jpg); /* 背景图片 */background-size: cover; /* 使背景图像覆盖整个页面 */background-repeat: no-repeat; /* 不重复背景图像 */color: #333; /* 字体颜色 */text-align: center; /* 文本居中 */padding: 50px; /* 内边距 */}</style><script>document.addEventListener('contextmenu', function(event) {event.preventDefault();alert('禁止使用右键快捷菜单！');});</script>
</head>
<body><h1>欢迎来到我的网页</h1><p>请注意：右键菜单被禁用。</p>
</body>
</html>