当前位置： 首页 > wzjs >正文

建设网站模板软文代写费用

wzjs 2025/7/25 10:27:53
建设网站模板,软文代写费用,信阳seo优化顾问,国家信用信息公示网HTML CSS JS 30分钟从零开始入门拿下 HTML_html教程-CSDN博客 30 分钟从零开始入门 CSS-CSDN博客 JavaScript 指南：从入门到实战开发-CSDN博客 前言 hello 兄弟们，这里是网页三件套的最后一个剑客了。这会也是复习补录之前欠你们的哈哈哈哈,js 是这…

 HTML  CSS  JS

30分钟从零开始入门拿下 HTML_html教程-CSDN博客

30 分钟从零开始入门 CSS-CSDN博客

JavaScript 指南：从入门到实战开发-CSDN博客

前言

hello 兄弟们，这里是网页三件套的最后一个剑客了。这会也是复习补录之前欠你们的哈哈哈哈,js 是这里边最难的一个(当然弱语言也不会很难) ,但内容会很多.

JavaScript 基础与实践

在当今的 Web 开发领域，JavaScript 堪称一门极为关键的编程语言。它不仅赋予网页交互性与动态性，还在众多非浏览器环境中发挥着重要作用。无论是初涉编程领域的新手，还是经验丰富的开发者，深入了解 JavaScript 的基础知识与实际应用，都能为其技术能力的提升带来新的启发。

一、初识 JavaScript

1.1 JavaScript 是什么

JavaScript（简称 JS）属于脚本语言，是解释型或即时编译型的编程语言。它最初因作为开发 Web 页面的脚本语言而被大众熟知，如今已广泛应用于 Node.js 服务器端开发、桌面应用开发、移动应用开发等众多非浏览器环境 。

JavaScript 的诞生颇具传奇色彩。1995 年，网景公司为了让浏览器具备与访问者互动的能力，决定开发一门新语言。布兰登・艾奇（Brendan Eich）临危受命，仅用 10 天时间就设计出了最初的 JavaScript。起初它被命名为 LiveScript，后来为了借助当时流行的 Java 的影响力，改名为 JavaScript。但实际上，Java 和 JavaScript 的语法风格大相径庭。

在 Web 开发中，JavaScript 与 HTML、CSS 紧密协作，共同构成了 Web 的基石。HTML 负责搭建网页的结构（如同人的骨架），CSS 负责定义网页的外观样式（类似于人可以有各种外貌），而 JavaScript 则负责赋予网页交互行为（就像让人具备各种行为），为网页增添动态效果和交互性。

1.2 JavaScript 快速上手

想要快速体验 JavaScript 的魅力，只需在 HTML 文件中添加以下代码：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8">meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><script>alert("Hello JavaScript!")</script></body></html>

运行浏览器后，一个显示 “Hello JavaScript!” 的弹出框就会出现，这便是 JavaScript 的简单应用示例，通过这个示例，我们能直观感受到 JavaScript 为网页带来的交互性。

1.3 引入方式

在项目中使用 JavaScript，有三种常见的引入方式：

  • 行内样式：直接将 JavaScript 代码嵌入 html 元素内部，例如：<input type="button" value="点我一下" οnclick="alert('haha')">，这种方式简单直接，但仅适用于简单的交互逻辑，代码维护性较差。
  • 内部样式：在 HTML 文件中定义<script>标签，将 JavaScript 代码写在标签内，例如：
<script>alert("haha");</script>

该方式适合少量的 JavaScript 代码，但随着代码量增加，会导致 HTML 文件结构混乱，不利于代码的模块化和复用。

  • 外部样式：定义<script>标签，通过 src 属性引入外部 js 文件，例如：<script src="hello.js"></script>。这种方式实现了 HTML 和 JavaScript 的分离，使代码结构更清晰，便于维护和管理，是企业开发中常用的方式。

二、基础语法

JavaScript 的基础语法在某些方面与 Java 有相似之处，但也展现出自身独特的特点。

2.1 变量

在 JavaScript 中，声明变量有三种方式：

  • var：早期用于声明变量的关键字，其作用域在包含该语句的函数内，例如：var name = 'zhangsan';，由于其作用域特性，在复杂逻辑中可能会导致变量提升等问题。
  • let：ES6 引入的声明变量关键字，作用域为该语句所在的代码块内，例如：let name = 'zhangsan';，有效解决了var带来的一些作用域问题，使代码逻辑更清晰。
  • const：用于声明常量，一旦声明，其值不可修改，例如：const name = 'zhangsan'; ，常用于定义程序中不会改变的常量，提升代码的可读性和可维护性。

需要注意的是，JavaScript 是动态弱类型语言，变量可以存放不同类型的值，并且在程序运行过程中，变量的类型可能会发生改变。变量名的命名规则为：可由字母、数字、下划线（_）或美元符号（$）组成，但数字不能开头，建议采用驼峰命名法，以提高代码的可读性。此外，“+” 在 JavaScript 中，既可以进行加法运算，也可以用于字符串拼接；“\n” 表示换行。

2.2 数据类型

JavaScript 的数据类型分为原始类型和引用类型，具体如下：

  • number：数字类型，不区分整数和小数，例如：1、3.14 。
  • string：字符串类型，字符串字面值需用引号引起来，单引号双引号均可，例如：'hello'、"world"。
  • boolean：布尔类型，只有true（真）和false（假）两个值 。
  • undefined：表示变量未初始化，仅有唯一值undefined。
  • null：表示空值，在判断对象是否为空时常用。

使用typeof函数可以返回变量的数据类型，例如：

var a = 10;console.log(typeof a); // numbervar b = 'hello';console.log(typeof b); // stringvar c = true;console.log(typeof c); // booleanvar d;console.log(typeof d); // undefinedvar e = null;console.log(typeof e); // object（这是JavaScript的一个设计缺陷，null的类型被误判为object）

2.3 运算符

JavaScript 的运算符与 Java 用法基本一致，包括：

  • 运算符类型运算符
    算术运算符+、-、*、/、%
    自增自减运算符++、--
    赋值运算符=、+=、-=、*=、/=、%=
    比较运算符<、>、<=、>=、!=、!==、==（会进行隐式类型转换）、===（不会进行隐式类型转换）
    逻辑运算符&&、`、 !`
    位运算符&（按位与）、`（按位或）、~（按位取反）、^`（按位异或）
    移位运算符<<（左移）、>>（有符号右移）、>>>（无符号右移）
    三元运算符条件表达式 ? true_value : false_value

例如：

var age = 20;var age1 = "20";var age2 = 20;console.log(age == age1); // true，比较值，会进行类型转换console.log(age === age1); // false，类型不一样，严格比较console.log(age == age2); // true，值和类型都一样

三、JavaScript 对象

3.1 数组

3.1.1 数组定义

在 JavaScript 中创建数组有两种方式：

  • 使用new关键字创建，例如：var arr = new Array(); （注意Array的首字母A要大写），这种方式较为传统。
  • 使用字面量方式创建（常用），例如：var arr = []; var arr2 = [1, 2, 'haha', false]; （数组中保存的内容称为 “元素”），字面量方式更简洁直观。

JavaScript 的数组与 C、C++、Java 等静态类型语言不同，它不要求元素是相同类型，这一特性与 Python、PHP 等动态类型语言类似，使得数组的使用更加灵活。

3.1.2 数组操作

对数组的常见操作包括：

  • 读：使用下标的方式访问数组元素（从 0 开始），例如：arr[0]获取数组arr的第一个元素。
  • 增：通过下标新增元素，如arr[4] = "new element"; ，或者使用push方法进行追加元素，arr.push("new element"); 。
  • 改：通过下标修改元素，如arr[0] = "updated element"; 。
  • 删：使用splice方法删除元素，arr.splice(2, 1); 表示从下标为 2 的位置开始删除 1 个元素。

例如：

var arr = [1, 2, 'haha', false];// 读取数组console.log(arr[0]); // 1// 添加数组元素arr[4] = "add"console.log(arr[4]); // addconsole.log(arr.length); // 5，获取数组的长度// 修改数组元素arr[4] = "update"console.log(arr[4]); // update// 删除数组元素arr.splice(4,1); // 第一个参数表示从下标为4的位置开始删除，第二个参数表示要删除的元素console.log(arr[4]); // undefined 元素已经删除，如果元素不存在，结果为undefinedconsole.log(arr.length); // 4，获取数组的长度

需注意，如果下标超出范围读取元素，结果为undefined；不要给数组名直接赋值，否则数组中的所有元素都会丢失，例如：

var arr = ['小猪佩奇', '小猪乔治', '小羊苏西'];arr = '小猫凯迪';// 此时arr不再是数组，而是一个字符串

3.2 函数

3.2.1 语法格式

定义函数的语法格式如下：

// 创建函数/函数声明/函数定义function 函数名(形参列表) {函数体return 返回值;}// 函数调用函数名(实参列表) // 不考虑返回值返回值 = 函数名(实参列表) // 考虑返回值

函数定义时并不会执行函数体内容，必须通过调用才会执行，调用几次就会执行几次。函数调用时进入函数内部执行，函数结束后回到调用位置继续执行，可以借助调试器来观察函数的执行过程。函数的定义和调用的先后顺序没有要求，这一点与变量不同，变量必须先定义再使用。

3.2.2 关于参数个数

在 JavaScript 中，实参和形参的个数可以不匹配，但实际开发中一般建议两者个数匹配。如果实参个数比形参个数多，多出的参数不参与函数运算；如果实参个数比形参个数少，多出来的形参值为undefined。

3.2.3 函数表达式

另一种函数的定义方式是函数表达式：

var add = function() {var sum = 0;for (var i = 0; i < arguments.length; i++) {sum += arguments[i];}return sum;}console.log(add(10, 20)); // 30console.log(add(1, 2, 3, 4)); // 10console.log(typeof add); // function

这种方式中，function() { }定义了一个匿名函数，然后将其用变量add表示，后续就可以通过add变量来调用函数。在 JavaScript 中，函数是一等公民，可以用变量保存，也可以作为其他函数的参数或者返回值，这为函数式编程提供了便利。

3.3 对象

在 JavaScript 中，字符串、数值、数组、函数都可看作对象，每个对象包含若干属性和方法。属性用于描述事物的特征，方法用于表示事物的行为。JavaScript 的对象与 Java 的对象概念基本一致，但语法表现形式差异较大。

3.3.1 使用字面量创建对象（常用）

使用{ }创建对象，例如：

var a = {}; // 创建了一个空的对象var student = {name: '蔡徐坤',height: 175,weight: 170,sayHello: function() {console.log("hello");}};

使用对象的属性和方法：

// 1. 使用. 成员访问运算符来访问属性 `.` 可以理解成 "的"console.log(student.name);// 2. 使用 [ ] 访问属性，此时属性需要加上引号console.log(student['height']);// 3. 调用方法，别忘记加上 ()student.sayHello();
3.3.2 使用 new Object 创建对象
var student = new Object(); // 和创建数组类似student.name = "蔡徐坤";student.height = 175;student['weight'] = 170;student.sayHello = function () {console.log("hello");}console.log(student.name);console.log(student['weight']);student.sayHello();

需注意，使用{ }创建的对象也能随时使用student.name = "蔡徐坤";这样的方式新增属性。

3.3.3 使用构造函数创建对象

在构造函数内部，this关键字表示当前正在构建的对象，构造函数的函数名首字母一般大写，且通常为名词，构造函数不需要return语句，创建对象时必须使用new关键字。

例如，使用构造函数创建猫咪对象：

function Cat(name, type, sound) {this.name = name;this.type = type;this.miao = function () {console.log(sound);}}var mimi = new Cat('咪咪', '中华田园喵', '喵');var xiaohei = new Cat('小黑', '波斯喵', '猫呜');var ciqiu = new Cat('刺球', '金渐层', '咕噜噜');console.log(mimi);mimi.miao();

四、JQuery

W3C 标准提供了一系列函数，可用于操作网页内容、结构和样式，但原生 JavaScript 提供的 API 在操作 DOM 元素时，代码较为繁琐、冗长。为了简化操作，我们可以使用 JQuery。

4.1 引入依赖

使用 JQuery 需先引入对应的库，可以通过 CDN 引入，例如：

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

也可从官网下载其他版本的 JQuery，Jquery 官方提供了 4 种类型的 JQuery 库：

  • uncompressed：非压缩版本（代码易读，但文件较大，传输速度慢）。
  • minified：压缩版（代码不易读，但文件小，性能高，开发中推荐使用）。
  • slim：精简瘦身版，没有 Ajax 和一些特效 。
  • slim minified：slim 的压缩版。

开发时，建议将 JQuery 库下载到本地，放置在当前项目中，以避免因外部地址无法访问而导致的问题。

4.2 JQuery 语法

jQuery 语法通过选取 HTML 元素，并对选取的元素执行某些操作，基础语法为：$(selector).action()。其中，$()是一个函数，是 jQuery 提供的全局函数，用于选择和操作 HTML 元素；Selector是选择器，用于 “查询” 和 “查找” HTML 元素；action是操作，执行对元素的操作。

JQuery 的代码通常写在document ready函数中，以防止文档在完全加载（就绪）之前运行 jQuery 代码，例如：

$(document).ready(function(){// jQuery functions go here});

简洁写法为：

$(function(){// jQuery functions go here});

4.3 JQuery 选择器

JQuery 选择器基于已有的 CSS 选择器，并在此基础上增加了一些自定义的选择器。jQuery 中所有选择器都以$开头：$()。例如：

  • $("*")：选取所有元素。
  • $(this)：选取当前 HTML 元素。
  • $("p")：选取所有<p>元素。
  • $("p:first")：选取第一个<p>元素。
  • $("p:last")：选取最后一个<p>元素。
  • $(".box")：选取所有class="box"的元素。
  • $("#box")：选取id="box"的元素。

4.4 JQuery 事件

在 JavaScript 中构建动态页面，需要感知用户的行为。用户对页面的操作（如点击、选择、修改等）会在浏览器中产生一个个事件，这些事件被 JavaScript 获取，从而实现更复杂的交互操作。

事件由三部分组成：事件源（哪个元素触发的）、事件类型（是点击、选中，还是修改等）和事件处理程序（进一步如何处理，通常是一个回调函数）。

事件代码
文档就绪事件（完成加载）$(document).ready(function)
点击事件$(selector).click(function)
双击事件$(selector).dblclick(function)
元素的值发生改变$(selector).change(function)
鼠标悬停事件$(selector).mouseover(function)

例如，为某个元素添加点击事件：

$("p").click(function(){// 动作发生后执行的代码
});

4.5 操作元素

4.5.1 获取 / 设置元素内容

jQuery 提供了三个简单的方法来获取和设置元素内容：

jQuery 方法说明
text()设置或返回所选元素的文本内容
html()设置或返回所选元素的内容（包括 HTML 标签）
val()设置或返回表单字段的值

以下是获取和设置元素内容的示例：

<div id="test"><span>你好</span></div>
<input type="text" value="hello">
<script>$(document).ready(function () {// 获取元素内容var html = $("#test").html();console.log("html内容为:" + html);var text = $("#test").text();console.log("文本内容为:" + text);var inputVal = $("input").val();console.log(inputVal);// 设置元素内容$("#test").html('<h1>设置html</h1>');$("#test2").text('<h1>设置text</h1>');$("input").val("设置内容");});
</script>
4.5.2 获取 / 设置元素属性

使用attr()方法可以获取和设置元素属性。例如：

<p><a href="https://www.bitejiuyeke.com/index" id="bite">比特就业课</a></p>
<script>
$(function () {// 获取元素属性var href = $("p a").attr("href");console.log(href);// 设置元素属性$("p a").attr("href", "baidu.com");console.log($("p a").attr("href"));
});
</script>
4.5.3 获取 / 返回 css 属性

css()方法用于设置或返回被选元素的一个或多个样式属性：

<div style="font-size: 36px;">我是一个文本</div>
<script>
$(function () {// 获取元素属性var fontSize = $("div").css("font-size");console.log(fontSize);// 设置元素属性$("div").css("font-size", "24px");
});
</script>
4.5.4 添加元素

添加 HTML 内容有以下几种方法：

方法描述
append()在被选元素的结尾插入内容
prepend()在被选元素的开头插入内容
after()在被选元素之后插入内容
before()在被选元素之前插入内容

代码示例如下：

<ol><li>List item 1</li><li>List item 2</li><li>List item 3</li>
</ol>
<img src="pic/rose.jpg">
<script>
$(function () {$("ol").append("<li>append</li>");$("ol").prepend("<li>prepend</li>");$("img").before("图片前插入");$("img").after("图片后插入");
});
</script>
4.5.5 删除元素

删除元素和内容常用以下两个方法：

方法描述
remove()删除被选元素（及其子元素）
empty()删除被选元素的子元素

例如：

<div id="div1">我是一个div</div>
<button>删除 div 元素</button>
<script>
$(function () {$('button').click(function () {$('#div1').remove();});
});
</script>

<ol><li>List item 1</li><li>List item 2</li><li>List item 3</li>
</ol>
<button>删除列表元素</button>
<script>
$(function () {$('button').click(function () {$('ol').empty();});
});
</script>

五、综合案例

5.1 猜数字

这个案例实现了一个简单的猜数字游戏。用户输入数字，点击 “猜” 按钮后，程序会判断用户输入的数字与随机生成的 1 到 100 之间的数字的大小关系，并给出相应提示。点击 “重新开始一局游戏” 按钮可以重置游戏。

<button type="button" id="reset">重新开始一局游戏</button><br>
请输入要猜的数字：<input type="text" id="number">
<button type="button" id="button">猜</button><br>
已经猜的次数：<span id="count">0</span><br>
结果：<span id="result"></span>
<script>
$(function () {// 随机生成一个1 - 100的数字var guessNumber = Math.floor(Math.random() * 100) + 1;var count = 0;$("#button").click(function () {count++;$("#count").text(count);var userGuess = parseInt($("#number").val());if (userGuess == guessNumber) {$("#result").text("猜对了");$("#result").css("color", "gray");} else if (userGuess < guessNumber) {$("#result").text("猜小了");$("#result").css("color", "blue");} else {$("#result").text("猜大了");$("#result").css("color", "red");}});$("#reset").click(function () {guessNumber = Math.floor(Math.random() * 100) + 1;count = 0;$("#count").text(count);$("#result").text("");$("#number").val("");});
});
</script>

5.2 表白墙

表白墙案例允许用户在文本框中输入 “谁”“对谁”“说什么” 的内容，点击提交按钮后，输入的内容会显示在页面下方。

  1. 首先准备好 HTML 和 CSS 代码，构建页面结构和样式：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.container {width: 400px;margin: 0 auto;}h1 {text-align: center;padding: 20px 0;}p {color: #666;text-align: center;font-size: 14px;padding: 10px 0;}.row {height: 40px;display: flex;justify-content: center;align-items: center;}span {width: 100px;line-height: 40px;}.edit {width: 200px;height: 30px;}.submit {width: 304px;height: 40px;color: white;background-color: orange;border: none;}</style>
</head>
<body><div class="container"><h1>表白墙</h1><p>输入后点击提交, 会将信息显示在表格中</p><div class="row"><span>谁: </span><input class="edit" type="text"></div><div class="row"><span>对谁: </span><input class="edit" type="text"></div><div class="row"><span>说什么: </span><input class="edit" type="text"></div><div class="row"><input type="button" value="提交" class="submit"></div></div>
</body>
</html>
  1. 然后通过 JavaScript 实现提交功能：
$(function () {$(".submit").click(function () {// 获取到编辑框内容var from = $('.edit:eq(0)').val();var to = $('.edit:eq(1)').val();var message = $('.edit:eq(2)').val();console.log(from + "," + to + "," + message);if (from == '' || to == '' || message == '') {return;}// 构造html元素var html = '<div class="row">' + from + '对' + to + '说: ' + message + '</div>';// 把构造好的元素添加进去$('.container').append(html);// 同时清理之前输入框的内容$(":text").val("");});
});

六、总结

  1. HTML：一种超文本标记语言，主要用于页面内容的显示和排版。若要实现更美观的样式展示和页面效果，需搭配 CSS 和 JavaScript。学习 HTML 重点在于了解标签的基本语法，虽然其标签众多，但掌握常用的即可。
  2. CSS：重点在于学习 CSS 选择器的使用，它能让网页的样式更加丰富多样，控制页面元素的外观显示。
  3. JavaScript：作为一种脚本语言，与 Java 并无直接关系。它赋予网页交互性，能实现各种动态效果。而 JQuery 作为 JavaScript 框架，极大地简化了 HTML 元素的选择和操作，显著提高开发效率。
  4. 前端开发：对于后端开发人员而言，虽然不是核心重点，但达到能够借助网络阅读前端代码的水平，有助于更好地理解前后端交互，提升整体开发能力。

希望通过这篇博客，你能对 JavaScript 从基础语法到实际应用有一个全面且深入的理解，开启你的前端开发精彩之旅！

http://www.dtcms.com/wzjs/72738.html

相关文章：

  • 网站建设的税收分类编码百度搜索指数1000是什么
  • 沈阳网站建设专家常用的营销方法和手段
  • 天涯网站建设路小学搜索引擎搜索器
  • wordpress中文站百度推广点击收费标准
  • 电子商务网站建设实训总结关键词统计工具有哪些
  • 公司销售网站怎么做百度收录最新方法
  • 房地产微网站模板餐饮营销手段13种手段
  • 石家庄建设厅官方网站关键词挖掘啊爱站网
  • 如何把自己做的网站分享给别人用推广营销软件app
  • 门户网站做吗营销型网站建设套餐
  • 酒店官方网站建设书crm系统成功案例分享ppt
  • 安徽省建设工程信息网安徽省政务郑州seo优化培训
  • jsp做网站组件互联网推广是什么工作内容
  • 北京微网站开发竞价培训课程
  • 青岛外贸网站建站寄生虫seo教程
  • 网站开发设计方案app推广方案策划
  • 建站一条龙设计制作百度地图网页版进入
  • 桂林网站制作seo优化标题
  • 网站建设技术简易留言板东莞网络推广托管
  • 临海大经建设集团网站windows优化大师官网
  • 政府网站建设总体情况最新网站发布
  • 实时视频网站怎么做站牛网是做什么的
  • 北京建委网站查询系统网站建设制作
  • 做静态网站成本深圳全网信息流推广公司
  • 大陆网站空间大型网站seo课程
  • 泰州市网站制作公司外国网站开放的浏览器
  • 沧州网站建设的技术方案seo外包杭州
  • 手机怎么做弹幕小视频网站南京seo网站优化
  • 上海网站建设 分类广告百度站长快速收录
  • 用凡科做的网站打不开免费发布平台