前端基础知识学习(三)-JavaScript基础知识

最近笔者在学习有关Java后端的内容,所以很有必要去了解一下前端的内容。这篇文章主要是记录一些自己在学习过程中觉得重要和难以理解的内容和自己的一些想法。由于自己是学后端,所以对于前端的很多内容并不做深入研究,只是了解而已。本文覆盖的知识点并不全面,有些描述也并不是那么专业,仅供参考,谢谢。

在前面两篇文章前端基础知识学习(一)前端基础知识学习(二)里主要是关于HTML、CSS的一些基本内容,这篇文章主要是关于JavaScript的基础内容。

一、JavaScript概述

JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言(脚本语言),能够增强用户与 Web 站点和 Web 应用程序之间的交互。
脚本语言又被称为扩建的语言,或者动态语言,是一种解释型语言,由解释器来运行,用来控制软件应用程序,脚本通常以文本保存,只在被调用时进行解释或编译。

JavaScript是一种脚本语言主要用于web编程中,以使web具有更强的交互性。值得注意的是JavaScript和Java没有关系,虽然两者的名字看起来JavaScript像是Java的衍生物,但其实二者无关,在学习的时候需要注意这一点。
可能HTML不能称为一门编程语言(有争议),但是JavaScript绝对是一门编程语言,所以JavaScript的难度是较大的,不能像HTML那样记住一些主要的语法和逻辑就可以了,要多了解了解其语法特性和一些算法数据结构之类的,并且JavaScript还可用于其他领域,要特别注意。

二、学习JavaScript简单编程实例

编写代码之前首先需考虑编辑器,这个和html一样就好了,毕竟JavaScript主要为web服务。
JavaScript编程一般有两种情况,一种是直接写入在html文件中,一种是写在html文件外面,然后再在html文件中引入,注意JavaScript文件后缀为==.js==。

  • 将JavaScript直接写入在html文件中
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>
    alert("在html里面直接写入JavaScript");
</script>

</body>
</html>

与JavaScript有关的只有一句代码:

<script>
    alert("在html里面直接写入JavaScript");
</script>

在这句代码外面有script标签,我们要记住把JavaScript直接写入在html文件中,需要用到script标签,然后把相应的代码放在script标签里面即可。如果之前学过高级语言的,就可以很容易发现这是一句alert函数调用代码,而alert函数的作用就是将其参数里面的内容(就是上面引号里面的内容)以对话框的形式弹出,可以理解为输出。

  • 在html文件中引入JavaScrip文件

html文件:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

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

</body>
</html>

JavaScript文件(文件名为test_js.js):

alert("在html里面引入JavaScript文件");

可以发现在html文件中引入JavaScrip文件还是需要用到script标签,并且通过***src=“所要引入的JavaScript文件文件名”*的方式来引入JavaScript文件。而JavaScript文件里也只是一句简单的代码alert(“在html里面引入JavaScript文件”);,和上面的情况一样。

通过这两个例子,我们可以很容易发现,使用JavaScript很简洁(前提是实现的功能很简单),不需要像其他高级语言那样;例如c++,如果是单独写c++的依据输出代码的话,还需要加上"#include<>、main()函数"之类的,而JavaScript不需要,这也是JavaScript的特色。

由于笔者学习JavaScript主要是用于web编程的,为web服务,所以不会纯粹单独学JavaScript,一切以服务web为主。

三、JavaScript基础语法知识

笔者认为,学习一门编程语言,了解其变量和函数的用法是非常基础和重要的。

(1)使用变量

JavaScript使用关键字letconstvar定义变量。*三者区别在于在方法内部用var定义的变量开始的任何地方都可以访问到这个变量,而用let定义的变量只会在其定义的块内有效;const 和 let 的作用域是一致的,不同的是 const 变量一旦被赋值,就不能再改变了,意即常量。*建议使用let和const避免使用var

实例如下:

//定义变量
let numInt;
let numDouble;
let numString;

//定义常量
const numConst=1;

//变量赋值
numInt=1;
numDouble=1.0;
numString="1";

//弹出对话框
alert("定义的常量数字为"+numConst);
alert("定义的整形数字为"+numInt);
alert("定义的浮点数字为"+numDouble);
alert("定义的字符串为"+numString);

通过上面的代码我们可以发现JavaScript有一个显著的特点就是定义变量用通用的关键字(let)即可,不需一一指定变量的具体类型
顺便提一下,alert函数里面的加号是用来拼接字符串的。
另外JavaScript的注释方法和Java一样,这倒是这两者之间的联系。

(2)使用函数

函数可以理解为一段完成某一功能的代码块,通过调用函数,我们便可实现函数1的功能。函数的好处主要在于使功能模块坏,更易理解,且减少代码量。

实例如下:

//定义函数
function myFunction(){
    alert("我是一个无参函数")
}

//定义函数
function myFunction1(num){
    alert("我是一个有参函数"+"参数为"+num);
}

//定义函数
function myFunction2(numInt,numDouble){
    alert("我是一个有参函数,"+"参数为"+numInt+","+numDouble);
}

//调用函数
myFunction();
myFunction1(1);
myFunction2(1,1.1);

注意对于有参函数,我们在定义时需将参数指定出来,注意定义函数的参数的名是随意指定的,但要注意定义多个参数的位置,在调用函数时传进去的参数的位置应与定义时的位置一一对应
另外函数可以有返回值,直接调用函数便可得到相应的结果。示例如下:

function myFunction4(numInt,numDouble){
    let sum;
    sum=numInt+numDouble;
    return sum;
}

let num=myFunction4(1,1.1);

四、总结

  • JavaScript是一门适合web的脚本语言,可以写入html中,或者从html中引入js文件
  • JavaScript的变量定义时用关键字let,不需指出其具体类型
  • JavaScript定义函数时的参数不需指定类型
  • JavaScript调用函数时,要使用合适的函数名和参数

在这里插入图片描述

2019.12.13

发布了52 篇原创文章 · 获赞 59 · 访问量 6836

猜你喜欢

转载自blog.csdn.net/ataraxy_/article/details/103519843