Web前端学习：JaveScript基础 [简介、用法、变量及数据类型、流程控制及函数] （附源代码）

街三仔

已于 2022-09-14 09:43:51 修改

阅读量2.2k

点赞数 5

分类专栏： Web前端学习文章标签：学习

于 2022-03-15 00:27:44 首次发布

本文链接：https://blog.csdn.net/Oh_Python/article/details/123491143

版权

Web前端学习专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了JavaScript的基础知识，包括其简介、用法（行间事件、页面脚本、外部引入）、变量与数据类型，以及流程控制和函数。从变量声明、数据类型（如字符串、数字、布尔值等）到if语句、for循环和函数定义，适合初学者快速上手。

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

一、JavaScript简介

JavaScript是运行在浏览器端的脚本语言

JavaScript 是一种轻量级的编程语言

JavaScript主要解决的是前端与用户交互的问题，包括使用交互与数据交互

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

二、JavaScript用法

HTML 中的脚本必须位于 <script> 与 </script> 标签之间。
脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。

引入javascript的方式

行间事件（主要用于事件）

举例：<input type="button" οnclick="alert('ok')" value="点我">

代码演示：

向HTML文件中写入一个点击事件，value="点我" 中双引号内的内容和οnclick="alert('ok')"中的ok位置的内容都可以可以修改

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="button" onclick="alert('ok')" value="点我">
</body>
</html>

运行结果如下，网页中出现一个“点我”，用鼠标进行点击，页面弹出一个提醒窗口,提醒的内容：ok

页面script插入

举例：

<script type="text/javascript">
altert('OK');
</script>

代码演示：

在head标签下写script标签中的内容，当然script标签也可以写在body标签下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--通过script标签实现-->
    <script>
        alert('ok');
    </script>
</head>
<body>

</body>
</html>

运行结果

外部引入

举例： <script type="text/javascript" src="js/index.js"></script>

src是引用文件的一个路径

代码演示：

先创建一个index.js文件，并向其中写入一个点击事件

然后在html文件中通过script标签中的src引用index.js文件中的事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--通过script标签中的 src引用js文件 -->
    <script type="text/javascript" src="index.js">
    </script>
</head>
<body>

</body>
</html>

运行结果，弹出一个内容为“这是一个点击事件” 的窗口

三、JavaScript变量及数据类型

1、JavaScript变量

变量是用于存储信息的"容器"。

变量可以使用短名称（比如 x 和 y），也可以使用描述性更好的名称（比如 age, sum, totalvolume）。

变量必须以字母开头

变量也能以 $ 和 _ 符号开头（不过不推荐这么做）

变量名称对大小写敏感（y 和 Y 是不同的变量）

声明javascript变量

通过 var 关键词来声明 JavaScript 变量

var name;

声明之后，变量是没有值的。赋值使用等号

var name="Halen"

2、javascript数据类型

String：字符串类型,字符串带引号，单引号或双引号

Number：数字型，包含整数型和浮点数型，2,0.2 默认为0

Boolean：布尔值类型，true或false，默认为false

Null：例：var a= null；声明了变量a为空值

Undefined：var a；声明了变量a但是没有给值，a= undefined

Object：对象由花括号分隔。属性通过(name : value) 来定义。

四、JavaScript流程控制及函数

1、流程控制

if语句

var iNum01 = 3;
var iNum02 = 5;var sTr;
if(iNumO1>iNum02)
{
    sTr ='大于';
}
else
{
    sTr = 小于';
}
alert(sTr) ;

多重if--else语句

var iNow = 1;
if( iNow==1)
{
... ;
}
else if(iNow==2)
{
... ;
}
else
{
... ;
}

for-in循环

var info={name :"joke" ,age : 23,sex : "man"};
var txt=' ';
for(x in info){
txt=txt +info[x];
}
alert(txt);

while循环

var i=1;
while(i<11){
    conso1e. 71og(i);
    i++;
}

2、函数

函数定义与执行

<script type="text/javascript">
    //函数定义
    function fnAlert(){
        alert( " hello! ");
    }
    //函数执行
    fnAlert();
</ script>

return

<script type="text/javascript">
    function fnAdd( iNum01 , iNum02){
    var iRs = iNume1 + iNum02;
    return iRs;
    alert( " here ! " );
}

var iCount = fnAdd( 3,4);
alert(iCount); //弹出7
</script>