前端基础三之JavaScript基础

Posted 布小禅

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

  1. 通过内部嵌入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>
    
  2. 通过调用外部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 循环

  1. while循环

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

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

Django基础三之视图函数

前端基础之JavaScript