前端基础三之JavaScript基础

Posted 2021-08-20 布小禅

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端基础三之JavaScript基础相关的知识，希望对你有一定的参考价值。

题外话

📢 博客主页：❤布小禅❤
📢 作者专栏：
❤Python❤
❤Java❤

前言

身为一个合格的后端开发人员

前端的基础知识也是需要了解的

1. javascript基础

JavaScript是一门网络脚本语言，他非常流行，你可能不使用它，但是你不能否认他的强大！

1.1 JavaScript介绍

JavaScript 是脚本语言

JavaScript 是一种轻量级的编程语言，在你使用它之前，你无需像java，Python一样下载某个版本的jdk或者Python，你只需要在你的电脑上有浏览器，你就可以使用JavaScript语言。

JavaScript 是可插入 html 页面的编程代码，你可以像插入css一样插入js代码。

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

JavaScript 很容易学习。

1.2 基础语法

任何一种语言都有他的基础语法，而每个语言的语法也都不一样，但是都大同小异

1.2.1 Hello World

使用JavaScript输出Hello World

通过内部嵌入js代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script type="text/jsvascript">
    alert("Hello");
</script>

<body>

</body>
</html>

通过调用外部js文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="StudyJS.js" type="text/javascript"></script>
<body>

</body>
</html>

js代码：

alert("World");

如果既想嵌入js,又想引入外部文件怎么办呢?

那就写两个script标签

1.2.2 注释

js的注释和java的注释是相同的

//表示单行注释

/**/表示多行注释

就不做演示了

1.2.3 变量

不同于java的类型变量名 = 值;/类型变量名;一个声明加定义，一个声明

也不同于Python 的变量名=值

js的任何一个数据类型都可以需要使用var关键字来声明，但是声明的类型却是可以任意赋值，不像java有类型显示，js的var既可以声明数据类型，也可以声明函数，类等

var i;
i=1;
alert(i+"：  "+typeof (i)); // number
i="asa";
alert(i+"：  "+typeof (i)); // string
i=1.1;
alert(i+"：  "+typeof (i)); // number
i=true
alert(i+"：  "+typeof (i)); // boolean
i='a';
alert(i+"：  "+typeof (i)); // string

var一般使用在var i = 1;这样的时候，而先声明，有一个let关键字

当然使用var也是不会错的

就像这样：

let i;
i=1;

三个关键字：var、let、const

关键字	先声明	声明且定义
var	√	√
let	√	√
const	×	√

1.2.4 数据类型

所有数字都是：number类型（1、1.1）

var a = 1;
typeof(a);  //number

所有字符，字符串都是：string类型（“as”，‘sa’）

var b = "撒飒飒";
typeof(b);  //string

true和false是：boolean类型（true,false）

var c = true;
typeof(c);  //boolean

未被定义的变量是：undefind类型

let d;
typeof(c);  //undefind

不是数字数值的是：NAN类型（‘a’*1）

var e=10,f="aa";
alert(e*f);  //NAN

当然还有数组，函数，类类型

1.3 条件控制语句

1.3.1 循环

while循环

与C语言，java语言循环一样的格式

var a = "abcdefgh";  //定义一个字符串
var b = 0;   //定义一个循环变量
while(b<a.length){
    alert(a[b]); //输出
    b++;  // 循环变量更新，不更新会变成死循环
}

for循环

格式相同，只是循环变量的格式为var/let/const

var a = "abcdefgh";  //定义一个字符串
for(var i=0;i<a.length;i++){
    // 循环变量的定义和更新在括号里
    alert(a[i]);
}

1.3.2 判断

格式：

if (布尔表达式){
    代码块
}else if(布尔表达式){
    代码块
}else{
    代码块
}

代码：

var a = 10,b = 10;
if (a==b){
    alert(a+b);
}

1.3.3 continue break

和java语言和Python语言一样，continue是跳出当前循环，break是打破循环，进入下一代码块。

1.4 函数

1.4.1 定义

函数有两种定义方式，第一种就是万能的var/let/const

let sum1 = function (){
    alert("第一种定义方式")
}

第二种是funtion关键字：

function sum(){
    alert("第一种定义方式");
}

当然，这两种定义的方式都是一样的，而调用也是和别的预压一样

1.4.2 参数

和Python函数传参一样，不需要功参数的类型，只需要传递个数

let te1 = function (a,b,c){
    alert("a的值："+a);
    alert("b的值："+b);
    alert("c的值："+c);
}

1.4.3 返回值

使用return关键字来确定返回值

let te2 = function (a,b,c){
    return a+b+c;
}

1.5 面向对象

JavaScript是一个面向对象的语言

1.5.1 定义

var 对象名 = {};

是的，就是这么的简单

定义对象的属性:

对象名.属性名 = 值;

定义对象的行为（方法，函数）：

对象名.函数名 = function(){
    代码块
}

1.5.2 实例

创建一个Person对象，设置name和age属性，设置say方法

var Person = {}
Person.name = "";
Person.age = 0;
Person.say=function(){
    alert("说话");
}

结语

兴趣是最好的老师，坚持是不变的真理。
学习不要急躁，一步一个脚印，踏踏实实的往前走。
每天进步一点点，日积月累之下，你就会发现自己已经变得很厉害了。

我是布小禅，一枚自学萌新，跟着我每天进步一点点吧！

在这里插入图片描述

以上是关于前端基础三之JavaScript基础的主要内容，如果未能解决你的问题，请参考以下文章

JavaScript高程三之基础

03.Django基础三之视图函数

Django基础三之视图函数

[vscode]--HTML代码片段（基础版，reactvuejquery）