余晖落尽暮晚霞,黄昏迟暮远山寻
本站
当前位置:网站首页 > 编程知识 > 正文

新手初学javascript怎么学?基础知识总结

xiyangw 2022-11-26 16:42 20 浏览 0 评论

新手初学javascript怎么学?最近开始学习JavaScript,西安鸥鹏教育整理了一些相关的基础知识,希望对大家有所帮助。

JS注释方式:

// 单行注释(Ctrl+/ )

/*

段落注释(Ctrl+shift+/ )

*/



【JavaScript基础】

JavaScript:

基于浏览器 、基于(面向)对象、事件驱动、脚本语言

JavaScript的作用:

表单验证,减轻服务的压力,添加页面动画效果,动态更改页面内容,Ajax网络请求(Ajax:可以实现页面局部刷新)

JavaScript组成部分;ECMAScript(5.1/6)、DOM、BOM

ECMAScript脚本程序语言:

语法标准:语法;变量和数据类型;运算符;逻辑控制语句;关键字、保留字;对象

DOM文档对象模型

BOM浏览器对象模型

JavaScript的基本结构:

<script type="text/javascript">

JS语句;

</script>

变量的声明和变量:

先声明变量再赋值:

var width; width=5;

var——用于声明变量的关键字;width——变量名

...

同时声明变量和赋值

不声明直接赋值

【使用JS的三种方式】

1、HTML标签中内嵌JS;

<button onclick="alert('小样你真点啊!')">有本事点我呀!!!</button>

2、HTML页面中直接使用JS:

<script type="text/javascript">

JS语句;

</script>

3、引用外部JS文件:

<script language="JScript" src="JS文件路径"></script>

【注意事项】

1)页面中JS代码与引用JS代码,可以嵌入到HTML页面的任意位置。但是,位置不同会影响到JS代码的执行顺序;

例如:<script>在body前面,会在页面加载之前执行JS代码;

2)页面中JS代码,使用type="text/javascript"

引用外部的JS文件,使用language="JScript"

3)引用外部JS文件的<script></script>标签,必须成对出现,且标签内部不能有任何代码!

【JS中的变量】

1、JS中变量声明的写法:

var width = 10;//使用var声明的变量,只在当前函数作用域有效

width1 = 11;//不适用var,直接赋值生成的变量,默认为全局变量,整个JS文件有效

var a,b,c=1;//同一声明语句同时声明多个变量,变量之间用英文逗号分隔,但是,赋值需要单独赋值,例如上式中,只有c赋值为1,a b为undefined(未定义)。

【声明变量注意事项】

1)JS中所有变量类型声明,均使用var关键字。变量的具体数据类型,取决于给变量赋值的执行。2)同一变量可在多次不同赋值时,修改变量的数据类型

var width = 10;//width 为整型变量

width="hahaha";//width 被改为字符串类型

3)变量可以使用var声明,也可以省略var,[区别]不使用var,默认为全局变量

4)同一变量名,可以多次用var声明,但是并没有任何含义,也不会报错,第二次之后的声明,只会被理解为赋值。

2、变量的命名规范

1)变量名,只能有字母,数字,下划线,$组成

2)开头不能是数字

3)变量区分大小写,大写字母与小写字母为不同变量

3、变量命名名要符合驼峰法则:

变量开头为小写,之后每个单词首字母大写;

XiaoXiZhenMeng √

xiao_xi_zhen_meng √

xiaoxizhenmeng ×

4、JS中的变量的数据类型

Undefined:未定义,用var声明的变量,没有进行初始化赋值。var a;

Null:表示为空的引用。var a = null;(其中一种情况)eg:空对象,空数组。。。

boolean:真假,可选值true/false

Number:数值类型。可以是小数,也可以是正数。

String:字符串类型。用""和''包裹的内容,称为字符串。

Object(复杂数据类型):后续讲解,函数、数组等。。。

5、常用的数值函数:

1)isNaN:用于判断一个变量或常量是否为NaN(非数值)

使用isNaN判断时,会尝试使用Number()函数进行转换,如果能转换为数字,则不是非数值,结果为false

"111" 纯数字字符串,false "" 空字符串,false "la" 包含其他字符,true

true/false 布尔类型,false

2)Number():将其他类型转换为数值类型

[字符串类型转数值]

>>字符串为纯数值字符串,会转为对应的数字"111"->111

>>字符串为空字符串时,会转换为0 ""->0

>>字符串包含其他非数字字符时,不能转换 "111a"->NaN

[布尔Boolean类型转数值]

true->1 false->0

[null/Undefined转数值]

null->0 Undefined->NaN

[Object类型转数值]

(以后再了解哦~)先调用ValueOf方法,确定函数是否有返回值,再根据上述各种情况判断。

3)parseInt:将字符串转成数值

>>>空字符串,不能转。结果为NaN

>>>纯数值字符串,能转。"123"->"123" "123.5"->123(小数转化时,会直接抹去小数点,不进行四舍五入)

>>>包含其他字符的字符串,会截取第一个非数值字符串前的数值部分。"123a456"->123 "a123b345"->NaN

>>>parseInt只能转String类型,Boolean/null/Undefined 均为NaN

4)parseFloat:将字符串转为数值

>>>使用方式同parseInt,但是,当转化小数字符串时,保留小数点;转化整数字符串时,保留整数;

"123.5"->123.5 "123.0"->123

5)typeOf:用来检测变量类型

未定义—>Undefined 字符串->string true/false->boolean 数值->Number

对象/null->Object 函数->function

【JS中的输出语句】

document.write();

输出语句,将write的()中的内容打印在浏览器屏幕上

使用时注意:除变量/常量以外的任何内容,打印时必须放在""中,变量/常量必须放到""外

打印的内容同时有多部分组成,之间用“+”链接

例如:document.write("输出互换前手中的纸牌:"+left+"<br />");

alert();弹窗警告

1、【算术运算】

+ 加、- 减、* 乘、 / 除、 % 取余、++ 自增、-- 自减

+:有两种作用,链接字符串/加法运算;当+两边均为数字时,进行加法运算;

当加号两边有任意一边为字符串时,进行字符串链接,链接之后的结果认为字符串

++:自增运算符,将变量在原来基础上+1;

--:自减运算符,将变量在原来基础上-1;

【n++ 与 ++n 的异同】

n++:先使用n的值进行计算,然后再把n+1;

++n: 先使用n的值+1,然后再用n+1以后的值,去运算;

相同点:不论是n++还是++n,在执行完代码以后,均会把n+1;

eg: var a = 3;

var b,c;

b = a++ +2; //a=3 b=5 c=4

c = ++a +2; //a=4 b=5 c=7

document.write("a:"+a);

document.write("b:"+b);

document.write("c:"+c);

2、赋值运算

= 赋值、 += -= *= /= %=

+=:a += 5;相当于a = a + 5;但是,前者的执行效率要比后者快,

3、关系运算

== 等于、=== 严格等于、 != 不等于 、>、<、>=、<=

===:严格等于;类型不同,返回false;类型相同,再进行下一步判断

==:等于;类型相同,同===;类型不同,尝试将等式两边转为数字,再判断;

特例:null==Undefined √ ; null===Undefined ×

4、条件运算符(多目运算)

a>b?true:false

有两个关键符号:?和:

当?前面的部分运算结果为true时,执行:前面的代码;

当?前面的部分运算结果为false时,执行:后面的代码;

>>>多目运算符可以多层嵌套:

例如:var jieguo =

5、逻辑运算符

&& 与、|| 或、! 非

6、运算符的优先级

()

! ++ --

% / *

+ -

> < >= <=

== !=

&&

||

各种赋值= =+ *= /= %=

【if-else结构】

1、结构写法:

if(判断条件){

//条件为ture时执行

}else{

//条件为false时执行

}

2、if()中的表达式,运算之后的结果应该为:

1)Boolean:true 真 ; false 假

2)string:非空字符串为真 ;空字符串为假

3)Number:0为假 ;一切非0均为真

4)Null/NaN/Undefined:全为假

5)Object:全为真

3、else{}结构,可以根据具体情况省略;

【多重if、阶梯if】

1、结构写法:

if(条件一){

//条件一成立

}else if(条件二){

//条件一不成立&&条件二成立

//else if 部分,可以有多个

}else{

//条件一不成立&&条件二不成立

}

2、多重if结构中,各个判断条件是互斥的,只能选择其中一个

3.if/else的大括号可以省略,但不提倡,如果省略,

则if/else包含的代码只包括其后最近的一行(分号结束);

else结构永远属于其前方最近的一个if结构。

【嵌套if结构】

1、结构写法:

if(条件一){

//条件一成立

if(条件二){

//条件二成立

}else{

//条件为false时执行

}

}else{

//条件为false时执行

}

2、if结构可以多重嵌套,但是原则上不超过三层

【Switch-Case结构】

1、结构写法:

switch(表达式){

case 常量表达式1:

语句一;

break;

case 敞亮表达式2:

语句二;

break;

。。。

default:

语句N

}

2、注意事项:

1)switch()中的表达式,以及每个case后面的表达式,可以为任何JS支持的 数据类型;(对象和数组不同);

2)case后面的所有常量表达式,必须各不相同,否则只会执行第一个;

3)case后的常量可以是任何数据类型;同一个switch结构的不同case,可以是多种不同的数据类型;

4)switch在进行判断时,采用的是全等判断===

5)break的作用:执行完case代码后,跳出当前switch结构;

缺少break的后果:从正确的case项开始,依次执行所有的case和defalse

6)switch结构在判断时,只会判断一次正确答案,当遇到正确的case项后,将会不再判断后续项目,依次往下执行;

7)switch结构的执行速率要快于多重if结构。在多路分支时,优先考虑switch结构。

【循环结构的步骤】

1)声明循环变量

2)判断循环条件

3)执行循环体(while的{}中所有代码)操作

4)更新循环变量

然后,循环执行2)3)4)

【JS中循环条件支持的数据类型】

1)Boolean:true 真 ; false 假

2)string:非空字符串为真 ;空字符串为假

3)Number:0为假 ;一切非0均为真

4)Null/NaN/Undefined:全为假

5)Object:全为真

while循环特点:先判断,在执行

do-while循环特点:先执行,在判断;即使初始条件不成立,do-while循环也至少执行一次

【For循环】

1、for循环有三个表达式,分别为:①定义循环变量 ② 判断循环条件 ③更新循环变量(三个表达式之间,用;分隔。)

for循环三个表达式可以省略,两个;缺一不可

2、for循环特点:先判断,再执行;

3、for循环三个表达式,均可以有多部分组成,之间用逗号分隔,但是第二部分判断条件

需要用&&链接,最终结果需要为真/假

【循环控制语句】

1、break:终止本层循环,继续执行循环后面的语句;

当循环有多层时,break只会跳过一层循环;

2、continue:跳过本次循环,继续执行下一次循环;

对于for,continue执行后,继续执行循环变量更新语句n++

对于while,do-while,continue执行后,继续执行循环条件,

判断;所以使用这两个循环时必须注意continue一定要在n++之后,否则会造成死循环。



相关推荐

js快速入门——常用的操作符总结(js ??操作符)

操作符一、递增和递减++--规则:操作数基本数据类型时,转数字后进行运算,转数字失败报NaN操作数引用数据类型时,通过原型链调用toStringvalueOf进行转换后运算,转数字失败报NaN...

JavaScript如何入门?(javascript快速入门教程)
JavaScript如何入门?(javascript快速入门教程)

1,建议阅读“javascript高级程序设计”第三版电子版。(我刚开始学习,我向表哥(软件工程师)说我想做前端,于是,他帮我买了这本书,好的书大家都会推荐,...

2023-03-21 18:28 xiyangw

JavaScript基础知识(一)JS入门(javascript单独写在js文件中)

一、JS入门(一)产生JavaScript是布兰登·艾奇(BrendanEich,1961年~),在1995年利用十天完成JavaScript设计。网景公司最初命名为LiveScript,后来在与Su...

javascript基础入门(java语言自学)

第1天,学习的是js最基本的东西(包括js的组成、数据类型、数据类型转换、NaN和isNaN、隐式类型转换、加减乘除以及取余、变量作用域、闭包简单的概念、命名规范、运算符和逻辑运算符、程序流程控制:...

怎样扎实自己的 JavaScript 基础?(javascript 菜鸟教程)
怎样扎实自己的 JavaScript 基础?(javascript 菜鸟教程)

学习js首先得了解js,他属于一种胶水语言,是依赖于某个宿主环境下的,比如各种浏览器,比如nodejs的v8,js能做什么不能做什么都很依赖于他的宿主给他的ap...

2023-03-21 18:27 xiyangw

JavaScript基础教程新手入门必看(javascript零基础入门书籍)

对前端稍微有点了解的初学者都知道,JavaScript是必不可少的工具。毫不夸张的说,大部分网页都使用了JavaScript,想要成为一个优秀的前端工程师,做出漂亮令用户满意的网页,熟练掌握JavaS...

初学JavaScript基础知识 掌握JavaScript的组成以及基本语法
初学JavaScript基础知识 掌握JavaScript的组成以及基本语法

为什么学JavaScript?javaScript在网页制作中占有非常重要地位,可以实现验证表单、制作特效等功能,总结起来,学习javascript的目的主要...

2023-03-21 18:26 xiyangw

介绍一下简单易学的编程语言JavaScript(编程 js)
介绍一下简单易学的编程语言JavaScript(编程 js)

#大有学问#JavaScript是一种广泛使用的编程语言,它通常用于在网页中添加交互性和动态内容。JavaScript由Netscape公司在1995年开发,最...

2023-03-21 18:26 xiyangw

前端入门——JavaScript 操作符(前端常用js)

所谓操作符,就是用来操作数据值的符号,在JavaScript中包括算术操作符、位操作符、关系操作符和相等操作符。这些操作符可以操作所有类型的数据,比如字符串、数字、布尔值,甚至对象。一元操作符所谓一元...

带你入门JS的世界,首先需要建立正确的心智模型(一)
带你入门JS的世界,首先需要建立正确的心智模型(一)

转载说明:原创不易,未经授权,谢绝任何形式的转载开篇当我们编写代码时,我们倾向于使用“快速思考系统”,这是一种基于模式匹配和直觉的思考方式。然而,这种思考方式往...

2023-03-21 18:26 xiyangw

10分钟入门javascript函数式编程(什么是函数式编程)

1.函数式编程1.什么是函数式编程函数式编程是?种编程范式,强调使?函数来组合和处理数据。将运算过程抽象成成函数,可以复?。常?的编程范式有:?向过程编程(ProceduralProgrammin...

JavaScript 初学者手册(javascript零基础入门)
JavaScript 初学者手册(javascript零基础入门)

JavaScript是世界上最流行的编程语言之一。我相信这是您第一个绝佳选择的编程语言。我们主要使用JavaScript来创建:网站网络应用使用Node.j...

2023-03-21 18:25 xiyangw

JavaScript零基础入门—JavaScript的BOM(javascript基础入门教程)
JavaScript零基础入门—JavaScript的BOM(javascript基础入门教程)

其实,我们日常开发中,如果不是做前端架构,一般情况下,对BOM的操作其实并不会太多,当然,H5的话也可以借助BOM来定位和判断网络,这个以后再说。对于BOM的操...

2023-03-21 18:25 xiyangw

前端入门——JavaScript 函数(前端function函数的用法)

函数概念说到函数我们首先会想到数学中的函数公式,但是在编程中函数的概念和你想象中的可能有所不同。所谓函数就是一段可以被其它程序引用的代码或程序,可以叫它子程序。函数的作用就是将一个大的系统程序按功能分...

「JavaScript 教程」入门篇-导论(javascript技术教程)

1、什么是JavaScript语言?JavaScript是一种轻量级的脚本语言。所谓“脚本语言”(scriptlanguage),指的是它不具备开发操作系统的能力,而是只用来编写控制其他大型应...

取消回复欢迎 发表评论: