JavaScript学习笔记（1）----华为WEB前端全栈成长计划（二阶段）_javascript软件编程知识与应用华为-优快云博客

本文链接：https://blog.youkuaiyun.com/Gyanga/article/details/107713547

这篇博客详细介绍了JavaScript的基础知识，包括它的定义、组成、书写方式、注释、输入输出、变量、数据类型以及运算符。JavaScript是一种运行在客户端的脚本语言，主要由ECMAScript、DOM和BOM组成，常见的书写方式有行内式、内嵌式和外部文件。文章还讲解了变量的声明、数据类型转换和不同类型的运算符，是学习JavaScript的良好起点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、JavaScript是什么

JavaScript是一种运行在客户端的脚本语言（不需要编译，运行过程中由js解释器逐行来进行解释并执行）
在这里插入图片描述

现在可以基于Node.js技术进行服务器端编程

HTML/CSS/JS的关系
在这里插入图片描述

二、JS的组成

**1、ECMAScript **
ECMAScript规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准
2、DOM(页面文档对象模型)
通过DOM提供的接口可以对页面中各种元素进行操作（大小、位置、颜色）
3、BOM(浏览器对象模型)
它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构，通过BOM可以操作浏览器窗口（弹出框、控制浏览器跳转、获取分辨率）
在这里插入图片描述

三、JS的三种书写方式

1、行内式的js
直接写到元素的内部（特殊情况下使用）

<body>
    <!--1、行内式-->
    <input type="button" value="点我试试" onclick="alert('hello')">
</body>

在HTML中使用双引号，在JS中使用单引号

2、内嵌式的js（最常用）
写在head标签中的script标签中

 <style></style>
    <!--2、内嵌式-->
    <script>
        alert('你好');
    </script>

3、外部js文件（代码量较大）
新建test.js文件并输入内容

alert('How are you');

在js.html文件中引用

<!--3、外部js文件-->
    <script src="test.js"></script>

引用外部文件的script标签中间不可以写代码（规范）

四、JS注释

1、单行注释 // （ctrl + /）
2、多行注释 /* */ （shiftc + alt + a）

五、JS输入输出语句

1、输入框

prompt('输入一个数字');//取出来的值为字符型

2、弹出框(给用户看)

alert('警示');

3、浏览器控制台输出（给程序员看）

console.log('程序员');

运行后在浏览器使用（Fn + F12）Console中查看输出内容

六、变量

1、什么是变量
变量是程序在内存中申请一块用来存放数据的空间
2、变量的存储与输出

//1、输入内容
var name=prompt('请输入一个名字')；
//2、输出内容
alert(name);

3、变量的语法扩展
①变量更新
②多个变量用，隔开
③变量可以不声明直接使用（该变量会成为全局变量）
4、变量的命名规范
在这里插入图片描述

尽量不使用name作为变量名，name可能有特殊含义

七、数据类型

1、需要数据类型的原因
不同数据需占用的存储空间是不同的，使用不同的数据类型可以充分利用存储空间
2、变量的数据类型
JS是一种弱类型或者说动态语言（变量的数据类型是可以变化的）
JS的变量数据类型是只有在程序运行过程中，根据等号右边的值来确定
3、数据类型的分类
在这里插入图片描述
①数字型Number
八进制：在数字前面加 0
十六进制：在数字前面加0x

isNaN()方法用来判断一个变量是否为非数字类型
在这里插入图片描述
②字符串型String
JS中引号需要嵌套使用（外双内单/外双内单）
转义字符（需要写在引号里面）：
length属性 可获取字符串长度

var str='How are you';
alert(strMsg.length);  //空格也计算进去

" + " 进行字符串/数字的拼接（数值相加，字符相连）

4、数据类型的检测
tyoeof 属性可获取变量数据类型

var num=10;
console.log(typeof num);

5、数据类型的转换
①转换为字符串类型
在这里插入图片描述
②转换为数字型（重点）

parseInt(string) 函数转化得到的数字为整数，会去掉数字后面的px单位（或其他字符串）
parseFloat(string) 函数转换得到的数字为 浮点数，用法和parseInt函数一致
③转换成布尔型
在这里插入图片描述
代表空、否定的值都会转换为false，其余值都会转换为true