前端基础三之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


目录
相关文章
|
5天前
|
前端开发 机器人 API
前端大模型入门(一):用 js+langchain 构建基于 LLM 的应用
本文介绍了大语言模型(LLM)的HTTP API流式调用机制及其在前端的实现方法。通过流式调用,服务器可以逐步发送生成的文本内容,前端则实时处理并展示这些数据块,从而提升用户体验和实时性。文章详细讲解了如何使用`fetch`发起流式请求、处理响应流数据、逐步更新界面、处理中断和错误,以及优化用户交互。流式调用特别适用于聊天机器人、搜索建议等应用场景,能够显著减少用户的等待时间,增强交互性。
|
16天前
|
存储 JavaScript 前端开发
前端技术分享:使用Vue.js与Vuex管理状态
【10月更文挑战第1天】前端技术分享:使用Vue.js与Vuex管理状态
38 6
|
16天前
|
JavaScript 前端开发 开发者
前端技术分享:Vue.js 中的自定义指令
【10月更文挑战第1天】前端技术分享:Vue.js 中的自定义指令
46 5
|
5天前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
17 0
|
6天前
|
JavaScript 前端开发 API
Vue.js:现代前端开发的强大框架
【10月更文挑战第11天】Vue.js:现代前端开发的强大框架
58 41
|
1天前
|
前端开发 JavaScript 安全
JavaScript前端开发技术
JavaScript(简称JS)是一种广泛使用的脚本语言,特别在前端开发领域,它几乎成为了网页开发的标配。从简单的表单验证到复杂的单页应用(SPA),JavaScript都扮演着不可或缺的角色。
10 3
|
8天前
|
JavaScript 前端开发 API
Vue.js:打造高效前端应用的最佳选择
【10月更文挑战第9天】Vue.js:打造高效前端应用的最佳选择
11 2
|
8天前
|
存储 JavaScript 前端开发
前端开发:Vue.js入门与实战
【10月更文挑战第9天】前端开发:Vue.js入门与实战
|
16天前
|
JavaScript 前端开发 API
前端技术分享:Vue.js 动态路由与守卫
【10月更文挑战第1天】前端技术分享:Vue.js 动态路由与守卫
|
5天前
|
JavaScript 前端开发 应用服务中间件
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
38 0