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

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

news 2025/7/23 15:32:06

一、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提供了以下三种输出方式：

  1. 弹窗输出（alert）
  2. 主界面显示（document.write）
  3. 控制台输出（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);}

http://www.lryc.cn/news/401478.html

相关文章：

  • 从零开始学习嵌入式----结构体struct和union习题回顾
  • 建筑产业网元宇宙的探索与实践
  • 比较RMI、HTTP+JSON/XML、gRPC
  • 软件工程-可行性分析
  • iOS ------ 消息传递和消息转发
  • 计算机视觉之Vision Transformer图像分类
  • 【深度学习】BeautyGAN: 美妆，化妆，人脸美妆
  • RocketMQ~架构与工作流程了解
  • 学习Python的IDE功能--（一）入门导览
  • gdb调试多线程程序
  • 实战GraphRAG（一）：初步体验GraphRAG及其与RAG的对比
  • 37、PHP 实现一个链表中包含环，请找出该链表的环的入口结点
  • LIMS系统对实验室管理有哪些帮助？
  • 在GPU上运行PyTorch
  • 【内网穿透】打洞笔记
  • 第59期|GPTSecurity周报
  • 算法2--贪心算法
  • 本地部署 EVE: Unveiling Encoder-Free Vision-Language Models
  • 阿里云CDN- https（设计支付宝春节开奖业务）
  • 为何众多卖家选择加入亚马逊VC平台？他们的决策依据是什么？
  • Windows与Linux双机热备软件推荐
  • Mysql基础与安装
  • 线程的死锁和并发安全
  • docker 启动提示can not create sys fs cgroup cpuset....问题处理
  • [C/C++入门][ifelse]19、制作一个简单计算器
  • API取数实战：企业微信API取数教程
  • AI算法18-最小角回归算法Least Angle Regression | LARS
  • wordpress 调用另外一个网站的内容 按指定关键词调用
  • kotlin数据类型
  • [GWCTF 2019]babyvm