百度360必应搜狗淘宝本站头条
HTML5 标签标签HTML5 标签 (已废弃)HTML 简介键盘快捷键
当前位置：网站首页 > 技术文章 > 正文

Javascript简介和基础数据类型

zhezhongyun 2024-12-01 19:22 64 浏览

什么是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>

相关推荐

相关推荐

perl基础——循环控制_principle循环

在编程中，我们往往需要进行不同情况的判断，选择，重复操作。这些时候我们需要对简单语句来添加循环控制变量或者命令。if/unless我们需要在满足特定条件下再执行的语句，可以通过if/unle...

CHAPTER 2 The Antechamber of M de Treville 第二章 特雷维尔先生的前厅

CHAPTER1TheThreePresentsofD'ArtagnantheElderCHAPTER2TheAntechamber...

CHAPTER 5 The King&#39;S Musketeers and the Cardinal&#39;S Guards 第五章 国王的火枪手和红衣主教的卫士

CHAPTER3TheAudienceCHAPTER5TheKing'SMusketeersandtheCardinal'SGuard...

CHAPTER 3 The Audience 第三章 接见

CHAPTER3TheAudienceCHAPTER3TheAudience第三章接见M.DeTrévillewasatt...

别搞印象流!数据说明谁才是外线防守第一人!

来源：Reddit译者：@assholeeric编辑：伯伦WhoarethebestperimeterdefendersintheNBA?Here'sagraphofStea...

V-Day commemorations prove anti-China claims hollow

People'sLiberationArmyhonorguardstakepartinthemilitaryparademarkingthe80thanniversary...

EasyPoi使用_easypoi api

EasyPoi的主要特点：1.设计精巧,使用简单2.接口丰富,扩展简单3.默认值多,writelessdomore4.springmvc支持,web导出可以简单明了使用1.easypoi...

关于Oracle数据库12c 新特性总结_oracle数据库12514

概述今天主要简单介绍一下Oracle12c的一些新特性，仅供参考。参考：http://docs.oracle.com/database/121/NEWFT/chapter12102.htm#NEWFT...

【开发者成长】JAVA 线上故障排查完整套路!

线上故障主要会包括CPU、磁盘、内存以及网络问题，而大多数故障可能会包含不止一个层面的问题，所以进行排查时候尽量四个方面依次排查一遍。同时例如jstack、jmap等工具也是不囿于一个方面的问题...

使用 Python 向多个地址发送电子邮件

在本文中，我们将演示如何使用Python编程语言向使用不同电子邮件地址的不同收件人发送电子邮件。具体来说，我们将向许多不同的人发送电子邮件。使用Python向多个地址发送电子邮件Python...

提高工作效率的--Linux常用命令，能够决解95%以上的问题

点击上方关注，第一时间接受干货转发，点赞，收藏，不如一次关注评论区第一条注意查看回复：Linux命令获取linux常用命令大全pdf+Linux命令行大全pdf为什么要学习Linux命令？1、因为Li...

linux常用系统命令_linux操作系统常用命令

系统信息arch显示机器的处理器架构dmidecode-q显示硬件系统部件-(SMBIOS/DMI)hdparm-i/dev/hda罗列一个磁盘的架构特性hdparm-tT/dev/s...

小白入门必知必会-PostgreSQL-15.2源码编译安装

一PostgreSQL编译安装1.1下载源码包在PostgreSQL官方主页https://www.postgresql.org/ftp/source/下载区选择所需格式的源码包下载。cd/we...

Linux操作系统之常用命令_linux系统常用命令详解

Linux操作系统一、常用命令1．系统(1)系统信息arch显示机器的处理器架构uname-m显示机器的处理器架构uname-r显示正在使用的内核版本dmidecode-q显示硬件系...

linux网络命名空间简介_linux 网络相关命令

此篇会以例子的方式介绍下linux网络命名空间。此例中会创建两个networknamespace：nsa、nsb，一个网桥bridge0，nsa、nsb中添加网络设备veth，网络设备间...

一周热门
最近发表
标签列表