当前位置：网站首页 > 技术文章 > 正文

Javascript简介和基础数据类型

myzbx 2024-12-01 18:27 11 浏览

什么是JavaScript？

JavaScript 是世界上最流行的语言之一，是一种运行在客户端的脚本语言（Script 是脚本的意思）。
脚本语言：不需要编译，运行过程中由 js 解释器( js 引擎）逐行来进行解释并执行。
现在也可以基于 Node.js 技术进行服务器端编程。

JS 组成

ECMAScript

ECMAScript 是由ECMA 国际（原欧洲计算机制造商协会）进行标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为 JavaScript或 JScript，但实际上后两者是 ECMAScript 语言的实现和扩展。

ECMAScript：规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准。

DOM：文档对象模型

? 文档对象模型（DocumentObject Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过 DOM 提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）

BOM：浏览器对象模型

? 浏览器对象模型(Browser Object Model，简称BOM) 是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。

定义常量和变量

const用来定义常量。
let和var用来定义变量，推荐使用let，作用域更加严格。

<!-- 行内引入 -->
    <!-- <button onclick="alert('xxx')">点击我</button> -->
    <!-- 内部引入 -->
    <script>
        var b;
        b = 3;
        var b = 4;
        console.log(b);
        var a = 1;
        console.log(a);
        console.log('hello world.');
        // console.log('hello world.');
    </script>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // let a = 'cat';
        // console.log(a);
    </script>
</head>

<body>
    <script>
        let a;
        a = 1;
        // let a = 2;
        console.log(a);

        const PI = 3.1415926;
        // PI = 3.15;
        console.log(PI, typeof PI);
    </script>

    <!-- 外部引入 -->
    <script type="text/javascript" src="./static/js/test01.js">
        // console.log('xxx');
    </script>

    <!-- 模块引入 -->
    <script type="module">
        import { info, add } from "./static/js/test02.js";
        console.log(info['name']);
        console.log(add(1, 2));
    </script>
</body>

</html>

数据类型

JS 把数据类型分为两类：

简单数据类型（Number,String,Boolean,Undefined,Null）
复杂数据类型（object)
typeof 查看数据类型

<script>
        // let name = prompt('请输入你的名字');
        // console.log(name, typeof name);
        console.log(Number.MAX_VALUE);
        console.log(Number.MIN_VALUE);

        console.log(Infinity);
        console.log(-Infinity);

        console.log(NaN);

        console.log(isNaN(123));
        console.log(isNaN('hello'));

        console.log('10' == 10);
        console.log('10' === 10);
    </script>

输入输出

方法	说明	归属
alert(msg)	浏览器弹出警示框	浏览器
console.log(msg)	浏览器控制台打印输出信息	浏览器
prompt(info)	浏览器弹出输入框，用户可以输入	浏览器

const readline = require('readline');

const rl = readline.createInterface({
    input: process.stdin,
    output: process.stdout
});

let n = -1, buf = '';

rl.on('line', line => {
    if (n < 0) n = parseInt(line.trim());
    else {
        buf = line.split(' ').map(x => {
            return parseInt(x);
        });
        rl.close();
    }
});

rl.on('close', () => {
    let s = '';
    buf.sort();

    for (let i = 0; i < n; i++) s += buf[i].toString() + ' ';

    console.log(s);

    process.exit(0);
});

转义字符

转义符	解释说明
\n	换行符，n 是 newline 的意思
\ \	斜杠 \
\t	tab 缩进
\b	空格，b 是 blank 的意思

let name = 'cat', age = 28;
let info = `My name is ${name}, I\'m ${age} years old.`;

console.log(info);
console.log(`My name is ${name}, I\'m ${age} years old.`);

比较运算符

选择结构和循环结构

<script>
        let a = 2;
        if(a > 1) {
            console.log("yes");
            console.log("yes");
        }
        else console.log("no");

        for(let i = 1;  i <= 10; i++)
            console.log(i);

        let i = 20;
        while(i <= 30){
            console.log(i);
            i += 2;
        }
</script>

Javascript简介和基础数据类型

什么是JavaScript？

JS 组成

ECMAScript

DOM：文档对象模型

BOM：浏览器对象模型

定义常量和变量

数据类型

输入输出

转义字符

比较运算符

选择结构和循环结构

相关推荐

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

用上Vue3，你真的变了吗?（vue3 key）

说下你的vue项目的目录结构，该怎么划分?

8.7k star，一款超炫酷的动态可视化大屏项目

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

这么牛逼的cursor功能，赶紧用起来

20个免费音乐音效下载网站，无版权素材商业影片也可用

什么是“恒定光圈”，什么是“浮动光圈”?-摄影早自习第331

谷歌SEO:外贸电商网站On-page SEO优化实战「附案例」