Java Script

早起给猫开空调

于 2024-08-18 23:21:29 发布

阅读量498

点赞数 15

文章标签： java 开发语言

本文链接：https://blog.csdn.net/k11582kk/article/details/141271473

版权

引入

内部 script：

内部 script 是指将 JavaScript 代码直接写在 HTML 文件中的

<!DOCTYPE html>
<html>

<body>

  <script>
    alert("这是内部脚本的示例！");
  </script>

</body>

</html>

内部 script 的优点是简单直接，适用于小型、简单的脚本。但对于大型项目，过多的代码写在 HTML 文件中可能会导致文件变得混乱，不利于维护和管理。

外部 script：

外部 script 是将 JavaScript 代码写在一个独立的 .js 文件中，然后通过

<!DOCTYPE html>
<html>

<body>

  <script src="script.js"></script>

</body>

</html>

其中 script.js 是一个独立的 JavaScript 文件，内容可能如下：

alert("这是外部脚本的示例！");

外部 script 的优点在于可以将 JavaScript 代码与 HTML 结构分离，提高代码的可维护性和可重用性。多个 HTML 文件可以引用同一个外部 JavaScript 文件，方便统一管理和修改代码。

自闭合的概念

在 HTML 中，“自闭合” 指的是一种标签的书写方式，即标签以 <标签名 /> 的形式出现，而不是传统的 <标签名></标签名> 形式。
例如：

<img src="image.jpg" />

就是一个自闭合标签。自闭合标签不需要有对应的结束标签。
需要注意的是，并非所有的 HTML 标签都支持自闭合的写法。像的形式。
再比如，
标签通常写成
的自闭合形式，用于表示换行。
自闭合标签的使用可以使代码更加简洁，但必须遵循 HTML 标准中对各个标签的规定

== 注意：JS不允许自闭合 ==

分割线

JS变量

var 关键字：

在较旧的 JavaScript 代码中常用。但存在一些作用域和变量提升的问题。

var num = 5;

let 关键字：

具有块级作用域，即在花括号 {} 内声明的 let 变量，其作用域仅限于该块。

{
  let message = "Hello";
  console.log(message); 
}
// 在花括号外访问 message 会报错
// console表示在控制台对message进行输出

const 关键字：

用于声明常量，即声明后其值不能被重新赋值。但如果 const 变量指向的是一个对象或数组，其内部的属性或元素可以被修改。

const person = { name: "John" };
person.name = "Jane";  // 可以修改对象的属性

JS函数

在 JavaScript 中，函数是一段可以被重复调用的代码块，用于执行特定的任务或计算并返回结果。
函数的定义可以使用函数声明或函数表达式两种方式。

函数声明：

function functionName(parameters) {
  // 函数体
  return result;  // 可选的返回值
}

function add(a, b) {
  return a + b;
}

函数表达式：

let functionName = function(parameters) {
  // 函数体
  return result;  // 可选的返回值
};

let multiply = function(a, b) {
  return a * b;
};

函数可以接受参数，参数用于向函数传递数据，函数内部使用这些参数进行计算或操作。
函数还可以返回值，通过 return 语句将计算结果返回给调用者。

function square(num) {
  return num * num;
}
let result = square(5);  // result 的值为 25

函数还支持默认参数和剩余参数等特性。

默认参数：

function greeting(name = "Guest") {
  console.log(`Hello, ${name}!`);
}
greeting();  // 输出 "Hello, Guest!"
greeting("John");  // 输出 "Hello, John!"

剩余参数：

function sum(...numbers) {
  let total = 0;
  for (let num of numbers) {
    total += num;
  }
  return total;
}
console.log(sum(1, 2, 3, 4, 5));  // 输出 15

函数在 JavaScript 编程中是非常重要的组成部分，它有助于提高代码的复用性、可读性和可维护性。

String类型

在 JavaScript 中，创建字符串有多种方式。例如：

1.利用构造函数初始化

var Str = new String("我是一个字符串")；

2.直接声明

let str1 = "Hello World";
let str2 = 'This is also a string';

字符串函数

字符串函数: JS String函数操作手册

JS对象

可以类比C++的类进行理解
在这里插入图片描述
注意其中的函数可以省略function

JSON对象

在这里插入图片描述
注意字符串变量需要用单引号进行定义而JSON对象中的键仍需要加双引号

在 JavaScript 中，JSON（JavaScript Object Notation）是一种轻量级的数据交换格式。
JSON 对象有两个主要的方法：JSON.parse() 和 JSON.stringify() 。
JSON.parse() 方法用于将一个有效的 JSON 字符串转换为 JavaScript 对象。

let jsonStr = '{"name": "John", "age": 30, "city": "New York"}';
let obj = JSON.parse(jsonStr);
console.log(obj.name);

__JSON.stringify()__ 方法则用于将 JavaScript 对象转换为 JSON 字符串。

//JSON格式  ———— 键值对
let person = {
  name: "Alice",
  age: 25,
  hobbies: ["reading", "swimming"],
  function(形参列表){}
};

let jsonString = JSON.stringify(person);
console.log(jsonString);

例如，如果您从服务器接收到一个 JSON 格式的数据，就可以使用 JSON.parse() 来将其转换为 JavaScript 对象，以便进行操作和处理。相反，如果您需要将 JavaScript 对象发送到服务器或存储在本地，通常会使用 JSON.stringify() 将其转换为字符串格式。

BOM对象

window 对象：这是 BOM 的核心对象，表示浏览器窗口本身。
window.location：包含有关当前 URL 的信息，例如 href（完整的 URL）、protocol（协议）、host（主机名和端口）等。

console.log(window.location.href);

在这里插入图片描述
可以直接用这个方法进行url的设置并重定向到指定的url

window.history：用于操作浏览器的历史记录，可以进行前进、后退等操作。
window.screen：提供有关屏幕的信息，如宽度、高度等。

console.log(window.screen.width);

window.navigator：包含有关浏览器的信息，例如浏览器名称、版本等。
BOM 使得 JavaScript 能够控制浏览器的行为，例如打开新窗口、调整窗口大小、滚动页面等。
例如，使用 window.open() 方法可以打开一个新的浏览器窗口：

window.open('https://www.example.com', '_blank');

使用 window.resizeTo() 方法可以调整窗口的大小：

window.resizeTo(800, 600);

setInterval函数

周期性的执行指定的函数

settTmeout函数

经过指定时间执行一次

DOM对象

在这里插入图片描述

DOM操作获取Element 元素对象

1.getElementById() 方法：通过元素的 id 属性来获取元素。

   let element = document.getElementById('yourElementId');

例如，如果有一个元素 div id=“myDiv”，则可以使用 document.getElementById(‘myDiv’) 来获取它。
2.getElementsByTagName() 方法：通过元素的标签名获取元素的集合（HTMLCollection）。

   let elements = document.getElementsByTagName('div');

这将返回页面中所有的 div 元素组成的集合。
3.getElementsByClassName() 方法：通过元素的 class 属性值获取元素的集合。

   let elements = document.getElementsByClassName('yourClassName');

比如，对于具有 class=“myClass” 的元素，可以使用这个方法获取。
6.根据name属性获取
在这里插入图片描述

5.querySelector() 方法：通过 CSS 选择器获取第一个匹配的元素。

   let element = document.querySelector('.yourSelector');

例如，document.querySelector(‘#myId’) 可以获取 id 为 myId 的元素。
6.querySelectorAll() 方法：通过 CSS 选择器获取所有匹配的元素集合（NodeList）。

   let elements = document.querySelectorAll('.yourSelector');

例如，document.querySelectorAll(‘div.myClass’) 可以获取所有具有 class=“myClass” 的

元素。

如何直接修改获得的元素值

通过查找手册的方式，查找需要修改的元素的封装的DOM对象的相应的属性和方法：：

在这里插入图片描述

直接调用innerHTML方法修改元素内容

![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/8aa4d009b5d045fb8b318b623e839221.png)

案例：通过修改DOM属性完成下列操作

在这里插入图片描述

1.img对象的修改可以通过src属性
在这里插入图片描述

var img = document.getElementById('h1');
img.src = "xxx"

在这里插入图片描述

2.修改div标签，由于div标签没有特有的管理修改的属性，但是支持普通元素属性，随意通过调用普通元素属性的innerHTML属性进行修改

如上同时进行了字体颜色的修改

3.复选框改为选中如上，只需要将ele.checked改为true即可

JS事件和事件监听

事件绑定

1.通过HTML的事件属性，将HTML和JS进行耦合
在这里插入图片描述
2.通过DOM元素属性绑定

常见事件

在这里插入图片描述

案例

在这里插入图片描述

案例基础代码：

<body> 
<img 1 d="light" src="img/off.gif" > <br>
<input type-"button" value-"点亮" >
<input type="button" value="熄灭" >
<br><br> 
<input type="text" id="name" value="TCAST" <br><br> 
<input type="checkbox" name-"hobby" > 电影
<input type="checkbox" name-"hobby" > 旅游
<input type="checkbox" name="hobby" > 游戏
<br> 
<input type="button" value="全选" >
<input type="button" value="反选" >
</body>

在这里插入图片描述

定义点亮和熄灭事件的两个方法

<input type-"button" value-"点亮"  onclick = "on()">
<input type="button" value="熄灭"   onclick = "off()">

1.获取img元素对象
2.进行图片的更换
function on(){
	let ele = document.getElementById("light");
	ele.src = "off.gif"; //修改元素属性
}

更改大小写的两个方法

在这里插入图片描述

全选和反选

在这里插入图片描述

早起给猫开空调

关注

15
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Java Script

input type-"button" value-"点亮" onclick = "on()"><input type="button" value="熄灭" onclick = "off()">1.获取img元素对象2.进行图片的更换//修改元素属性。
复制链接

扫一扫