seo网站推广与优化方案,宝安区住房和建设局网站,苏州展示型网站建设,网站超市安装个人博客#xff1a;haichenyi.com。感谢关注 1. 目录
1–目录2–组成3–内置对象 2. 组成 一直都在说JS#xff0c;JS#xff0c;到底啥是JS有了解过吗#xff1f;JS由哪几部分组成的呢#xff1f; 定义#xff1a; JavaScript是一种轻量级、解释型或即时编译型的编程语…个人博客haichenyi.com。感谢关注 1. 目录
1–目录2–组成3–内置对象 2. 组成 一直都在说JSJS到底啥是JS有了解过吗JS由哪几部分组成的呢 定义 JavaScript是一种轻量级、解释型或即时编译型的编程语言广泛用于Web开发 3部分组成 ECMAScriptDOMBOM
ECMAScript
ECMAScript简称ES是由ECMA国际标准化组织制定的一个脚本语言标准它是JavaScript的核心。它定义了JavaScript语言的基本语法、数据类型、操作符、控制语句、函数、对象等核心概念以及模块系统、异步编程、异常处理等高级特性。举几个简单的例子
//1.变量声明与赋值
// 使用var声明变量
var name John;
console.log(name); // 输出: John
// 使用let声明变量
let age 30;
console.log(age); // 输出: 30
// 使用const声明常量
const pi 3.14;
console.log(pi); // 输出: 3.14//2.函数定义与调用
// 使用function关键字定义函数
function add(a, b) {return a b;
}
console.log(add(2, 3)); // 输出: 5
// 使用函数表达式定义函数
const subtract function(a, b) {return a - b;
};
console.log(subtract(5, 3)); // 输出: 2
// 使用箭头函数定义函数
const multiply (a, b) a * b;
console.log(multiply(4, 5)); // 输出: 20//3.模板字符串
let name Alice;
let greeting Hello, ${name}!;
console.log(greeting); // 输出: Hello, Alice!//4.类与对象
class Person {constructor(name, age) {this.name name;this.age age;}greet() {console.log(Hello, my name is ${this.name});}
}
let person1 new Person(Bob, 25);
person1.greet(); // 输出: Hello, my name is Bob//5.模块
// module.js
export const name John;
export function greet() {console.log(Hello, name);
}
// main.js
import { name, greet } from ./module.js;
console.log(name); // 输出: John
greet(); // 输出: Hello, John//6.解构赋值
// 数组解构
let [a, b] [1, 2];
console.log(a); // 输出: 1
console.log(b); // 输出: 2
// 对象解构
let { name, age } { name: Alice, age: 30 };
console.log(name); // 输出: Alice
console.log(age); // 输出: 30/7./数组操作
// 创建数组
let arr [1, 2, 3, 4, 5];
// 访问数组元素
console.log(arr[0]); // 输出: 1DOMDocument Object Model文档对象模型
允许脚本动态地访问和更新文档的内容、结构和样式。以下是一些DOM操作的例子
//1.选择元素
var element document.getElementById(myElement); // 根据ID选择元素
var elements document.getElementsByClassName(myClass); // 根据类名选择元素集合
var paragraphs document.getElementsByTagName(p); // 根据标签名选择元素集合//2.访问和修改元素内容
var divContent document.getElementById(myDiv).innerHTML; // 获取元素的HTML内容
document.getElementById(myDiv).innerHTML pNew Content/p; // 设置元素的HTML内容
var text document.getElementById(myParagraph).textContent; // 获取元素的文本内容
document.getElementById(myParagraph).textContent New Text; // 设置元素的文本内容//3.修改元素样式
var element document.getElementById(myDiv);
element.style.color red; // 修改文本颜色
element.style.backgroundColor yellow; // 修改背景颜色
element.style.fontSize 20px; // 修改字体大小//4.创建和插入元素
var newDiv document.createElement(div); // 创建新的元素节点
newDiv.textContent This is a new div;
document.body.appendChild(newDiv); // 将新元素添加到页面的末尾
var newText document.createTextNode(Hello, this is a text node); // 创建新的文本节点
document.body.appendChild(newText); // 将文本节点添加到页面//5.删除元素
var parentElement document.getElementById(parentDiv);
var childElement document.getElementById(childDiv);
parentElement.removeChild(childElement); // 删除指定的子元素
var element document.getElementById(myDiv);
element.remove(); // 直接删除元素本身//6.事件处理
var button document.getElementById(myButton);
button.addEventListener(click, function() {alert(Button clicked!);
}); // 为元素添加事件监听器
button.removeEventListener(click, handleClick); // 为元素移除事件监听器假设handleClick是之前添加的事件处理函数BOMBrowser Object Model浏览器对象模型 提供了与浏览器窗口进行交互的方法和属性。只要是跟窗口相关的操作都属于BOM操作。比方说window调用的一些方法窗口的全屏与非全屏等等。以下是一些BOM操作的例子
//1.打开新窗口
window.open(https://www.example.com);//2.关闭当前窗口
window.close();//3.设置当前窗口大小
window.resizeTo(800, 600);//4.设置当前窗口大小
var currentUrl window.location.href; // 获取当前URL
window.location.href https://www.example.com; // 设置新的URL//5.获取和设置当前URL
var currentUrl window.location.href; // 获取当前URL
window.location.href https://www.example.com; // 设置新的URL//6.前进和后退浏览器历史记录
history.forward(); // 前进到下一个历史记录
history.back(); // 后退到上一个历史记录//7.全屏API
document.documentElement.requestFullscreen(); // 进入全屏状态
document.exitFullscreen(); // 退出全屏状态PS:整篇文章精炼一下如下 JS是一种轻量级、解释型或即时编译型的编程语言广泛用于Web开发。 由三部分组成ECMAScriptDOMBOM ECMAScriptjs的核心变量的定义方法的调用等等。 DOM操作跟element相关的一些方法。如获取元素修改元素样式修改元素内容删减元素之类的。 BOM操作跟窗口相关的如window的一些方法open之类的
