JavaScript学习之基础知识及认识变量

最新推荐文章于 2024-06-03 09:20:03 发布

崇志广勤

最新推荐文章于 2024-06-03 09:20:03 发布

阅读量132

点赞数 1

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

本文链接：https://blog.csdn.net/weixin_47062907/article/details/114790557

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、认识JavaScript

（1）浏览器分为两类：渲染引擎和JS引擎。渲染引擎负责执行HTML和CSS语言(渲染引擎被称为是内核，如Chrome中的blink)，JS引擎负责执行JavaScript语言（JS引擎又被称为“JS解释器”，如Chrome中的v8）。

（2）JavaScript是一种高级编程语言，并不能直接被浏览器执行，它需要通过JS引擎将JavaScript高级语言转换成机器语言，JS引擎将JavaScript代码进行逐句解释，JavaScript代码才可以被浏览器执行，所以JavaScript又名脚本语言。

二、JS三部分

(1)ECMAScript：JavaScript语法。

(2)DOM：文档对象模型，是可拓展标记语言的标准编程接口。通过DOM提供的接口可以对网页上的各种元素进行操作（大小、位置和颜色等）。

(3)BOM：浏览器对象模型，可以与浏览器窗口进行互动的对象结构，通过BOM可以操作浏览器窗口（如弹出框、控制浏览器旋转、获取分辨率等）。

三、JS的书写方法

JS的书写方法有三种：行内式、内嵌式和外部式。

（1）行内式（易出错、特殊时使用）

下面以一个按钮打开警示窗为例展示JS行内式的书写表达：

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HOME</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="" />
<meta name="keywords" content="" />
<style>
</style>
</head>
<body>
<!-- 行内式 -->
<input type="button" value="周星驰" onclick="alert('大话西游')"> 
</body>
</html>

效果图如下：

在这里插入图片描述

（2）内嵌式（最常用）

下面以一个警示窗为例展示JS内嵌式的书写表达：

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HOME</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="" />
<meta name="keywords" content="" />
<style></style>
/* 内嵌式 */
<script>
    alert('大话西游');
    </script>
</head>
<body>
</body>
</html>

效果图如下：

在这里插入图片描述

（3）外部式（代码量大时使用）

下面以一个警示窗为例展示JS外部式的书写表达：

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HOME</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="" />
<meta name="keywords" content="" />
<style></style>
/*外部式:先创建一个js文件，再将js文件引入Html文件中*/
<script src="TEST1.js"></script>
</head>
<body>
</body>
</html>

JS代码：

alert('大话西游')

效果图如下：

在这里插入图片描述

四、JS输入输出语句

（1）alert()——弹出警示窗：

例子如下：

效果图：

在这里插入图片描述
HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HOME</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="" />
<meta name="keywords" content="" />
<style></style>
/* 内嵌式 */
<script>
    alert('大话西游');
    </script>
</head>
<body>
</body>
</html>

（2）prompt()——弹出输入框：

例子如下：

效果图：
在这里插入图片描述
HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HOME</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="" />
<meta name="keywords" content="" />
<style></style>
<script> prompt('请输入您的成绩：')</script>
</head>
<body>
</body>
</html>

（3）console.log()——控制台输出（用于程序员测试，当然用户也可以输入）：

例子如下：

效果图：

运行出来的页面是一个空格页面，我们按F12键在页面右侧就会出现以下画面：

在这里插入图片描述

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HOME</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="" />
<meta name="keywords" content="" />
<style></style>
<script> console.log('请输入您的成绩：')</script>
</head>
<body>
</body>
</html>

五、JS中的变量

变量在使用时分为两步：声明和赋值。
声明变量的关键词使用的是var
（1）变量的定义：用于存放数据的集合，通过变量名辨别变量以及获取数据，甚至对数据进行修改。其实，我们可以将变量理解成一个装东西的盒子。

（2）变量的使用：有两种方式。
一种是先声明，再赋值，后输出：（不常用）
如：

var age;//声明
age = 20;//赋值
console.log(age);//输出

另一种是声明并赋值再输出：（又名初始化，是最常用变量使用方法）
如：

var age = 20;//声明并赋值
console.log(age);//输出

（3）变量案例一：个人信息表

案例效果图：
在这里插入图片描述

案例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HOME</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="" />
<meta name="keywords" content="" />
<style></style>
<script>
    var name = '崇志';
    var age = 20;
    var sex = '男';
    var marry = '未婚';
    var nation='中国';
    console.log(name)
    console.log(age)
    console.log(sex)
    console.log(marry)
     console.log(nation)
 </script>
</head>
<body>
</body>
</html>

（3）变量案例二：弹出用户信息窗

案例效果图：

在这里插入图片描述

案例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HOME</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="" />
<meta name="keywords" content="" />
<style></style>
<script>
    var name = prompt('请输入您的姓名：');
    alert(name);
 </script>
</head>
<body>
</body>
</html>

（4）变量的语法拓展：

①第一种情况是：更新变量。变量值以最后赋值为准。
第一种情况的代码：

var age = 12;
age = 90;

此时age的值就变成了90。

②第二种情况是：同时声明多个变量。此时，只需要写一个var，多个变量之间用英文逗号隔开即可。
第二种情况的代码：

var name = '崇志'，age=12, sex='男'，marry='未婚'；

③第三种情况是：只声明不赋值。
第三种情况的代码：

var age;
console.log(age);//undefined系统显示未定义的

第三种情况的效果图：
在这里插入图片描述
④第四种情况是：只赋值不声明。
第四种情况的代码：

age=99;
console.log(age);

第四种情况的效果图：
在这里插入图片描述
五、变量名
（1）命名规范：
①变量名只能由大小写字母、数字、下划线（_）或美元符（$）组成。
②不能以数字开头。
③变量不能是关键字，如var、for、while（我们在变量名中尽量少用name，多用myName等）。
④变量名必须有含义，如userName(用户名)。
⑤变量名命名方法：驼峰命名法，首个字母小写，后面的单词首字母大写，如myFirstName。
⑥变量名严格区分大小。

举例子：
var a √ var userName √ var passWord √
var 2 × var $name √ var pass Word ×
var age12 √ var _sex √ var pass_Word √
vae 12age × var &name × var for ×

六、交换两个变量的值
这时候，我们需要使用一个临时的变量进行存储，我们将这个临时变量命名为temp。

交换两个变量的案例效果图：

在这里插入图片描述
案例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HOME</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="" />
<meta name="keywords" content="" />
<style></style>
<script>
     var thingOne='红烧排骨';
     var thingTwo='清蒸甲鱼汤';
     var temp;
     temp=thingOne;
     thingOne=thingTwo;
     thingTwo=temp;
     console.log(thingOne);   
     console.log(thingTwo);   
 </script>
</head>
<body>
</body>
</html>

小结：

（1）浏览器分为哪几类?
浏览器分为两类：渲染引擎和JS引擎。渲染引擎负责执行HTML和CSS语言(渲染引擎被称为是内核，如Chrome中的blink)，JS引擎负责执行JavaScript语言（JS引擎又被称为“JS解释器”，如Chrome中的v8）。

（2）JS分为哪三个部分？
ECMAScript、DOM、BOM。

（3）变量是什么？
变量是用于存放数据的集合，通过变量名辨别变量以及获取数据，甚至对数据进行修改。其实，我们可以将变量理解成一个装东西的盒子。

（4）JS的书写方法有哪几种？
行内式、内嵌式和外部式。

（5）变量的使用有哪两种方式？
先声明再赋值后输出、同时声明并赋值输出。

（6）变量的语法拓展有哪几种情况？
更新变量、同时声明多个变量、只声明不赋值、只赋值不声明。

（7）变量名的命名规范有哪些？
①变量名只能由大小写字母、数字、下划线（_）或美元符（$）组成。
②不能以数字开头。
③变量不能是关键字，如var、for、while（我们在变量名中尽量少用name，多用myName等）。
④变量名必须有含义，如userName(用户名)。
⑤变量名命名方法：驼峰命名法，首个字母小写，后面的单词首字母大写，如myFirstName。
⑥变量名严格区分大小。

（8）如何交换两个变量的值？
使用一个临时的变量temp进行存储。

崇志广勤

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
JavaScript学习之基础知识及认识变量

一、认识JavaScript（1）浏览器分为两类：渲染引擎和JS引擎。渲染引擎负责执行HTML和CSS语言(渲染引擎被称为是内核，如Chrome中的blink)，JS引擎负责执行JavaScript语言（JS引擎又被称为“JS解释器”，如Chrome中的v8）。（2）JavaScript是一种高级编程语言，并不能直接被浏览器执行，它需要通过JS引擎将JavaScript高级语言转换成机器语言，JS引擎将JavaScript代码进行逐句解释，JavaScript代码才可以被浏览器执行，所以JavaScri
复制链接

扫一扫