美橙互联 网站备案拍照,企业查询天眼查免费,自助建站系统免费模式,html5网站有点目录 1.JavaScript
1.输出
2.变量和数据类型
3.运算符
4.数组
5.函数 6.面向对象
7.ES6面向对象
2.BOM
1.document对象
3.DOM
4.JSON 1.JavaScript JavaScript是一种脚本编程语言#xff0c;通常用于为网页增加交互性和动态效果。它是一种高级语言#xff…目录 1.JavaScript
1.输出
2.变量和数据类型
3.运算符
4.数组
5.函数 6.面向对象
7.ES6面向对象
2.BOM
1.document对象
3.DOM
4.JSON 1.JavaScript JavaScript是一种脚本编程语言通常用于为网页增加交互性和动态效果。它是一种高级语言可以在客户端即网页浏览器和服务器端运行。JavaScript的设计目标是让网页和用户能够交互动态地改变内容、样式和行为。 JavaScript的语法和结构与其他编程语言如C语言和Java类似易于学习和理解。它不需要编译可以直接在网页中嵌入使用因此被广泛应用于网页开发。 JavaScript可以用来操作网页中的HTML元素、处理用户输入、发送网络请求、验证表单、创建动画效果等。它还支持事件处理可以对按钮点击、鼠标移动、键盘输入等用户操作进行响应。
JavaScript的特点包括
强大的交互性通过JavaScript可以在用户与网页之间实现丰富的交互体验。跨平台性JavaScript可以在各种操作系统和浏览器中运行无需额外配置。轻量级JavaScript的代码通常很小加载速度快不会给网页带来过多的负担。丰富的库和框架JavaScript拥有许多开源的库和框架可以帮助开发人员更高效地开发和维护网页。
1.输出 JavaScript 可以通过不同的方式来输出数据
使用 window.alert() 弹出警告框。使用 document.write() 方法将内容写到 HTML 文档中。 使用 innerHTML 写入到 HTML 元素。 使用 console.log() 写入到浏览器的控制台。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript// 在 head 部分添加动态内容document.write(标题);/script
/head
bodyh1 idh1JavaScript/h1script// 在 body 部分添加动态内容document.write(h1这是一个标题/h1);document.write(p这是一个段落/p);document.getElementById(h1).innerHTML前端编程艺术window.alert(666);console.log(666)/scriptscript src1.js/script
/body
/html 2.变量和数据类型 在JavaScript中变量用于存储数据值。在声明变量之前应先使用关键字var、let或const来指定变量的作用域和特性。 JavaScript中的数据类型包括
基本数据类型
字符串String用于表示文本数据可以使用单引号或双引号包裹起来。数字Number用于表示数值包括整数和浮点数。布尔值Boolean表示真true或假false。空值Null表示一个空值或无效值。未定义Undefined表示一个未被赋值的变量。
引用数据类型
对象Object表示抽象的数据集合可以包含多个键值对。数组Array表示一组数据的集合可以包含多个项每个项可以是任意数据类型。函数Function是一段可重复执行的代码块可以通过函数名来调用。 变量的赋值可以通过等号来实现例如
var name John;
let age 25;
const PI 3.14;在JavaScript中变量的数据类型可以通过typeof操作符来检查。
console.log(typeof name); // 输出 string
console.log(typeof age); // 输出 number
console.log(typeof PI); // 输出 numberJavaScript中的变量和数据类型是动态的意味着同一个变量可以在不同的时候保存不同的数据类型。例如
var x 5;
console.log(typeof x); // 输出 numberx Hello;
console.log(typeof x); // 输出 string3.运算符 在JavaScript中运算符用于执行各种操作例如数学计算、逻辑判断和字符串连接等。下面是一些常见的JavaScript运算符
算术运算符
加法将两个值相加。减法-将一个值减去另一个值。乘法*将两个值相乘。除法/将一个值除以另一个值。取余%返回除法的余数。自增将变量的值增加1。自减--将变量的值减少1。
赋值运算符
简单赋值将值赋给变量。加等于将右侧的值加到变量上。减等于-将右侧的值减去变量。乘等于*将右侧的值乘以变量。除等于/将变量除以右侧的值。取余等于%将变量取余右侧的值。
比较运算符
等于检查两个值是否相等。不等于!检查两个值是否不相等。全等检查两个值是否严格相等。不全等!检查两个值是否不严格相等。大于检查左侧的值是否大于右侧的值。大于等于检查左侧的值是否大于或等于右侧的值。小于检查左侧的值是否小于右侧的值。小于等于检查左侧的值是否小于或等于右侧的值。
逻辑运算符
与如果操作数都为真则返回真。或||如果其中一个操作数为真则返回真。非用于对操作数的逻辑非运算。
字符串运算符
加号用于连接两个字符串。赋值运算符加号将右侧的字符串添加到左侧的字符串。
4.数组 在JavaScript中数组是一种用于存储多个值的有序集合。数组可以包含任意类型的数据包括数字、字符串、布尔值和其他数组等。下面是一些关于JavaScript数组的重要特性和操作 创建数组 可以使用数组字面量[ ]或Array构造函数来创建数组。例如
let arr1 [1, 2, 3]; // 使用数组字面量创建数组
let arr2 new Array(4, 5, 6); // 使用Array构造函数创建数组访问数组元素 可以使用索引来访问数组元素数组的索引从0开始。例如
let arr [1, 2, 3];
console.log(arr[0]); // 输出1
console.log(arr[1]); // 输出2
console.log(arr[2]); // 输出3修改数组元素 可以通过索引来修改数组元素的值。例如
let arr [1, 2, 3];
arr[1] 4;
console.log(arr); // 输出[1, 4, 3]数组长度 可以使用length属性来获取数组的长度。例如
let arr [1, 2, 3];
console.log(arr.length); // 输出3数组方法 JavaScript提供了许多内置的数组方法用于对数组进行操作。一些常用的数组方法包括
push()向数组末尾添加一个或多个元素。pop()从数组末尾移除最后一个元素。shift()从数组开头移除第一个元素。unshift()向数组开头添加一个或多个元素。splice()删除、替换或添加元素。slice()截取数组的一部分。concat()合并两个或多个数组。indexOf()返回指定元素的索引。sort()对数组进行排序。reverse()颠倒数组中元素的顺序。forEach()遍历数组并对每个元素执行特定的操作。
5.函数 在JavaScript中函数是一段可重复使用的代码块用于执行特定的任务或计算。函数有多种作用可以接受参数执行一些操作并返回一个值。以下是JavaScript函数的一些重要特性和用法 定义函数 可以使用function关键字来定义函数。函数有一个名称和一对圆括号括号内可以包含参数列表。函数体是一对花括号之间的代码块。例如
function greet(name) {console.log(Hello, name !);
}调用函数 可以使用函数名和传递的参数来调用函数以便执行其中的代码。例如
greet(Alice); // 输出 Hello, Alice!
greet(Bob); // 输出 Hello, Bob!函数参数 函数可以接受零个或多个参数这些参数可以在函数被调用时传递给它。参数可以在函数体内使用并根据需要进行操作。例如
function add(num1, num2) {return num1 num2;
}let result add(5, 3);
console.log(result); // 输出 8函数返回值 函数可以使用return语句来返回一个值该值可以在函数被调用时被调用方接收并使用。如果函数没有明确指定返回值则默认返回undefined。例如
function multiply(num1, num2) {return num1 * num2;
}let result multiply(4, 5);
console.log(result); // 输出 20函数表达式 除了使用function关键字定义函数外还可以使用函数表达式创建匿名函数。函数表达式没有名称并可以直接赋值给变量。例如
let greet function(name) {console.log(Hello, name !);
};greet(Alice); // 输出 Hello, Alice!高阶函数 在JavaScript中函数还可以作为参数传递给其他函数或者作为其他函数的返回值。这种能力使得JavaScript支持高阶函数的概念可以更加灵活地组织和操作代码。 内置函数 JavaScript还提供了许多内置的函数用于执行各种常见的任务比如字符串操作、数学计算、数组操作等。可以直接调用这些函数来完成特定的操作。 箭头函数是ES6ECMAScript 2015中引入的一种新的函数语法它提供了一种更简洁的方式来定义函数。箭头函数通常用于匿名函数或回调函数的简写形式。 以下是箭头函数的一些重要特点 箭头函数的语法 箭头函数使用箭头来分隔参数和函数体。它没有function关键字也没有自己的this、arguments和super绑定。例如
// 传统函数
function add(a, b) {return a b;
}// 箭头函数
let add (a, b) a b;箭头函数的简写形式 当函数体只包含一个表达式时可以省略花括号和return关键字。该表达式的结果将作为函数的返回值。例如
// 传统函数
function multiply(a, b) {return a * b;
}// 箭头函数
let multiply (a, b) a * b;箭头函数没有自己的this绑定 箭头函数没有自己的this值它从上下文中继承this值。这意味着箭头函数中的this始终指向定义它时的对象而不是调用它的对象。例如
function Person() {this.age 0;setInterval(() {this.age; // 这里的this指向Person对象console.log(this.age);}, 1000);
}let person new Person();箭头函数没有arguments绑定 与this类似箭头函数也没有自己的arguments对象。如果需要访问函数的参数可以使用rest参数...或使用展开运算符...来处理参数。例如
let sum (...args) {let total 0;for (let arg of args) {total arg;}return total;
};console.log(sum(1, 2, 3)); // 输出 66.面向对象 JavaScript是一门面向对象的编程语言它提供了一些内置的机制来支持面向对象编程。 JavaScript中的面向对象编程主要基于以下几个关键概念 对象对象是JavaScript中的基本构建块它封装了数据和行为。对象可以具有属性和方法。属性表示对象的状态或数据而方法表示对象的行为或操作。 类类定义了一组共享相同属性和方法的对象的蓝图。类是一种创建对象的模板或原型。在JavaScript中类是通过构造函数和原型来实现的。 构造函数构造函数是一个特殊的函数用于创建和初始化一个对象。构造函数通过使用new关键字来实例化一个对象。构造函数可以定义对象的属性和方法。 原型原型是一个对象它包含用于共享和继承属性和方法的对象。每个JavaScript对象都有一个原型它可以是其他对象或null。当访问对象的属性或方法时如果对象自身没有该属性或方法JavaScript会沿着原型链向上查找。 继承继承是一种机制通过它一个对象可以从另一个对象继承属性和方法。JavaScript使用原型链来实现继承。子类可以通过将父类的原型设置为自己的原型来继承父类的属性和方法。 下面是一个简单的示例展示了JavaScript中的面向对象编程的基本用法
// 定义一个类
function Person(name, age) {this.name name;this.age age;
}// 在类的原型上添加方法
Person.prototype.sayHello function() {console.log(Hello, my name is this.name);
};// 创建对象实例
let person1 new Person(Alice, 25);
let person2 new Person(Bob, 30);// 调用对象的方法
person1.sayHello(); // 输出Hello, my name is Alice
person2.sayHello(); // 输出Hello, my name is Bob继承和多态是面向对象编程中两个重要的概念。
继承Inheritance继承是一种机制通过它一个对象称为子类或派生类可以从另一个对象称为父类或基类继承属性和方法。继承可以使代码更加可复用和可扩展。子类可以使用父类的属性和方法也可以根据需要重写或扩展父类的方法。 在JavaScript中继承通过原型链来实现。子类的原型被设置为父类的实例从而继承了父类的属性和方法。子类可以通过访问父类的原型来调用父类的方法。 下面是一个简单的继承示例
// 定义一个父类
function Animal(name) {this.name name;
}// 父类的方法
Animal.prototype.speak function() {console.log(this.name makes a sound.);
};// 定义一个子类
function Dog(name) {Animal.call(this, name); // 调用父类的构造函数
}// 子类继承父类的原型
Dog.prototype Object.create(Animal.prototype);
Dog.prototype.constructor Dog;// 子类的方法
Dog.prototype.speak function() {console.log(this.name barks.);
};// 创建对象实例
let animal new Animal(Animal);
let dog new Dog(Dog);// 调用对象的方法
animal.speak(); // 输出Animal makes a sound.
dog.speak(); // 输出Dog barks.在上面的示例中我们定义了一个父类Animal和一个子类Dog。子类Dog通过调用父类的构造函数Animal.call(this, name)来继承了父类的属性name。然后我们使用Object.create()方法将子类的原型设置为父类的实例从而实现了继承。子类Dog可以重写父类的方法speak()并在这个方法内部添加额外的行为。
多态Polymorphism多态是指同一个操作可以有不同的表现形式。在面向对象编程中多态性允许在不同的对象上执行相同的操作产生不同的结果。多态性提高了代码的灵活性和可扩展性。 在JavaScript中多态性通过对象的动态绑定来实现。不同的对象可以对同一个方法有不同的实现当调用这个方法时根据对象的类型确定要执行哪个实现。 下面是一个简单的多态示例
// 定义一个父类
function Animal(name) {this.name name;
}// 父类的方法
Animal.prototype.speak function() {console.log(this.name makes a sound.);
};// 定义一个子类
function Dog(name) {Animal.call(this, name);
}// 子类继承父类的原型
Dog.prototype Object.create(Animal.prototype);
Dog.prototype.constructor Dog;// 子类重写父类的方法
Dog.prototype.speak function() {console.log(this.name barks.);
};// 多态性示例
let animal new Animal(Animal);
let dog new Dog(Dog);function makeSound(animalObj) {animalObj.speak();
}makeSound(animal); // 输出Animal makes a sound.
makeSound(dog); // 输出Dog barks.在上面的示例中我们定义了一个函数makeSound()它接受一个Animal对象作为参数并调用对象的speak()方法。根据传入的对象的类型调用方法的实现不同产生不同的结果。当我们分别将父类Animal对象和子类Dog对象传递给makeSound()函数时实现的方法也不同分别输出不同的结果。
7.ES6面向对象 在ES6 (ECMAScript 2015) 中引入了一些新的语法和特性使得面向对象编程更加简洁和易于理解。下面是ES6中面向对象编程的一些特性
类ClassES6引入了类的概念可以使用class关键字定义一个类。类可以包含构造函数、属性和方法通过实例化类可以创建对象。
class Animal {constructor(name) {this.name name;}speak() {console.log(this.name makes a sound.);}
}let animal new Animal(Animal);
animal.speak(); // 输出Animal makes a sound.继承ES6中的类支持继承可以使用extends关键字继承另一个类的属性和方法。子类可以调用父类的构造函数和方法并可以根据需要重写或扩展父类的方法。
class Dog extends Animal {constructor(name) {super(name); // 调用父类的构造函数}speak() {console.log(this.name barks.);}
}let dog new Dog(Dog);
dog.speak(); // 输出Dog barks.super关键字super关键字用于调用父类的构造函数或方法。在子类的构造函数中使用super关键字调用父类的构造函数并可以传递参数。在子类的方法中使用super关键字调用父类的方法。 静态方法Static MethodES6引入了静态方法的概念可以使用static关键字定义一个静态方法。静态方法是属于类而不是实例的通过类本身调用而不是实例。
class MathUtils {static sum(a, b) {return a b;}
}console.log(MathUtils.sum(2, 3)); // 输出5Getter 和 SetterES6中可以使用get和set关键字定义属性的访问方法。get方法用于获取属性的值set方法用于设置属性的值。
class Rectangle {constructor(width, height) {this._width width;this._height height;}get area() {return this._width * this._height;}set width(value) {this._width value;}set height(value) {this._height value;}
}let rectangle new Rectangle(5, 7);
console.log(rectangle.area); // 输出35rectangle.width 10;
console.log(rectangle.area); // 输出702.BOM BOMBrowser Object Model是浏览器对象模型的简称它提供了一组用于操作浏览器窗口和页面内容的对象和方法。BOM是JavaScript与浏览器交互的接口通过BOM可以获取和操作浏览器窗口、导航、历史记录、页面内容等。 BOM对象包括以下重要的对象
window对象window对象是BOM的顶层对象表示整个浏览器窗口。它提供了一系列方法和属性用于操作窗口的大小、位置、打开新窗口、关闭窗口等。
// 打开新窗口
window.open(https://www.google.com, _blank);// 关闭当前窗口
window.close();// 获取当前窗口的宽度和高度
let width window.innerWidth;
let height window.innerHeight;location对象location对象用于获取和设置当前窗口的URL信息。它提供了一些属性和方法例如获取URL的协议、主机名、路径名、查询参数等。
// 获取当前URL的主机名
let hostname location.hostname;// 重定向到新的URL
location.href https://www.google.com;history对象history对象用于操作浏览器的历史记录。它提供了一些方法例如前进、后退、跳转到指定页面等。
// 前进一步
history.forward();// 后退一步
history.back();// 跳转到历史记录中的某个页面
history.go(-2);navigator对象navigator对象用于获取浏览器的信息。它提供了一些属性例如浏览器的名称、版本号、操作系统等。
// 获取浏览器的名称
let browserName navigator.appName;// 获取浏览器的用户代理字符串
let userAgent navigator.userAgent;1.document对象 document对象是BOM中的一部分它表示当前HTML文档并提供了一系列方法和属性用于操作和操纵HTML文档的内容、结构和样式。 常见的document对象的属性和方法包括 getElementById(): 通过元素的id属性获取对应的DOM元素。
let element document.getElementById(myElement);getElementsByClassName(): 通过元素的class属性获取一组DOM元素。
let elements document.getElementsByClassName(myClass);getElementsByTagName(): 通过元素的标签名获取一组DOM元素。
let elements document.getElementsByTagName(div);querySelector(): 通过CSS选择器获取匹配的第一个DOM元素。
let element document.querySelector(.myClass);querySelectorAll(): 通过CSS选择器获取匹配的所有DOM元素。
let elements document.querySelectorAll(.myClass);createElement(): 创建一个指定的HTML元素。
let element document.createElement(div);appendChild(): 在指定元素的子节点列表末尾添加新的子节点。
let parent document.getElementById(parentDiv);
parent.appendChild(element);removeChild(): 从指定元素的子节点列表中移除一个子节点。
let parent document.getElementById(parentDiv);
parent.removeChild(element);innerHTML: 获取或设置元素的HTML内容。
let element document.getElementById(myElement);
let htmlContent element.innerHTML;
element.innerHTML spanNew content/span;style: 获取或设置元素的样式属性。
let element document.getElementById(myElement);
element.style.color red;3.DOM DOMDocument Object Model文档对象模型是一种用于表示和操作HTML、XML文档的APIApplication Programming Interface应用程序编程接口。 DOM将HTML、XML文档表示为一个由节点Node组成的树状结构。每个节点都代表文档中的一个部分例如元素、属性、文本等。节点之间通过父子关系和兄弟关系相互连接形成了文档的结构。 常见的DOM节点类型包括
元素节点Element Node表示HTML或XML文档中的元素例如lt;div、lt;p等。文本节点Text Node表示HTML或XML文档中的文本内容。属性节点Attribute Node表示HTML或XML文档中元素的属性例如id、class等。注释节点Comment Node表示HTML或XML文档中的注释内容。 通过DOM我们可以使用一些API来访问和操作这些节点例如
getElementById(): 通过元素的id属性获取对应的DOM元素。getElementsByClassName(): 通过元素的class属性获取一组DOM元素。getElementsByTagName(): 通过元素的标签名获取一组DOM元素。querySelector(): 通过CSS选择器获取匹配的第一个DOM元素。querySelectorAll(): 通过CSS选择器获取匹配的所有DOM元素。createElement(): 创建一个指定的HTML元素。appendChild(): 在指定元素的子节点列表末尾添加新的子节点。removeChild(): 从指定元素的子节点列表中移除一个子节点。innerHTML: 获取或设置元素的HTML内容。style: 获取或设置元素的样式属性。 通过这些API我们可以动态地操作和修改HTML、XML文档的结构、内容和样式实现动态页面的效果和交互。
4.JSON JSONJavaScript Object NotationJavaScript对象表示法是一种轻量级的数据交换格式。它是基于JavaScript的一个子集可以用来表示结构化数据。 JSON使用键值对的方式来表示数据。一个JSON对象由一对花括号包围键值对之间使用逗号分隔。键是一个字符串值可以是字符串、数字、布尔值、数组、对象或null。 下面是一个简单的JSON对象的例子
{name: John,age: 30,isStudent: false,hobbies: [reading, painting, playing guitar],address: {street: 123 Main St,city: New York,country: USA}
}在上面的例子中键是字符串值可以是字符串、数字、布尔值、数组、对象或null。键值对之间使用逗号分隔对象的键和值之间使用冒号分隔。 在JavaScript中可以使用JSON对象来处理JSON数据。JSON对象提供了两个核心方法来处理JSON数据JSON.parse()和JSON.stringify()。 JSON.parse(): 该方法用于将JSON字符串解析为JavaScript对象。 var jsonStr {name: John, age: 30, isStudent: false};
var jsonObj JSON.parse(jsonStr);console.log(jsonObj.name); // 输出: John
console.log(jsonObj.age); // 输出: 30
console.log(jsonObj.isStudent); // 输出: false在上面的例子中JSON.parse()将JSON字符串解析为JavaScript对象并存储在jsonObj变量中。我们可以通过访问对象的属性来获取相应的值。 JSON.stringify(): 该方法将JavaScript对象转换为JSON字符串。 var obj {name: John,age: 30,isStudent: false
};var jsonString JSON.stringify(obj);console.log(jsonString); // 输出: {name:John,age:30,isStudent:false}在上面的例子中JSON.stringify()将JavaScript对象obj转换为JSON字符串并存储在jsonString变量中。
