当前位置：首页 > 编程日记 > 正文

0基础JavaScript入门教程（一）认识代码

编程日记 2024-07-31 04:40:00

1. 环境：

JavaScript简称js，后续我们将使用js来代替JavaScript。

认识代码前，需要安装js代码运行环境。

安装nodejs：在https://nodejs.org/zh-cn/ 下载LTS版本，然后安装
安装visual studio code：https://code.visualstudio.com/ 下载安装
注：本教程基于ES6标准

安装完成后，打开visual studio code后，软件右下角会建议你安装中文插件，直接点安装。

建立一个新js文件：hello.js，保存到你想保存的目录。

在文件中输入：

console.log('hello world')
复制代码

点击 visual studio code 上方菜单”调试-启动调试“，你将会在下方的调试窗口看到输出的'hello world'。

后续我们会将 visual studio code 简称为 vscode。

2. 输出：

现在你应该知道console.log的作用是在调试窗口输出一行文字。

3. 注释

注释的意思是，将代码中不需要运行的部分标记出来。注释一般用于代码说明，来告诉代码阅读者，代码的运行逻辑。

注释的写法有2种。

//单行注释/*
多
行
注
释
*/console.log('hello world');复制代码

上述代码运行结果，同之前的一样。

4. 变量和常量：

变量是代码运行的基本单位，代码中所有的最重要的元素都是由变量组成。

常量是一种特殊的变量，一旦声明，无法更改，无法被赋值。

let v = 12;//这是变量
const v1 = 'hello world';//这是常量
复制代码

变量有2种属性：类型和值。

4.1 变量的命名

变量名字规则如下：

字母：A-Z
数字：0-9
下划线：_
$
不能以数字开头

下面都是合法的变量：

let aaa;
let a123;
let a__;
let a_123;
let a$12_$;
let $23;
let $_a;
复制代码

下面是不合法的变量：

let 123;
let 1aa;
let +00;
let '';
let #$;
复制代码

4.1 变量的类型

不同的类型和值，代表变量的不同使用方法。

console.log('hello world');
//上面这行语句中：
//console是变量，类型是object
//log是变量，类型是function
//'hello world'是常量，类型是string
复制代码

js基本数据类型有5种，分别是：object, function, string, number, boolean。

下面分别列出：

let obj = {}; //object类型
let func = function (){}; //function类型
let str = 'hi'; //string类型
let num = 123; //number类型
let b = true; //boolean类型//可以使用typeof函数来输出变量的类型
console.log(typeof(obj))//输出：object
console.log(typeof(func))//输出：function
console.log(typeof(str))//输出：string
console.log(typeof(num))//输出：number
console.log(typeof(b))//输出：boolean复制代码

除上述类型外，js中还包含一个特殊变量：undefined。这个变量表示变量没有初始化。下面来对比一下：

let a = 123;//声明了一个变量a，并且初始化为123
let b;//声明了一个变量b，没有初始化
console.log(a);//输出123
console.log(b);//输出undefined
复制代码

注意：undefined在同其他变量进行计算的时候，有时候虽然不会报错，但是不建议依赖默认值。所以声明变量一定要初始化。

4.1.1 数组

其实除了上面的类型外，还有一个特殊类型，就是数组。

数组是多个变量的合在一起组成了一种新的数据类型。一般用来表示一堆相似的数据。比如：一班级的学生，一群小动物，一家人等等。

let students = [1,2,3,4];//4个学生，编号分别为1，2，3，4
let animals = [1,2,3,4];//4个动物，编号分别为1，2，3，4
let familys = [1,2,3,4];//4个家庭成员，编号分别为1，2，3，4console.log(students[0]);//输出：1
console.log(students[1]);//输出：2
console.log(students[2]);//输出：3
console.log(students[3]);//输出：4
复制代码

数组的值是要用 [] 来包含的，数组内部的值可以用变量或常量或表达式表示，并使用 , 分割。

如果想获取数组的元素，可以使用：数组名[下标值]的形式获取。

下标值从0开始计，比如：数组第一个元素为 数组名[0]，第二个元素为 数组名[1] ...

4.2 变量的值

let obj = {}; //object类型
let func = function (){}; //function类型
let str = 'hi'; //string类型
let num = 123; //number类型
let b = true; //boolean类型
let arr = []; //object类型//在上一节这个例子中，每个变量都是有值的。
//obj这个变量的值是：{}
//func这个变量的值是： function(){}
//str这个变量的值是：'hi'
//num这个变量的值是：123
//b这个变量的值是：true
//arr这个变量的值是: []
复制代码

可以看出，要给一个变量赋值，需要使用 =。

我们可以用 = 改变一个变量的值。

let num = 123;//变量的值是123
num = 234;//变量的值是234。
//注意只有声明的时候才需要在变量前加let关键字。
//而且变量不能重复声明。
let num = 344;//报错，num这个变量已经在上面声明过了。
复制代码

4.3 关键字

上文中提到了关键字，什么是关键字呢？

关键字是js语言中，为了规范代码编写规则，添加的一系列固定的单词。这些单词必须以固定的形式出现，每个关键字都表示不同的含义。

在代码中，除去变量，常量和注释，操作符以及括号，剩余的部分就是关键字。

常用关键字如下：

let
const
function
new
for
if
else
switch
break
continue
class
extends
constructor
this
super
...
复制代码

现在不需要知道每个关键字是什么意思，只知道有关键字这个概念就行。

最重要的一点是，不要给你的变量命名同关键字一样。

let let;//错误
let function;//错误
let switch;//错误
复制代码

4.4 函数

函数是为了更方便地控制程序结构，同时让程序更加容易编写，容易阅读而添加的概念。

函数能够将多条语句封装成一个整体来执行。

let obj = {}; //object类型
let func = function (){}; //function类型
let str = 'hi'; //string类型
let num = 123; //number类型
let b = true; //boolean类型console.log(typeof(obj))//输出：object
console.log(typeof(func))//输出：function
console.log(typeof(str))//输出：string
console.log(typeof(num))//输出：number
console.log(typeof(b))//输出：boolean//上面的代码，封装成函数可以这样编写function printType(val) {console.log(typeof(val));
}printType(obj);
printType(func);
printType(str);
printType(num);
printType(b);复制代码

运行一下，上下2部分的运行结果是相同的。

可以看出，封装成函数后，执行结果是相同的。

而好处显而易见。

消除了很多重复代码：console.log和typeof，使代码更容易编写。
通过printType的名字，我们可以判断出，这个函数的用途，它应该是打印类型的一个函数，这样使代码更容易阅读。

函数声明的写法是固定的：

function 函数名(参数名1, 参数名2 ...) {
//你的函数内部语句
return ...;
}

调用方式也是固定的：

函数名(参数1，参数2);

函数可以有返回值，用return表示。return 后面是一个变量或者一个表达式。

一旦一个函数添加了return，那么当调用它的时候，这个函数调用就能够像变量一样使用。

function returnInt(){return 123;
}let a = returnInt();console.log(a);//输出 123复制代码

5. 运算符

只有变量是不够的，为了能够计算赋值，形成逻辑，js定义了一系列运算符，这些运算符将变量和常量连接在一起，形成了不同的计算过程，和逻辑代码。

上文已经介绍了 = 这个运算符，它的作用是给一个变量赋值。

现在我们介绍一些其他一些简单的运算符。

let a = 1 + 2;
let b = 3 * 4;
let c = 5 - 2;
let d = 6 / 3;console.log(a);//输出3
console.log(b);//输出12
console.log(c);//输出3
console.log(d);//输出2
复制代码

没错就是你熟悉的 +（加法） -（减法） *（乘法） /（除法）。

上述代码，会计算等号右侧的四则运算，然后将结果赋给左侧的变量。

一些常用的运算符如下：

+
-
*
/
%
>
<
=
==
&&
||
!
()
++
+=
*=
/=
-=
%=
...
复制代码

现在你不需要了解所有运算符的含义，你只需要了解运算符是用来连接变量的，并且会一些简单的四则运算就好了。

6. 表达式

如上文所述，表达式就是：将变量使用运算符连接起来之后形成的复杂语句。

表达式出现的位置和变量相同。也就是说，能够出现变量的地方，就能出现表达式。

有一点例外，就是表达式不能出现在 = 的左侧，也就是说不能给表达式赋值。你可以认为表达式出现的位置和常量相同。

let a = 1 + 2 * 3;
let b = (1 + 2) * 3;
let c = a + b;
let d = c * a;
let e = c == d;
//上述语句 ‘=’ 右侧的都是表达式
复制代码

上面介绍的数组取值也可以认为是一个表达式：students[0]。

7. 总结

经过上面的介绍，现在给你一个程序，你应该能知道程序的每个单词分别是什么元素了。

那我们练习一下，为下列程序的每一行添加注释，说明一下这行包含什么元素。

也可以将代码copy到vscode中，运行一下看看是什么结果。


function max(a, b){if(a > b) {return a;}else{return b;}
}function sort(arr) {for(let i = arr.length - 1; i >= 0; i--) {for(let j = i - 1; j >= 0; j--) {if(i > 0 && arr[i] != max(arr[i], arr[j])) {let tmp = arr[i];arr[i] = arr[j];arr[j] = tmp;}}}
}let arr = [9,4,1,3,6,5,7,8,2];sort(arr);console.log(...arr);复制代码

https://www.dkcj.cn/info/12159.html

junit、hamcrest、eclemma的安装与使用

1、junit的安装与使用 1.1 安装步骤 1）从http://www.junit.org/ 下载junit相应的jar包； 2） 在CLASSPATH中加入JAR包所在的路径，如E:\Java\jar\junit\junit-4.10.jar； 3） 将junit-4.10.jar加入到项目的lib文…

编程日记2024/07/31 04:30:00

Your prospective client asks you to provide them with a quote. So you just send them the quote, right?您的潜在客户要求您提供报价。所以您只给他们发送报价吧？ Wrong.错误。 If you did, you would be missing out on a massive opportunity here.如果这…

编程日记2024/07/31 04:20:00

2. 把一幅图像进行平移。

实验二 #include "cv.h" #include<stdio.h> #include "highgui.h" IplImage *PingYi(IplImage *src, int h0, int w0); int main(int argc, char** argv) {IplImage* pImg; //声明IplImage指针IplImage* pImgAfterMove;pImg cvLoadImage("601…

编程日记2024/07/31 04:10:00

后台的代理nginx部署方法

软件包如下：nginx-1.10.0.tar.gznginx-http-concat-master.zipngx_cache_purge-2.3.tar.gzopenssl-1.0.2h.tar.gzpcre-8.39.tar.gzzlib-1.2.8.tar.gz ngin部署方法：上面的安装包都存放在/apps/svr/soft目录下:cd /apps/svr/softtar -zxf nginx-1.10.0.ta…

编程日记2024/07/31 04:00:00

iOS中你可能没有完全弄清楚的（一）synthesize

1. 什么是synthesize synthesize中文意思是合成，代码中我们经常这样用。 interface Test: NSObject property (nonatomic, unsafe_unretained) int i; endimplementation Test synthesize i; end 复制代码使用synthesize的2个步骤： 首先你要有在类声…

编程日记2024/07/31 03:50:00

framer x使用教程_如何使用Framer Motion将交互式动画和页面过渡添加到Next.js Web应用程序

framer x使用教程The web is vast and its full of static websites and apps. But just because those apps are static, it doesnt mean they have to be boring. 网络非常庞大，到处都是静态的网站和应用。但是，仅仅因为这些应用程序是静态的&#xf…

编程日记2024/07/31 03:40:00

POJ 2429

思路：a/n*b/nlcm/gcd 所以这道题就是分解ans.dfs枚举每种素数情况。套Miller_Rabin和pollard_rho模板 1 //#pragma comment(linker, "/STACK:167772160")//手动扩栈~~~~hdu 用c交2 #include<cstdio>3 #include<cstring>4 #include<cstdlib…

编程日记2024/07/31 03:30:00

iOS中你可能没有完全弄清楚的（二）自己实现一个KVO源码及解析

前几天写了一篇blog（点这里），分析了系统KVO可能的实现方式。并添加了简单代码验证。既然系统KVO不好用，我们完全可以根据之前的思路，再造一个可以在项目中使用的KVO的轮子。代码已经上传到github: https://github.…

编程日记2024/07/31 03:20:00

js中的preventDefault与stopPropagation详解

1. preventDefault: 比如<a href"http://www.baidu.com">百度</a>,这是html中最基础的东西，起的作用就是点击百度链接到http://www.baidu.com,这是属于<a>标签的默认行为;preventDefault方法就是可以阻止它的默认行为的发生而发生其他…

编程日记2024/07/31 03:10:00

angular过滤字符_如何使用Angular和Azure计算机视觉创建光学字符读取器

angular过滤字符介绍 (Introduction) In this article, we will create an optical character recognition (OCR) application using Angular and the Azure Computer Vision Cognitive Service. 在本文中，我们将使用Angular和Azure计算机视觉认知服务创建一个光学字…

编程日记2024/07/31 03:00:00

javascript函数全解

0.0 概述本文总结了js中函数相关的大部分用法，对函数用法不是特别清晰的同学可以了解一下。 1.0 简介同其他语言不同的是，js中的函数有2种含义。普通函数：同其他语言的函数一样，是用于封装语句块，执行多行语句的…

编程日记2024/07/31 02:50:00

MYSQL explain详解[转载]

explain显示了mysql如何使用索引来处理select语句以及连接表。可以帮助选择更好的索引和写出更优化的查询语句。虽然这篇文章我写的很长，但看起来真的不会困啊，真的都是干货啊！！！！ 先解析一条sql语句&…

编程日记2024/07/31 02:40:00

CodeForces 157A Game Outcome

A. Game Outcometime limit per test2 secondsmemory limit per test256 megabytesinputstandard inputoutputstandard outputSherlock Holmes and Dr. Watson played some game on a checkered board n n in size. During the game they put numbers on the boards squares…

编程日记2024/07/31 02:30:00