【Web开发手礼】探索Web开发的魅力（七）-JavaScript（1）-JS的调用方式与执行顺序、变量与运算符、输入输出

程序猿零零漆

于 2024-07-21 06:30:00 发布

阅读量1.2k

点赞数 38

分类专栏： Web应用文章标签：前端 javascript 开发语言 html

本文链接：https://blog.csdn.net/m0_63267251/article/details/140569218

版权

Web应用专栏收录该内容

18 篇文章 0 订阅

订阅专栏

主要讲解了JS的调用方式与执行顺序、变量与运算符、输入输出，可以当作一个日常的学习笔记。

HTML, CSS, JavaScript三者之间的关系

前言

主要讲解了JS的调用方式与执行顺序、变量与运算符、输入输出，可以当作一个日常的学习笔记。

JS的调用方式与执行顺序

使用方式

HTML页面中的任意位置加上<script type="module"></script>标签即可。

常见使用方式有以下几种：

直接在<script type="module"></script>标签内写JS代码。
直接引入文件：<script type="module" src="/static/js/index.js"></script>。
将所需的代码通过import关键字引入到当前作用域。

例如：

/static/js/index.js文件中的内容为：

let name = "acwing";

function print() {
    console.log("Hello World!");
}

export {
    name,
    print
}

<script type="module">
    import { name, print } from "/static/js/index.js";

    console.log(name);
    print();
</script>

执行顺序

类似于HTML与CSS，按从上到下的顺序执行；
事件驱动执行；

HTML, CSS, JavaScript三者之间的关系

CSS控制HTML
JavaScript控制HTML与CSS
为了方便开发与维护，尽量按照上述顺序写代码。例如：不要在HTML中调用JavaScript中的函数。

变量与运算符

let与const

用来声明变量，作用范围为当前作用域。

let用来定义变量；
const用来定义常量；

例如：

let s = "acwing", x = 5;

let d = {
    name: "yxc",
    age: 18,
}

const n = 100;

变量类型

number：数值变量，例如1, 2.5
string：字符串，例如"acwing", 'yxc'，单引号与双引号均可。字符串中的每个字符为只读类型。
boolean：布尔值，例如true, false
object：对象，类似于C++中的指针，例如[1, 2, 3]，{name: "yxc", age: 18}，null
undefined：未定义的变量

类似于Python，JavaScript中的变量类型可以动态变化。

运算符

与C++、Python、Java类似，不同点：

**表示乘方
等于与不等于用===和!==

===不仅判断类型，也判断数值。

输入输出

输入

从HTML与用户的交互中输入信息，例如通过input、textarea等标签获取用户的键盘输入，通过click、hover等事件获取用户的鼠标输入。
通过Ajax与WebSocket从服务器端获取输入
标准输入

js实现a+b

let fs = require('fs');
let buf = '';

process.stdin.on('readable', function() {
    let chunk = process.stdin.read();
    if (chunk) buf += chunk.toString();
});

process.stdin.on('end', function() {
    buf.split('\n').forEach(function(line) {
        let tokens = line.split(' ').map(function(x) { return parseInt(x); });
        if (tokens.length != 2) return;
        console.log(tokens.reduce(function(a, b) { return a + b; }));
    });
});

输出

调试用console.log，会将信息输出到浏览器控制台
改变当前页面的HTML与CSS
通过Ajax与WebSocket将结果返回到服务器

js代码如下：


let input = document.querySelector("textarea");
let run = document.querySelector("button");
let output = document.querySelector("pre");

function main(){
    run.addEventListener("click" , function() {
        let value = input.value;
        output.innerHTML = value;
    });

}

export {
    main
}

html代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="/static/css/index.css" type="text/css">
  
</head>
<body>
  输入：
  <br>
  <textarea name="" id="" cols="30" rows="10"></textarea>
  <br>
  <button>run</button>
  <br>
  <pre></pre>
  <script type="module">
    import {main} from "/static/js/index.js"
    main();
    
  </script>
  
</body>
</html>

css如下：

textarea{
    width: 500px;
    height: 300px;
    background-color: lightblue;
    font-size: 24px;
}

pre{
    width: 500px;
    height: 300px;
    font-size: 24px;
    background-color: lightcoral;
}

示例：

格式化字符串

字符串中填入数值：

let name = 'yxc', age = 18;
let s = `My name is ${name}, I'm ${age} years old.`;

定义多行字符串：

let s = 
`<div>
    <h2>标题</h2>
    <p>段落</p>
/div>`

保留两位小数如何输出

let x = 1.234567;
let s = `${x.toFixed(2)}`;

练习

输出Hello World。

function main(){
    console.log("Hello World");
}
export {
    main
}

输入两个数，计算两个数的和。


let input = document.querySelector("textarea");
let run = document.querySelector("button");
let output = document.querySelector("pre");

function main(){
    run.addEventListener("click", function(){
        let [ a , b ] = input.value.split(" ");
        a = parseInt(a), b = parseInt(b);
        output.innerHTML = a + b; 
    });
}
export {
    main
}

输入一个小数，返回向零取整之后的结果。


let input = document.querySelector("textarea");
let run = document.querySelector("button");
let output = document.querySelector("pre");

function main(){
    run.addEventListener("click", function(){
        let x = parseFloat(input.value);
        output.innerHTML = parseInt(x);
    });
}
export {
    main
}

输入a, b, c，输出 (a + b) * c 的值。


let input = document.querySelector("textarea");
let run = document.querySelector("button");
let output = document.querySelector("pre");

function main(){
    run.addEventListener("click", function(){
        let[a , b, c] = input.value.split(" ");
        a = parseFloat(a), b = parseFloat(b), c = parseFloat(c);
        output.innerHTML = (a + b) * c ;
        
    });
}
export {
    main
}

求反三位数。


let input = document.querySelector("textarea");
let run = document.querySelector("button");
let output = document.querySelector("pre");

function main(){
    run.addEventListener("click", function(){
       let x = input.value;
       let a = x % 10;
       x = parseInt(x / 10);
       let b = x % 10;
       x = parseInt(x / 10);
       let c = x;
       output.innerHTML = `${a}${b}${c}`;

    });
}
export {
    main
}

输出如下的菱形。

  *
 ***
*****
 ***
  *


let input = document.querySelector("textarea");
let run = document.querySelector("button");
let output = document.querySelector("pre");

function main(){
    run.addEventListener("click", function(){
       let s = "";
       s += '  *\n';
       s += ' ***\n';
       s += '*****\n';
       s += ' ***\n';
       s += '  *';
       output.innerHTML = s;

    });
}
export {
    main
}