JS初学必须要理解的基础知识

程序员文章站 2022-09-14 11:11:20

1、第一个javascript程序程序书写的位置JavaScript也是一个纯文本的语言。在页面中，标签对儿，里面就是书写JavaScript程序的地方。语法规则JavaScript对换行、缩进、空格不敏感。和其他程序语言一样，所有的符号都是全英文的。另外要注意：每一条语句末尾...

1、第一个javascript程序

1.1 程序书写的位置

1、第一个javascript程序

1.1 程序书写的位置

JavaScript也是一个纯文本的语言。在页面中，<script type=”text/javascript”></script>标签对儿，里面就是书写JavaScript程序的地方。

<script type="text/javascript"></script>

1.2 语法规则

JavaScript对换行、缩进、空格不敏感。和其他程序语言一样，所有的符号都是全英文的。另外要注意：每一条语句末尾要加上分号，虽然分号不是必须加的，但是为了程序今后要压缩，如果不加分号，压缩之后将不能运行了。

1.3 注释

注释有单行注释 //

多行注释 /* */

这里我们回忆一下其他文件中的注释写法

类型	注释写法
HTML	<!-- -->
CSS	/* */
javascript	单行 // 多行 /* */

sublime中，单行注释的快捷键是ctrl+/ 。多行注释的快捷键是ctrl+shift+/

1.4 JS基本语句

alert(" "）在页面上弹出一个提示框，提示信息来自括号里的文本。页面上出现弹出框以后页面位置不能改变，不能关闭。此时浏览器工作进程已经暂停。

console.log(" "）向浏览器控制台输出内容，用来进行代码调试。示例应用:百度的console是招聘信息
prompt(" ")在页面弹出一个输入框，让用户输入信息。

2、变量

2.1 变量命名

var a = 100;

这就是一个固定的写法，就是语法。也就是说，我们使用var来定义一个变量。

var就是英语“variant”变量的缩写。后面要加一个空格，空格后面的东西就是“变量名”，我们可以按照变量命名规范给变量任意的取名字。

var就是一个关键字，所谓关键字，就是有特殊功能的小词语。关键字后面一定要有空格隔开。

等号表示赋值，会将等号右边的值，赋给左边的变量。

变量名有命名规范：只能由英语字母、数字、下划线、美元符号$构成，且不能以数字开头，并且不能是JavaScript保留字。

下列的单词，叫做保留字，就是说不允许当做变量名，不用记：

abstract、boolean、byte、char、class、const、debugger、double、enum、export、extends、final、float、goto implements、import、int、interface、long、native、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile

大写字母是可以使用的，并且大小写敏感。也就是说sum和Sum是两个变量。

var sum=0;
var Sum=0;

2.2 变量的定义和赋值

变量用var来定义。在JavaScript中，永远都是用var来定义变量,这是和其他编程语言所不同的地方。并且只有定义之后，这个变量才能够使用。不设置变量，就直接使用会报错：如直接在控制台输出a+2：console.log(a+2);会提示 a is noe defined.

JS初学必须要理解的基础知识

变量和字符串的区别：如果要输出一个变量的值，就不能给变量加引号，加了引号的就是字符串类型。如下图中代码和运行结果。

var a=520;
console.log(a);/*控制台输出变量a的值*/
console.log("a");/*控制台输出字符串a*/

JS初学必须要理解的基础知识

2.3 变量的类型

变量里面能够存储数字、字符串。变量会自动的根据存储的东西类型不同，来决定自己的类型。就是变量会根据被赋的值来决定自身类型。主要有两类：

原始值：不可改变的原始值（栈数据）

原始值（栈内存放）	number/boolean/string/undefined(定义了但没赋值或者未定义的）/null
引用值（堆内存放）	array/object/function/date

JavaScript语言的每一个值，都属于某一种数据类型。其中原始数据类型基本上用的最多。

1、Number：该类型的表示方法有两种形式，第一种是整数，第二种为浮点数。整数：可以通过十进制，八进制，十六进制的字面值来表示。浮点数：就是该数值中必须包含一个小数点，且小数点后必须有一位数字。如果一个变量中，存放了数字，那么这个变量就是数值型的。JavaScript种，只要变量是个数字，那么就是数值型的，无论整数还是浮点数、无论大小、无论正负，都是number类型的，而且js中数字类型默认为浮点型。

2、Boolean：即布尔类型，该类型有两个值：true、false。需要注意的是，Boolean类型的字面值true和false是区分大小写的。也就是说，True和False(以及其它的混合大小形式)都不是Boolean值，只是标识符。

3、String：String类型用于表示由零或多个16位的Unicode字符组成的字符序列，即字符串。至于用单引号，还是双引号，在js中还是没有差别的。记得成对出现。

4、Undefined：Undefined类型只有一个值，即特殊值undefined。在使用var声明变量，但未对其加以初始化时，这个变量值就是undefined。

5、Null：Null类型是第二个只有一个值的数据类型。其特殊值就是Null。从逻辑角度上看，null是一个空的对象指针。而这也正是使用typeof操作符检测null值，会返回“object”的原因。

var x;            // x 为 undefined
console.log(typeof x) ;
var x = 5;           // 现在 x 为数字
console.log(typeof x) ;
var x = "John";   // 现在 x 为字符串
console.log(typeof x) ;
var x=true;   // 现在 x 为布尔
console.log(typeof x) ;
var car="Saab";  // 现在 x 为数组
console.log(typeof car) ;
var x=null;   // 现在 x 为null
console.log(typeof x) ;

JS初学必须要理解的基础知识

补充一下number数据类型里有一个值是NaN,not a number，表示数值的不正常状态。一般会在计算出现错误的情况下出现。可以通过IsNaN这个关键字来判断当前数据是否是NaN,如果是非数字返回true；如果是数字返回false。

var a="abc";
var b=123;
console.log(a-b);
console.log(a+b);
console.log(typeof(a-b));
console.log(isNaN(a));
console.log(isNaN(b));
console.log(isNaN(a-b));

JS初学必须要理解的基础知识

由上面结果可以看出当字符串和数值型进行“+”运算时，“+”表示连接，当进行“-”运算时，就会返回NaN，同时也证明了NaN是属于number型的。

2.4 运算符

运算符有很多分类：数学运算符、逻辑运算符、自增运算符等等。首先是最熟悉的数学运算符。

（1）数学运算符

+	加
-	减
*	乘
/	除（问号杠）
%	取余数
( )	括号

运算符里的“+”：有时候表示的是连字符，有时候表示的是加号。如果加号两边都是数值，此时是加。否则，就是连字符。

先算乘除、后算加减。综合来说，js的运算符和运算优先级都与C、C#、java、python等类似。乘方是：var a = Math.pow(3,4);开方是：var a = Math.sqrt(64，3)具体的运算符可以在w3c网站学习。

例如计算式子：

var a = Math.pow((23 + Math.pow(5,7)) / 45,2);
console.log(a);

JS初学必须要理解的基础知识

（2）布尔值和关系运算符、逻辑运算符

布尔类型的值，就两个，true、false。

关系运算符有：> 大于号、< 小于号、>= 大于或等于、<= 小于或等于、== 等于、=== 全等于、!= 不等于、!== 不全等于

关系运算符，得到的结果都是布尔值，也就是说得到的东西要么是true，要么是false

在JS中=符号只有一个意思！表示赋值！！

如果想判断两个东西，是否相等，需要使用符号==

==等等不严谨，会将不同类型的东西，转为相同类型进行比较。例如：

console.log("123456789"==123456789);//“==”认为左边字符串和右边数字相等，结果为true
console.log("123456789"===123456789);//“===”全等于认为不相等，结果为false

JS初学必须要理解的基础知识

也就是说，==两个等号，不严谨， ===三个等号更为严谨。

逻辑运算符有三个：&& 与（且）、|| 或、! 非。

计算优先级为：！> & > |

逻辑运算的规则和其他逻辑运算的运算法则相同。

2.5 变量格式转换

字符串→数字

方法就是：parseInt(“5”);
parse是英语里面的转换的意思，Int表示整数。结果就是数字5。parseInt带有3个功能：可以将字符串转为数字，也可以净化含有数字的输入，和将数字取整。

（1）自动净化；

console.log(parseInt("7月与安生"));//会净化，只输出数字，后面的中文自动消失，只保留最开头的数字。

JS初学必须要理解的基础知识

（2）自动带有截断小数功能（取整，不四舍五入）

console.log(15/2)//结果等于7.5正常输出
console.log(parseInt(15/2));//取整数，结果等于7

输出结果如下：

JS初学必须要理解的基础知识

同样的，parseFloat是将字符串转为浮点数（小数）

js变量转换是非常重要的，知识点也比较细，所以我现在只是总结了简单的、比较常用的。

3、if语句

最基础的if语句结构：

//第一种if结构

if(条件表达式){
条件为真的时候做的事情
}else{
条件为假的时候做的事情
}

//第二种if结构

if(条件表达式1){
	条件1为真的时候做的时候
}else if(条件表达式2){
	条件1不满足，条件2满足的时候做的事情
}else if(条件表达式3){
	条件1、2不满足，条件3满足的时候做的事情
}else{
	全都不满足的时候做的事情
}

首先，条件表达式：条件表达式的结果必须为布尔值，要么是true、要么是false。例如以下语句：

if (num%i==0)  //条件表示式的值要么num能整除i结果true，要么不能整除结果为false
if (BMI<18.5) //BMI<18.5结果为false，>或者=为false

if语句还可以嵌套使用，例如：通过判断工龄和工资计算年终奖数目：

// 工作满0年 发月薪的1倍月薪年终奖，如果月薪大于8000，那么就是发1.2倍
// 工作满1年  发月薪的1.5倍月薪年终奖，如果月薪大于10000，那么就是发1.7倍
// 工作满2年，甚至更多 发月薪的3倍月薪年终奖，如果月薪大于12000，那么就是发3.2倍var year = parseInt(prompt("请输入工作多少年了，输入整数"));
var salary = parseInt(prompt("请输入月薪"));

//判断
if(year == 0){
	if(salary > 8000){
		var bonus = 1.2 * salary;
	}else{
		var bonus = 1 * salary;
	}
}else if(year == 1){
	if(salary > 10000){
		var bonus = 1.7 * salary;
	}else{
		var bonus = 1.5 * salary;
	}
}else if(year >= 2){
	if(salary > 12000){
		var bonus = 3.2 * salary;
	}else{
		var bonus = 3 * salary;
	}
}

//输出
alert(bonus);

4、for循环语句

for循环语句结构如下图所示：

JS初学必须要理解的基础知识

学习for循环，我们首先必须准确遍历for循环，例如分析一下这个简单的for循环：

for(var i = 1 ; i < 13 ; i = i + 4){
   console.log(i);
 }

程序一运行，将执行var i = 1;这条语句，所以i的值是1。然后程序会验证一下i < 13是否满足，1<13是真，所以执行一次循环体（就是大括号里面的语句）。执行完循环体之后，会执行i=i+4这条语句，所以i的值，是5。程序会会验证一下i < 13是否满足，5<13是真，所以执行一次循环体（就是大括号里面的语句）。执行完循环体之后，会执行i=i+4这条语句，所以i的值，是9。

程序会验证一下i < 13是否满足，9<13是真，所以执行一次循环体（就是大括号里面的语句）。执行完循环体之后，会执行i=i+4这条语句，所以i的值，是13。程序会验证一下i < 13是否满足，13<13是假，所以不执行循环体了，将退出循环。

所以控制台输出的结果是

JS初学必须要理解的基础知识

今天就总结到这里，接下来我还要总结一下，js关于if和for语句的基础算法题，和js函数的基础知识。

顺便分享一个学习前端的路线。

js基础部分，如：定义变量、函数、数组、字符串等的处理，内置函数、内置对象等。

js面向过程编程思想，封装出各个函数，试着用这些去做一些常见的小功能，如：选项卡，自定义多选按钮，自定义播放器，3D幻灯片；
js面向对象编程思想，试着去封装一些你自己的对象，提供出有意义的接口出来；
学了上述的内容，然后学常用的库，这里必须学jquery;
学基于Jquery之上的常见插件，如：bootstrap,Layer,富文本编辑器等。
综合应用上面的多种库写实际项目的模板，多写几套。

当未来渐渐明晰起来，你有没有一瞬间有过慌乱。时间越过越快，一醒便三秋，小时候是数不完的日子，催着我们去明天，长大后是追着时间跑还总感叹时光荏苒。

本文地址：https://blog.csdn.net/weixin_44164982/article/details/107284974

上一篇： js中常用的数据类型（一）

下一篇：海创软件组-20200712-学习过程中的记录

JS初学必须要理解的基础知识

1、第一个javascript程序

1.1 程序书写的位置

1.2 语法规则

1.3 注释

1.4 JS基本语句

2、变量

2.1 变量命名

2.2 变量的定义和赋值

2.3 变量的类型

2.4 运算符

2.5 变量格式转换

3、if语句

4、for循环语句

SEO初学者必须要了解的搜索引擎的排名原理解析