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

王同学_116

已于 2024-07-16 17:47:10 修改

阅读量642

点赞数 12

文章标签： css javascript 前端

于 2024-07-16 17:40:22 首次发布

本文链接：https://blog.csdn.net/m0_71332744/article/details/140458927

版权

一、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循环。

// 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);

王同学_116

关注

12
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
解析CSS与JavaScript的使用方法及ECMAScript语法规则

本文详细介绍了CSS和JavaScript的三种使用方式：CSS的内联样式、内嵌样式和外部样式表，以及JavaScript的元素绑定事件、内嵌脚本和外链脚本。通过示例代码，展示了每种方式的应用场景和效果，帮助读者更好地理解和掌握网页设计中的样式和交互实现技巧。·········
复制链接

扫一扫