前端基础三之JavaScript基础

简介: 前端基础三之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>
  1. 通过调用外部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>
  1. 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++;  // 循环变量更新,不更新会变成死循环
}
  1. 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("说话");
}


结语

兴趣是最好的老师,坚持是不变的真理。

学习不要急躁,一步一个脚印,踏踏实实的往前走。

每天进步一点点,日积月累之下,你就会发现自己已经变得很厉害了。

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

image.png


目录
相关文章
|
6月前
|
JavaScript 前端开发 API
|
7月前
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
327 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
6月前
|
前端开发 JavaScript 数据可视化
58K star!这个让网页动起来的JS库,前端工程师直呼真香!
Anime.js 是一款轻量级但功能强大的JavaScript动画引擎,它能够以最简单的方式为网页元素添加令人惊艳的动效。这个项目在GitHub上已经获得58,000+星标,被广泛应用于电商页面、数据可视化、游戏开发等场景。
233 8
|
6月前
|
JavaScript 前端开发 容器
|
6月前
|
JavaScript 前端开发
|
6月前
|
存储 JavaScript 前端开发
|
6月前
|
移动开发 JavaScript 前端开发
|
7月前
|
资源调度 JavaScript 前端开发
前端开发必备!Node.js 18.x LTS保姆级安装教程(附国内镜像源配置)
本文详细介绍了Node.js的安装与配置流程,涵盖环境准备、版本选择(推荐LTS版v18.x)、安装步骤(路径设置、组件选择)、环境验证(命令测试、镜像加速)及常见问题解决方法。同时推荐开发工具链,如VS Code、Yarn等,并提供常用全局包安装指南,帮助开发者快速搭建高效稳定的JavaScript开发环境。内容基于官方正版软件,确保合规性与安全性。
6086 25
|
6月前
|
存储 JavaScript 前端开发
|
6月前
|
JavaScript 前端开发