第一讲javascript入门（js的组成、事件类型、嵌入方式、注释方式、输出方式、变量类型、变量命名规则、字符串转义符、算术运算符、数据类型转换、null和undefined的区别）

大脸胖柴

已于 2023-07-24 17:27:11 修改

阅读量1.2k

点赞数 3

分类专栏： JavaScript 文章标签： javascript js

于 2022-03-28 21:41:45 首次发布

本文链接：https://blog.youkuaiyun.com/TKY666/article/details/123805800

版权

JavaScript 专栏收录该内容

13 篇文章

订阅专栏

2、document.write() 用于对页面（body）输出

3、console.log() 控制台输出工作中调试常用

4、prompt("")；提示用户输入对话框

boolean字符串拼接与算术运算时的结果

一、理论

JavaScript是什么

JavaScript是一种轻量级的脚本语言。

JavaScript是世界上最流行的脚本语言

javaScript是一种广泛用于客户端Web开发的脚本语言，常用来给HTML网页添加动态功能，比如响应用户的各种操作。

js的组成

ECMAScript（ES） : 负责翻译，为js的核心，解释器。
DOM (Document Object Model 文档对象模型)：赋予js操作HTML的能力，document。
BOM (Browser Object Modal 浏览器对象模型)：赋予js操作浏览器的能力，window，不兼容不建议使用。

二、JavaScript文件引入方式

JavaScript代码可以直接嵌在网页的任何地方，不过通常我们都把JavaScript代码放到<head>中。JavaScript有以下三种引入方式

1.嵌入式

（1）嵌入在html的<script>标签中

<script  type=“text/javascript”>
		alert(“哈喽”) ;
</script>

2.外部引入

(1）单独的js文件，后缀名以.js结尾

<script src="myjavaScript.js"></script>

三、事件的定义

简单使用方式：嵌入在html标签的属性中或写在script中。

<body>
    <button onclick="alert(2012);">按钮</button>
    <div ondblclick="alert('中国');">hello</div>
     
</body>
<script>
//下方形式为举例，a为获取的DOM对象
    a.onclick = function () {
                    console.log(b);
            };
</script>

常用鼠标事件

onclick ,当鼠标点击一下时执行一次

onmouseover ,当鼠标放上去时执行一次

onmouseout ,当鼠标移出去时执行一次

onmousedown ,当鼠标按下时执行一次

onmouseup ,当鼠标在上面松开(弹起)时执行一次

ondblclick ,当鼠标双击时执行一次

onload ，当对象加载完成时执行一次

window.οnlοad=function(){}; 只要页面加载完毕，这个事件才会触发

window.οnunlοad=function(){}; 扩展事件--页面关闭后才触发的事件

window.οnbefοreunlοad=function(){}; 扩展事件--页面关闭之前才触发的事件

四、JavaScript注释方式

JavaScript 注释用于解释 JavaScript 代码，增强其可读性。 JavaScript 注释分为单行注释和多行注释两种方式。

1、单行注释

单行注释以 // 开头。

任何位于 // 与行末之间的文本都会被 JavaScript 忽略（不会执行）。

2、多行注释

多行注释以 /* 开头，以 */ 结尾。

任何位于 /* 和 */ 之间的文本都会被 JavaScript 忽略。

五、JavaScript输出方式

JavaScript 能够以不同方式显示数据：

使用 alert(“内容”) 写入警告框
使用 document.write() 用于对页面（body）输出
使用 console.log() 控制台输出工作中调试常用
alert()函数会阻断JavaScript程序的执行，从而造成副作用；
console.log()仅在控制台中打印相关信息，因此不会造成类似的顾虑

prompt(); 提示输入对话框

confirm() 确认对话框（返回值为布尔值）

1、alert 使用警告框显示数据

<script>
    alert("这是一个警告框")
</script>

效果：

2、document.write() 用于对页面（body）输出

<script>
        document.write(`\u263a \u263a \u263a \u263a \u263a \u263a \u263a \u263a<br>
         \u263a 欢迎学习javascript课程 <br>
         \u263a我是(我也不清楚几)班的xxx<br>
         \u263a \u263a \u263a \u263a \u263a \u263a \u263a \u263a`);
    </script>

效果：

3、console.log() 控制台输出工作中调试常用

<script>
     console.log("只有在控制台才能看到我");
</script>

效果：

4、prompt("")；提示用户输入对话框

参数一与参数二均可省略不写

const name = prompt("参数一为提示",'参数二为默认值');
console.log(name); // 打印结果为输入值或默认值

效果：

5.confirm() 确认对话框

const name = confirm('确认支付订单吗？') ;
console.log(name);// 打印结果为true 或 false

效果：

六、JavaScript变量

变量是什么？

变量是存放数据的容器，通过变量名获取数据，同时变量也会因为赋不同的值分为不同的类型。

基本数据类型：

基本数据类型	说明	默认值
Number	数字型，包含整型值和浮点型值，如66、0.22	0
Boolean	布尔值类型，只有true 、false两个值 ,算数运算时等价于1和0	false
String	字符串类型，如 " 张三 " 注意在JS里面，字符串都带有引号	" "
Undefined	var a; 声明了变量a但是没有赋值，此时a == underfined	undefined
Null	var a=null; 声明了变量a, null表示为空值	null
NaN	NaN代表任意一个数字以外的值，为非数字

注：基本数据类型又称为简单数据类型。处基本数据类型外还有引用数据类型，(又称为复杂数据类型)此处先不做过多介绍。

变量的定义

        变量即可变的量。在JavaScript中，变量是存储数据值的容器。

        从编程角度讲，变量是用于存储某种/某些数值的存储器。

        对于变量的理解：变量是数据的代号。

JavaScript 标识符

所有 JavaScript 变量必须以唯一的名称的标识。

这些唯一的名称称为标识符。

标识符可以是短名称（比如 x 和 y），或者更具描述性的名称（age、sum、totalVolume）。

变量命名规则

构造变量名称（唯一标识符）的通用规则是：

名称可包含字母、数字、下划线_和美元符号$
名称必须以字母开头
名称也可以 $ 和 _ 开头（但是在本教程中我们不会这么做）
变量名区分大小写（y 和 Y 是不同的变量）
保留字 与 关键词 无法用作变量名称
不能用除( _ 或$ )以外的特殊符号

关键字

保留字

变量声明

语法: var 变量名;

举例：var a; 这就是定义了一个变量,变量名是a

var num1,num2; 可以一次声明多个变量两个变量名间用，隔开

初始化变量

在声明变量后并为其赋值称为变量的初始化。

var a = 45; 这就是初始化声明了变量a 并把45赋值给a

var a = 10,b = 20; 也可以同时初始化多个变量，每个变量之间用 ' , ' 隔开给变量赋值。

变量的值

变量的值可以是数据类型的任何一种。

如：

var a=“hello”; //变量的值是个字符串类型
var b=10; //变量的值是个数字类型
var c=false; //变量的值是个布尔类型

七、算术运算符

加号：加号运算符与其他运算符略有不同

+号两边均为数字时表示数值加法运算

+号两边任意一边为字符串或两边均为字符串时表示字符串的拼接（此处涉及到了数据类型的隐式转换)
正常数值加法
    var a = 2;
    a = a + 1;
    console.log(a); // 3
字符串拼接
    var a = 'hello';
    a = a + "World!";
    console.log(a); // helloWorld!
拓展：累加写法简写
a = a + 1; 可简写为 a +=1;

加法运算符+ 减法运算符 – 乘法运算符* 除法运算符 / 取余 %

var a = 4, b = 2, c, d, e; // 声明所需变量
    c = a - b; // 减法运算符
    d = a * b; // 乘法运算符
    e = a / b; // 除法运算符
    f = a % b; // 取余运算符

八、null和undefined的区别：

undefined：在 JavaScript 中, undefined 是一个没有设置值的变量。不可转为数字0 ，与数字进行加法运算结果为NAN

null：在 JavaScript 中 null 表示 "什么都没有"。null是一个只有一个值的特殊类型。表示一个空对象引用。可转为数字0

区别：

null 与 undefind 的区别？

undefined原理上可以说是没有找到

null原理上意思为空对象

1.数据类型不一样,null的数据类型是object，undefined的数据类型是 undefined。

2.null和undefined 两者相等，但是当两者做全等比较时，两者又不等。（因为它们的数据类型不一样）

3.转化成数字的值不同

4.null代表"空"，代表空指针；undefined是定义了没有赋值

null和undefined的运用场景

undefined

1、变量被声明时，但没有赋值时，就等于undefined

2、调用函数时，应该提供的参数没有提供，该参数等于undefined

3、对象的属性没有被赋值，则该属性的值为undefined

4、函数没有返回值时，默认返回undefined

null

1、作为函数的参数，表示该函数的参数不是对象（不想传递参数）

2、作为对象原型链的终点

3、如果定义的变量准备在将来用于保存对象，此时可以将该变量初始化为null

九、null 与 boolean 的区别

null字符串拼接与算术运算时的结果

null算数运算时转为数字0
console.log(null + 1); // 1
null字符串拼接时转为字符串null
console.log(null + 'aaa'); // nullaaa

boolean字符串拼接与算术运算时的结果

boolean算数运算时true为1，false为0
console.log(true + 1); // 2
console.log(false+ 1); // 1
boolean字符串拼接时true与false均为字符串
console.log(true + 'aaa'); // trueaaa
console.log(false + 'aaa'); // falseaaa