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

解析CSS与JavaScript的使用方法及ECMAScript语法规则

news 2025/7/8 13:32:08

一、CSS的三种使用方式

CSS（层叠样式表）用于定义网页的样式和布局。以下是CSS的三种使用方式：

1. 内联样式

内联样式是最直接的应用方式，它通过HTML标签的style属性来定义。

代码示例：

<h1 style="color: blue; background-color: brown;">行内样式示例</h1>

特点：

仅影响设置了该样式的单个标签。
不利于维护和复用。

2. 内嵌样式

内嵌样式在HTML文档的<head>部分使用<style>标签定义，可以影响当前页面中的所有匹配的标签。

代码示例：

<head><style>h1 {color: aqua;text-align: center;font-size: 50px;}</style>
</head>
<body><h1>内嵌样式01</h1><h1>内嵌样式02</h1>
</body>

特点：

仅限于当前页面。
方便统一页面样式。

3. 外部样式表

外部样式表通过<link>标签引用一个外部的CSS文件，可以跨页面影响多个标签。

代码示例：

<head><link rel="stylesheet" href="styles.css">
</head>

外部CSS文件（styles.css）：

h1 {color: aqua;text-align: start;font-size: 50px;background-color: azure;
}

特点：

跨页面复用样式。
便于维护和更新。

二、JavaScript的三种使用方式

JavaScript是用于网页交互的脚本语言，以下是它的三种使用方式：

1. 元素绑定事件

通过HTML元素的事件属性（如onclick）来绑定JavaScript代码。

代码示例：

<button onclick="alert('hello world!');">点击我</button>

特点：

适用于简单的交互。

2. 内嵌JavaScript

在HTML文档中使用<script>标签直接写入JavaScript代码。

代码示例：

<script>alert("你好！");
</script>

特点：

适合快速原型开发。

3. 外部JavaScript文件

通过<script>标签的src属性引用外部的JavaScript文件。

代码示例：

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

外部JavaScript文件（script.js）：

alert("我有一个毛衫");

特点：

代码模块化，便于维护。

三、JavaScript的三种输出方式

JavaScript提供了以下三种输出方式：

弹窗输出（alert）
主界面显示（document.write）
控制台输出（console.log）

代码示例：

<head><script>alert("第一种输出方式弹窗");</script>
</head>
<body><script>document.write("第二种输出方式主界面显示<br>");console.log("第三种输出方式控制台输出");</script>
</body>

四、ECMAScript变量命名规则

ECMAScript是JavaScript的语言标准，变量命名遵循以下规则：

以字母、下划线（_）或美元符号（$）开头。
后续字符可以是字母、数字、下划线或美元符号。

代码示例：

var num = 100;
var $name = "张三";
var _age = 25;

五、使用prompt函数进行输入

prompt函数用于显示可提示用户输入的对话框。

代码示例：

var num0 = prompt("请输入一个数字：", 0);
var num1 = prompt("请输入一个数字：", 0);
alert(num0 + "*" + num1 + "=" + num0 * num1);

注意：

prompt函数获得的数据为字符串类型，如果需要进行计算，需要进行类型转换。

六、数据类型与相关函数

JavaScript的数据类型包括数值、字符串、布尔值和对象。以下是具体的示例代码，展示了如何获取变量的类型，并转换数据类型以进行计算。

数值（Number）

var num0 = 10;
document.write(num0, typeof(num0));

结果：10 number

字符串（String）

var string0 = 'hello';
document.write(string0, typeof(string0));

结果：hello string

布尔值（Boolean）

var bool = true;
var FF = 1 < 0;
document.write(bool, typeof(bool), '<br>', FF, typeof(FF));/* true = 1
false = 0

结果：true boolean false boolean

对象（Object）

在JavaScript中，函数也是一种对象。

function sayHello() {alert('Hello, World!');
}
document.write(typeof(sayHello));

结果：function

类型转换

如果需要进行计算，我们需要确保数据类型正确。以下是一些常用的数据类型转换方法：

转换为字符串：使用toString()方法或String()函数。

var num0 = 10;
var stringNum = num0.toString();
document.write(stringNum, typeof(stringNum));

结果：10 string

转换为数字：使用parseInt()或Number()方法。

var num0 = prompt("请输入一个数字：", 0);
var num1 = prompt("请输入一个数字：", 0);
var numSum = parseInt(num0) * parseInt(num1);
alert(numSum);

注意：

parseInt()和Number()函数会将字符串转换为数字。
如果字符串不能转换为数字，它们会返回NaN（不是一个数字）。

七、运算符

常见运算符

var a = 10, b = 3;// 加法运算document.write('10+3=', a + b, '<br>'); // 结果：10+3=13// 减法运算document.write('10-3=', a - b, '<br>'); // 结果：10-3=7// 乘法运算document.write('10*3=', a * b, '<br>'); // 结果：10*3=30// 除法运算document.write('10/3=', a / b, '<br>'); // 结果：10/3=3.3333333333333335// 取余数运算document.write('10%3=', a % b, '<br>'); // 结果：10%3=1// 自增运算document.write(a++, '<br>'); // 先输出a的值（10），然后a自增1变为11// 自减运算document.write(--a, '<br>'); // 先a自减1变为10，然后输出a的值10// 幂运算document.write('10^3=', a ** b, '<br>'); // 结果：10^3=1000// 复合赋值运算document.write('a+=b', a += b, '<br>'); // 先输出a的值（10），然后a=a+b变为13//关系运算符document.write('a>b',a>b,'<br>'); //返回boolean类型document.write('a<=b',a<=b,'<br>');document.write('a==b',a==b,'<br>');//等于document.write('a===b',a===b,'<br>');//全等于，全等要求类型也相等//逻辑运算符document.write('a&&b',a&&b,'<br>');//与或非document.write('a||b',a||b,'<br>');document.write('!a',!a,'<br>');

八、代码结构

在JavaScript中，代码的结构非常重要，它决定了代码的执行顺序和逻辑。以下是代码结构的三种基本类型：

1. 顺序结构

顺序结构是最基本的代码结构，代码按从上到下的顺序执行。所有代码主函数都属于这种结构。

// 示例代码
console.log('这是顺序结构');

2. 选择（分支）结构

选择结构根据不同的条件选择执行不同的代码块。JavaScript中的选择结构主要包括单分支、双分支和多分支。

单分支：如果条件为真，则执行相应的代码块。

if (number % 2 == 0) {alert(number, '是偶数');
}

双分支：根据两个条件中的任意一个，执行相应的代码块。

if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {alert('闰年');
} else {alert('平年');
}

多分支：根据不同的条件，执行多个代码块。

if (score >= 90) {alert('优秀');
} else if (score >= 80) {alert('良好');
} else if (score >= 70) {alert('中等');
} else if (score >= 60) {alert('及格');
} else {alert('不及格');
}

3. 循环结构

循环结构用于重复执行一段代码，直到满足某个条件为止。JavaScript中的循环主要包括for循环、while循环和do-while循环。break和continue的运用。

// for循环
for (var i = 0; i < 10; i++) {console.log(i);
}// while循环
var i = 0;
while (i < 10) {console.log(i);i++;
}// do-while循环
var i = 0;
do {console.log(i);i++;
} while (i < 10);//break和continue
//break结束循环
//求输入数值的平均数
var i=0,t=0;
while(true){t++;var num=prompt('输入一个数字：');i+=num;if(num==0){break;}
}
i/=t;
document.write('平均值为：'+i); //continue跳出本次循环
//输出10以内偶数
for(i=10;i>=0;i--){if(i%2!=0){continue;}document.write(i);}

解析CSS与JavaScript的使用方法及ECMAScript语法规则

一、CSS的三种使用方式 CSS（层叠样式表）用于定义网页的样式和布局。以下是CSS的三种使用方式： 1. 内联样式内联样式是最直接的应用方式，它通过HTML标签的style属性来定义。代码示例： <h1 style"color: …...

编程日记 2024/7/17 17:19:44

从零开始学习嵌入式----结构体struct和union习题回顾

一、通过结构体和自定义函数实现成绩从大到小的排序，要求在主函数内定义结构体数组。 #include <stdio.h> //定义一个结构体类型 typedef struct Student {int age;char name[32];float score; } STU; //定义一个函数实现成绩从小到大的排序 void fun(STU *p…...

编程日记 2024/7/17 17:18:43

建筑产业网元宇宙的探索与实践

在数字化浪潮的推动下，建筑产业网正迈入一个全新的元宇宙时代。这一变革不仅为建筑设计、施工与管理带来了革新，也为整个行业注入了新的活力与创造力。本文将深入探讨建筑产业网元宇宙的特点、应用及未来趋势，带您领略其在建筑行业中的独特魅…...

编程日记 2024/7/17 17:17:42

比较RMI、HTTP+JSON/XML、gRPC

RMI（Remote Method Invocation，远程方法调用）、HTTPJSON/XML、gRPC是三种不同的技术或协议，它们各自在远程通信、数据传输和服务交互方面有不同的特点和应用场景。以下是对这三种技术的详细比较： 1. RMI（R…...

编程日记 2024/7/17 17:16:41

软件工程-可行性分析

一、可行性分析可行性分析/研究目的是用最小的代价在尽可能短的时间内确定问题是否得到解决。 FVPV（1r）^n* FV：未来价值 PV：现值（当前货币金额） r：利率 n：时间期限纯收入累计的现…...

编程日记 2024/7/17 17:14:39

iOS ------ 消息传递和消息转发

一，消息传递在OC中，传递消息就是在对象上调用方法。相对于C语言的方法就“静态绑定”的函数，在编译器就决定了运行时所要调用的函数。在OC中，如果向某对象传递消息，就会使用动态绑定机制来决定需要调用那个方法。调…...

编程日记 2024/7/17 17:10:34

计算机视觉之Vision Transformer图像分类

Vision Transformer（ViT）简介自注意结构模型的发展，特别是Transformer模型的出现，极大推动了自然语言处理模型的发展。Transformers的计算效率和可扩展性使其能够训练具有超过100B参数的规模空前的模型。ViT是自然语言处理和计算…...

编程日记 2024/7/17 17:09:33

https://www.sysu-hcp.net/userfiles/files/2021/03/01/3327b564380f20c9.pdf 【深度学习】BeautyGAN: Instance-level Facial Makeup Transfer with Deep Generative Adversarial Network BeautyGAN: Instance-level Facial Makeup Transfer with Deep Generative Adversaria…...

编程日记 2024/7/17 17:08:32

一、CSS的三种使用方式

1. 内联样式

2. 内嵌样式

3. 外部样式表

二、JavaScript的三种使用方式

1. 元素绑定事件

2. 内嵌JavaScript

3. 外部JavaScript文件

三、JavaScript的三种输出方式

四、ECMAScript变量命名规则

五、使用prompt函数进行输入

六、数据类型与相关函数

数值（Number）

字符串（String）

布尔值（Boolean）

对象（Object）

类型转换

七、运算符

常见运算符

八、代码结构

1. 顺序结构

2. 选择（分支）结构

3. 循环结构

相关文章：