重生前端之我在Javascript敲代码（01-Javascript基础语法）

一只海星.

已于 2024-03-26 18:52:57 修改

阅读量1.7k

点赞数 36

文章标签： javascript 开发语言 ecmascript

于 2024-03-26 17:52:55 首次发布

本文链接：https://blog.csdn.net/y15237261911/article/details/137050758

版权

一.JavaScript的由来（了解）

1995年2月发布的，Netscape Navigator 2浏览器开发一种名为 LiveScript 的脚本语言。为了赶在发布日期前完成 LiveScript的开发，Netscape 与 Sun 公司建立了一个开发联盟，共同开发 LiveScript。在 NetScape Navigator 2 发布前夕，网景为了更好地推广这个脚本语言（利用 Java语言的知名度），临时把 LiveScript 改名为 JavaScript，实际上两者没有任何关系。

二.制定标准（了解）

1997年，网景公司给欧洲计算机制造商协会（ECMA, European Computer Manufacturers Association）提了一个建议，以 JavaScript 1.1 为蓝本，由该协会主导制定了一套 JavaScript 语言开发规范。于是 ECMAScript 诞生了，这是一个国际标准化的 JavaScript 开发标准，所有浏览器厂商在开发浏览器脚本语言时，都要准守这套规范。这样的话，编程人员在写代码时只要写一次，就可以在所有的浏览器上执行了。

三.Javascript的特点（重点）

Javascript是一个脚本语言，可跨平台，支持面向对象。
脚本（Script）简单地说就是一条条的文本命令，按照程序流程执行。常见的脚本语言：JavaScript、VBScript、Perl、PHP、Python等。非脚本语言：C、C++、Java、C#等。
脚本语言与非脚本语言的区别：非脚本语言一般需要编译、链接，生成独立的可执行文件后才能运行。脚本语言依赖于解释器，只在被调用时自动进行解释或编译。
几乎所有的浏览器，包括手机等各类移动设备。特点：JavaScript语言不依赖操作系统，仅需要浏览器的支持。

四.JavaScript和HTML、CSS的区别

HTML：结构层，提供网页的结构，提供网页中的内容。

CSS: 表示层，用来美化网页。

JavaScript：行为层，可以用来控制网页内容，给网页增加动态的效果，用于跟用户的交互。

五.Javascript的组成（重点）

1. ECMAScript - JavaScript的核心

ECMA 欧洲计算机制造联合会

网景：JavaScript

微软：JScript

定义了JavaScript的语法规范

JavaScript的核心，描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了一种语言的标准与具体实现无关

2.DOM(Document Object Model) - 文档对象模型

一套操作页面元素的API(API（Application Programming Interface，应用程序接口）)

DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作。

3.BOM(Browser Object Model) - 浏览器对象模型

一套操作浏览器功能的API（接口-类库-方法）,通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等。

简单记忆：

包括三部分（1. ECMA 2.DOM文档对象模型 3.BOM浏览器对象模型）

六.使用JavaScript（重点）

1.行内代码

将 JS 代码写到元素的事件属性值中

代码详情如下：

 <!-- 1.行内代码 -->
    <div onclick="alert('你好世界')">hello world</div>
    <a href="javascript:alert('hello')">百度一下你就知道</a>

2.内部代码（内嵌式）

如果页面需要中包含大量的 JavaScript 代码，则建议将这些JavaScript脚本放在 <script> 标签中。<script> 元素即可作为 <head> 的子元素，也可作为 <body> 的子元素，通常位于<body>元素闭合标签的前面。

代码详情如下：

    <!-- 2.内部代码 -->
    <script>
         alert("内部代码");
    </script>

3.外部代码（外链式）

为了让 HTML 页面和 JavaScript 脚本更好地分离，我们可以将 JavaScript脚本单独保存在一个 .js 文件中，HTML 页面导入该 .js 文件即可。

代码详情如下：

 <!-- 3.外部代码 -->
    <script src="./01-js的使用.js"></script>

alert("外部js文件");

注意：

由于现代网页开发提倡结构、样式、行为的分离，即分离HTML、CSS、JavaScript三部分的代码，避免直接写在HTML标签的属性中，从而更有利于维护。因此在实际开发中不推荐使用行内式。
存在的问题：引入JavaScript代码时，页面的下载和渲染都会暂停，等待脚本执行完成后才会继续（内嵌式或外链式）。解决的办法：对于不需要提前执行的代码，将<script>标签放在<body>标签的底部，可以减少对整个页面下载的影响。

七.Window对象

Window 对象表示浏览器中打开的窗口。

在页签浏览器（比如 Chrome）中，浏览器会为 HTML 文档创建一个 window 对象，每个页签具有自己的 window对象。也就是说，同一个窗口的页签之间不会共享一个 window 对象。window对象给我们提供了一些方法、属性和事件.

1.Window对象的方法（重点）

window 提供的几个关于对话框的方法:

 <script>
        //window对象的方法
        //警告框
        window.alert("警告框");
        //确认框
        window.confirm("是否确认！");
        //输入框
        window.prompt("输入内容");
      
    </script>

实际运行效果：

2.window对象的属性

window对象是BOM的顶层（核心）对象，其他对象都是以属性的方式添加到window对象下，称为window的子对象。

window对象的console属性也是一个对象，它提供了几个可以在控制台输出信息的方法。

再例如：window对象的document属性是非常重要的对象,每个载入浏览器的 HTML 文档都会成为 Document 对象。

Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

 <script>
     
        //window对象的属性
        //日志打印
        window.console.log("你好世界你好");
        //打印一个对象的所有属性和方法
        window.console.dir(window);
        //写入文档
        window.document.write("<br>你好");
        //windo对象是顶层对象，在访问window对象下的属性和方法时，可以省略window不写
        console.log("省略不写");
    </script>

实际运行效果：

八.JavaScript语法

1.标识符

所谓标识符，就是指变量、函数、属性，或者函数参数的名字。

标识符的组合规则：

定义规则
由大小写字母、数字、下划线和美元符号（$）组成。
- 不能以数字开头。
- 严格区分大小写。
- 不能使用JavaScript中的关键字命名。
- 要尽量要做到“见其名知其意”。

命名书写规范：

推荐采用第一个单词的首字母小写，其余单词首字母大写的方式，例如：firstName、getUserInfo。

大小写敏感

JS 中的标识符是区分大小写的，也就是说变量 name 和 Name 是两个不同的标识符。

九.变量(重点)

1.定义变量

变量是一种使用方便的占位符，用于引用计算机内存地址，该地址可以存储Script运行时可更改的程序信息，存放数据的容器。
语法：JavaScript中变量通常利用var关键字声明，并且变量名的命名规则与标识符相同。

2.如何使用变量


    <script>
        // java中 数据类型 变量名 = 变量值   int a = 10;  char b = 'b';
        // javascript  声明变量通过 var 关键字
        // 变量的初始化
        var a = 10;
        // 创建变量
        var b;
        // 给变量赋值
        b = 20;
        console.log(a);
        console.log(b);

        // 同时创建多个变量(不推荐)
        var a, b, c, d;
        // 省略var关键字，所得到的是全局变量
        name = "张三";
        console.log(name);
    </script>

3.变量在内存中的存储

变量的本质是在内存中申请的一块用来存放数据的空间。

var age = 18;
var uname='张美丽';

4.变量声明提升

 <script>
        //console.log(a);     // a is not defined

        var b;
        console.log(b);         // undefined

        var c = 10;
        console.log(c);         // 10


        // 变量的声明提升，声明部分被提升到该作用域最上方
        console.log(d);         // undefined
        var d;

        console.log(x);         // undefined
        var x = 100;

        // var x;
        // console.log(x);
        // x = 100;
    </script>

十.数据类型

1.原始数据类型

Boolean 类型 布尔类型表示一个逻辑值，有两个值：true 和 false。

Number类型 数字类型用于表示数值，整数、浮点数（小数），还有一些带符号的值：+Infinity（正无穷大），-Infinity（负无穷大）和 NaN (非数值，Not a Number)。

String类型 字符串类型用于表示文本数据，使用单引号或双引号括起来，比如：'Hello World!'。

Undefined类型 Undefined 类型只有一个值，即 undefined。任何一个只声明而没有赋值的变量都会被隐式的(自动的)赋值为 undefined。

Null类型 Null 类型也只有一个值，即 null。

null是表示缺少的标识，指示变量未指向任何对象。把 null作为尚未创建的对象，也许更好理解。

2.复杂数据类型(引用类型)

在计算机科学中, 对象是指内存中的可以被 [标识符] 引用的一块区域。

在 Javascript里，引用类型的数据指的是各种对象，他们在内存中的存储方式与原始类型的数据不同。

以Object对象为例，Object对象是一组属性的集合。属性包含一个属性名和一个属性值

代码详情如下：

<script>
        var a = 10;     // number数值类型
        console.log(a);

        var _NaN = NaN;     // not a number
        console.log(_NaN);

        var b = "10";   // string字符串
        console.log(b);

        var bool = true;    // boolean布尔
        console.log(bool);

        var empty = null;   // null空
        console.log(empty);

        var und = undefined;    // undefined未定义
        console.log(und);

        var obj = {
            name: "张三",
            age: 20,
            gender: "男"
        }                       // object对象
        console.log(obj);

        // 转义字符
        var str = "hello\nworld";
        console.log(str);
    </script>

3.检测数据类型

代码详情如下：

 <script>
        // 通过 typeof 检测数据类型
        var num = 10;
        console.log(typeof num);        // number
        var str = "张三";
        console.log(typeof str);        // string
        var bool = true;
        console.log(typeof bool);       // boolean
        var und = undefined;
        console.log(typeof und);        // undefined
        var empty = null;
        console.log(typeof empty);      // object
        var obj = {
            name: "张三",
            age: 18
        }
        console.log(typeof obj);        // object
    </script>

4.数据类型转换（变量）（重点重点）

强制转换：编程人员编写代码强制对数据进行转换。

隐式转换：不是编程人员刻意去转换的，而是浏览器（JS 解析引擎）帮我们自动转换的。

代码详情如下：

 <script>
        // 1.强制类型转换

        // 1.1 Boolean()将其他数据类型转为布尔类型
        var num = 0;
        console.log(Boolean(num));      // false
        var str = "";
        console.log(Boolean(str));      // false
        var und = undefined;
        console.log(Boolean(und));      // false
        var empty = null;
        console.log(Boolean(empty));    // false
        var _NaN = NaN;
        console.log(Boolean(_NaN));     // false

        console.log("=====================================");

        // 1.2
        // 1.2.1 Number()将其他类型转为数值类型
        var num1 = "123.321";
        console.log(Number(num1));
        var str1 = "abc";
        console.log(Number(str1));      // NaN
        var str3 = "";
        console.log(Number(str3));      // 0
        var bool1 = true;
        console.log(Number(bool1));     // 1
        var bool2 = false;
        console.log(Number(bool2));     // 0
        console.log(Number(und));       // NaN
        console.log(Number(empty));     // 0

        // 1.2.2 parseInt()将其他类型转换为数值类型
        // 1.2.3 parseFloat()将其他类型转换为数值类型
        
        // 1.3 将其他类型转换为字符串类型
        // String()
        var num3 = 20;
        console.log(String(num3));
        // toString() 进行进制转换
        console.log(num3.toString(2));
        console.log(num3.toString(8));
        console.log(num3.toString(16));

        // 2.隐式类型转换
        var strNum = "20";
        var strNum2 = "10";
        console.log(strNum + strNum2);
        var num5 = 30;
        console.log(strNum + num5);

        // isNaN() 判断一个值是否为非数值类型
        console.log(isNaN(10));     // false
        console.log(isNaN(""));     // false
        console.log(isNaN(true));   // false


    </script>

（可能文章中有简写的部分，请根据自身情况来合理阅读。）

一只海星.

关注

36
点赞
踩
44

收藏

觉得还不错? 一键收藏
0
评论
重生前端之我在Javascript敲代码（01-Javascript基础语法）

变量是一种使用方便的占位符，用于引用计算机内存地址，该地址可以存储Script运行时可更改的程序信息，存放数据的容器。语法：JavaScript中变量通常利用var关键字声明，并且变量名的命名规则与标识符相同。
复制链接

扫一扫