百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 优雅编程 > 正文

web前端入门JavaScript笔记之一(web前端入门到精通)

sinye56 2024-10-27 14:11 17 浏览 0 评论

学习大纲

1.JS概念

JS就是我们javascript ,他是被广泛应用于浏览器的,一种解释性脚本语言


解释性:

整个代码的执行过程中,他的编译和执行是一起合成,不生成中间的编译文件。

编译性:

在代码的执行过程中, 会生成一个中间文件,编译文件,最终执行的不是源代码,而是编译文件。


2.JS组成部分


ECMAScript:就是定义了JS的语言基础,变量声明、函数的定义等,语法规则

DOM: JS可以操作HTML网页【标签】

BOM: JS有能力操作浏览器

3.JS的作用

制作网页特效:

例如:图片轮播图、Tab 选项卡

表单验证【前端验证】

例如:用户登录,用户注册 验证数据的完整性,准确性


二、Console对象-控制台输出

1.语法

Console.log(data);
Console.error(data);
Console.warn(data);

2.说明

Data:就是要输出的数据

.Log:正常输出数据

.error:错误输出数据

.warn:警告输出数据

Console 不是JS的操作对象,浏览器定义的操作对象,所有的浏览器都支持

3.作用

在开发的过程中,我们可以使用这个对象,来进行代码调试

4.案例展示


<script>
   console.log('正常输出!');
   console.error('正常输出!');
   console.warn('正常输出!');
</script>


? 思考:为什么不使用document.write或者alert

Document.write :在页面中输出数据,就会影响页面的美观,不容易找到,不能输出对象的结构【object】

Alert : 页面弹出一个警告框, 不支持复杂的数据结构的输出

三、变量

1.概念

在生活中,存放一个东西我们把东西放在仓库里面

在程序执行中,数据存放在数据库中

在程序运行中,将数据储存到内存中去,内存开辟一个临时的空间来保存这个数据,这个时候保存的这个数据叫做变量

2.变量的声明

? 语法

Var 变量名=变量值;

? 声明类型

隐式声明:

没有使用var 来修饰 就是隐式声明

全局的变量

显式声明:

在定义变量的时候使用var 就叫做显式声明

局部变量

? 变量命名规则

变量的命名使用字母、数字、下划线、$[首字母不能是数字]

变量严格区分大小写

定义的变量不要使用系统关键字, if for switch

? 练习

//声明一个为空的变量

Var name ;

//声明一个变量并赋值

Var name = ‘小红’;

//同时声明多个变量 [多个变量的声明使用,分隔开来]

Var name1,name2,name3;

//同时声明多个变量并且赋值

Var name1=’小明’,name2=’小红’,name3=”小王”;

四、变量数据类型

1.说明

JS是弱类型语言

弱类型:

在声明变量的时候,并且给变量赋值,变量的类型取决于值的类型

强类型:

在声明变量的时候要有修饰符[int string],如果不声明会报错

2.基本类型(3种)

数据类型

描述

示例

数字类型

包含了整型和浮点型

Var num=1、Var num=1.1

字符串类型string

使用引号引起来的数据,是字符串类型

Var name=”小明”;

Bool 类型

是现实中的真和假,返回值只有2个 true ,false

Var bool = true;


显著的特点:一个变量只能储存一个值

3.复合类型(2种)


数据类型

描述

示例

数组

一系列有序数据的集合

Var arr = []

Var arr = new Array()

对象

等高级第三在讲


数组的概念

一系列有序数据的集合

储存

数组可以储存多个数据,那么每个数据我们叫做数组的一个“元素”

获取

数组可以通过一些数字或者字符串来获取数组的值, 那么这个数子或者字符串叫做数组的“下标/索引/键”

个数[length]

数组总的个数,我们把它叫做数组的长度,长度可以使用 数组名.length 来获取

下标

数组的下标是从0开始,数组的长度-1 就是数组的下标


创建数组

使用new方式关键词和array()

Var arr = new Array(值1,值2...);


使用中括号[]来创建数组【推荐】

Var arr = [值1,值2...]

在声明数组的时候要注意:关键字严格区分大小写

数组的值没有类型限制

? 操作数组

获取元素

数组名[下标]

增加元素

数组名[增加 下标]

修改元素

数组名[修改 下标]

? 多维数组

在定义数组的时候数组的值,是一个数组类型,那么这个时候这个数组我们称之为多维数组

Array(
Array(),
Array(),
)
二位数组
Array(
Array(
Array()
)
)

三维数组

数组的维度不是说有多少个数组元素,而是根据他的层次有多个层

? 操作多维数组

获取元素

数组名[下标1][下标2]

增加元素

数组名[下标1][下标2]

Var arr = [
[1,2],
[3,4,[
]],
]
Arr[2]= 1;
Arr[1][2][0] = 值
// 修改元素
Var arr = [
[1,2],
[3,4],
]
Arr[1][1] = 值;

4.特殊类型(2种)

数据类型

描述

示例

null

空,变量里面没有值

清空数据 Var name = 1;

Name = null;

undefine

未定义,在使用一个变量的没有声明这个时候就会出现undefine

Var name;

Console.log(name);


5.打印数据类型

语法:

Typeof(data)

Typeof data

说明:

Data :变量

Typeof 返回值是一个字符串,

Typeof :string\number\object\function object: 包含了数组,对象,null

五、JS变量的传值方式

1.赋值传值【拷贝传值】

? 说明:

拷贝传值,就是将变量重新复制一份出来,给另外一个变量,物理地址不同

? 举例

2.引用传值

? 思考代码:

var arr1 = [100,38,2,250];
 var arr2 = arr1;
 console.log(arr2[0]); //100
 arr1[0] = 290;
 console.log(arr2[0]);// 290


? 说明:

数组,对象赋值的时候,是将物理地址传递给变量, 实际的数据共用的是一个内存

所以当改变第一声明的数据的时候,变量的值也会随之更改

六、运算符

1.运算符和表达式的概念

运算符 - 是在代码中对各种数据进行运算的符号。例如,有进行加、减、乘、除算术运算的运算符,有进行与、或、非、异或逻辑运算的运算符.

表达式 - 是由数字、算符、数字分组符号(括号)、变量等以能求得数值的有意义排列方法所得的组合

2.算数运算符

? 种类

+、-、*、/、% 、++、--


? 说明

++ 自增 使用变量的时候i++ ++在前面,先自加本身然后在复制 ++在后面,先赋值,在自加 ;

-- 自减 使用变量的时候i-- --在前面,先自减本身然后在复制 --在后面,先赋值,在自减 ;

? 课堂练习

1、(表达式,运算符)已知a,b,c,求如下情况下d的值:

var a, b, c, d;
a = 1;    b = 2.2;    c = 3.3;  d = a + b + c;        // d = 6.5
a = 1;    b = 2.2;    c = “3.3”;  d = a + b + c;     // d = 3.23.3
a = 1;    b = “2.2”;  c = 3.3;  d = a + b + c;     // d = 12.23.3
a = “1”;  b = 2.2;    c = 3.3;  d = a + b + c;     // d = 12.23.3
a = “1”;  b = 2.2;    c = 3.3;  d = a + (b + c);   // d = 15.5?
a = “1”;  b = 2.2;    c = 3.3;  d = (a + b) + c;    // d = 12.23.3
//2、(运算符)读程序写结果
var i = 10;  var j = i++;  alert(i + “,” + j);      // j = ?, i = ?
var i = 10;  var j = ++i;  alert(i + “,” + j);      // j = ?, i = ?
var i = 10;  var j = i++;  i=j++;  alert(i + “,” + j);      // j = ?, i = ?
var i = 10;  var j = ++i;  i=++j;  alert(i + “,” + j);          // j = ?, i = ?
var i = 10;  
var j = i++;  //j=10 //i=11
alert(i + “,” + j);
var i = 10;  
var j = ++i;  //j=11 i=11
alert(i + “,” + j);  
var i = 10;
 var j = i++;  //j=10 ,i=11
i=j++;  // j=11 ,i=10
alert(i + “,” + j);
var i = 10;  
var j = ++i;   //j=11 ,i=11
i=++j;  //j=12,i=12
alert(i + “,” + j);


3.赋值运算

? 种类:

= \ +=\-=\*=\/=\%=

? 说明:

= 直接赋值

+= : var a = a+1; var a+=1

4.字符串运算符

? 种类:

= +=

? 说明:

= 赋值

+= : 如果说是字符串,使用这个运算符代表着字符拼接

? 课堂练习

1.将 document.write("<img src=1.jpg/>"); 中src里的图片地址替换为动态变量。

2.将数组的数据显示在页面中

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 <title>字符串运算符练习</title>
</head>
<body>
 <div>
   <ul id='ul'>
     
   </ul>
 </div>
</body>
<script type="text/javascript">
 var arr = [
   ' <li>离离原上草</li>',
       '<li>处处闻啼鸟</li>',
       '<li>欲穷千里目</li>',
       '<li>社会主义好</li>'
 ];
 
</script>
</html>
<script type="text/javascript">
 var arr = [
   ' <li>离离原上草</li>',
       '<li>处处闻啼鸟</li>',
       '<li>欲穷千里目</li>',
       '<li>社会主义好</li>'
 ];
   //循环遍历数组
   var str=''; //定义一个变量
   for(i=0;i<arr.length;i++){
     
       str +=arr[i];
   }
   
   //将字符串写入到ul容器中
   
 document.getElementById('ul').innerHTML = str;
</script>


5.比较运算符

? 种类:

>\<\>=\<= \ == \!=\===\!==

? 说明:

=== 三个等号,全等于,不仅数据的值相等,并且类型相等

!==

6.三元运算符【?】

? 语法:

表达式? 代码段1:代码段2


? 说明:

如果表达的是true ,则执行代码段1

如果表达式返回的是false, 则执行代码段2

7.逻辑运算符

? 种类:

逻辑与 && 并且 两个条件都成立,则执行

逻辑或 || 或者 有一个条件成立, 则执行

逻辑非 ! 取反

七、判断

1.单分支【if】

If(条件表达式){

//代码段

}

2.双分支【if-else】

If(条件表达式){

//代码段1

}else{

//代码段2

}

3.多分支【if-else-if】

If(条件表达式){

//代码段1

}else if(条件表达式2){

//代码段2

}else if(条件表达式2){

//代码段3

}

.....

Else{

}

4.多路选择【switch-case】

Switch(bool){

Case 值1:

Break;

Case 值2:

Break;

Default:

}

脚下留心:在使用switch 的时候, 括号里面的值必须是bool类型,要不然判断体是不会执行的,前提条件case 里面不是一个固定值,而是表达式。

思考题:如何使用switch判断学生成绩?

90分及以上优秀

70分及以上良好

60分及以上及格

0分及以上不及格

其他未知状态

<script>
   
   var num= -1;
   
   switch(true){
       case num>90:
           alert("优秀");
           break;
       case num>70:
           alert("良好");
           break;
            case num>60:
           alert("及格");
           break;
            case num>0:
           alert("不及格");
           break;
       default:
           alert("去吃饭吧!");
         
       }
   
</script>


八、循环

1.For

For(循环变量初始化,条件表达式,循环变量更新){

//代码段

}

执行流程:

循环变量初始化->表达式的判断【true】->先执行代码段1->循环遍历更新

2.While

//1.循环变量初始化

While(2.条件表达式){

//代码段

//3.变量更新

}

3.do-while

//1.循环变量初始化

Do{

//指定代码段

//变量更新

}while(条件表达式)

执行流程:

循环变量初始化->条件表达式的判断->执行代码段->变量更新

循环变量初始化->执行代码段->变量更新->表达式的判断

4.For/while/do-while 的区别

? 什么时候使用for 或者while ?

For 已知循环次数使用

While 未知循环次数使用

? While 和do-while的区别

? 循环流程

While 先进性表达式的判断然后执行代码段

Do-while 先执行代码段在进行表达式的判断

? 循环次数

While 循环次数根据条件表达式来

Do-while 不管 表达式是否正确,都会执行代码一次


5.for-in

? 概念:

循环数组和对象,我们可以使用for ,已知下标循环使用,

如果一个数组或者对象的下标我们不知道,可以使用for-in 来循环

? 语法:

For(变量 in 数组/对象){

//代码段

}

说明:

变量:如果循环的是一个数组,那么这个变量就是数组的下标

变量 : 如果循环的是对象,那么这个变量就是对象里面的操作方法名称

? 练习

循环输出数组

循环输出对象的方法


九、函数

1.函数的概念

就是将一些经常用到的代码进行一个封装,多出都用到同一个代码。

一次封装,终身使用

2.函数的定义

function 函数名(参数1,参数2,...){

//封装的代码

}

说明:

声明函数的时候 function 系统关键字,严格区分大小写

函数传递的参数如果是多个,我们使用,号分隔开发

定义函数的时候我们把参数叫做形参,调用函数的时候传递的这个参数是实参

思考:形参和实参的个数不一样会怎么样?

? 如果实参的数量小于形参

? 如果实参的数量大于形参

开发注意事项

脚下留心:在定义变量的时候,不要和函数重名,如果重名就会覆盖原来的


3.匿名函数

? 概念

匿名函数,就是没有名字的函数

? 语法

Var fun = function(){

}

必须要有变量来储存函数

? 调用匿名函数

调用方法:变量名称+()

匿名函数自调用

调用使用fun(),

演变过程一:

Function(){alert(‘1’);}()

语法不允许这样写

演变过程二、


4.Return 的作用

程序终止返回

终止程序并且返回数据

脚下留心:

5.变量的种类和生命周期

? 种类

全局变量:在整个代码段中,都能获取到这个变量 直接写变量名称

局部变量:作用范围只能是在函数体内来使用 如果说在函数内部使用var 代表变量是局部变量


? 生命周期

全局变量:整个代码执行完毕然后程序自动销毁该变量

局部变量:在函数调用完成后,程序自动销毁该变量

6.【新】arguments对象的使用

? 描述

它是函数的一个内置对象, 里面包含了调用函数是的实参

思考:下面的代码如何优化

如果说在增加参数进行数字统计

? 实例


<script>
   //如果在增加参数进行数据统计,我们要修改很多地方不方便
//    function sum(a,b,c,d,e){
//        
//        return a+b+c+d+e;
//    }
   
   
   //arguments
   function sum(){
      num = 0
       for(i=0;i<arguments.length;i++){
           num +=arguments[i];
       }
       return num;
   }
   
   console.log(sum(1,2));
</script>


十、Script的执行过程

1.函数的预加载

说明:

函数的调用,只要是在同一个代码段中, 不管是先声明在调用还是先调用在声明,都可以调用。首先整个代码的执行先将 变量的定义,函数先加载到内存中去,所有说我们在调用的时候就没有顺序限制了。

问题:函数的调用能不能再声明之前?

2.Script语句执行的流程

? 说明:

用户打开网页

首先读取第一个代码段【script】

对代码进行解析 【语法检测,变量的声明,函数的加载】

Var i ;

执行代码;

Var i=1;

结束当前代码段

? 举例:


3.错误类型:

? 思考下述代码直接结果

代码一:执行错误

var num1 = 111;
alert(num1);  //
alert(num2);  //
代码二:解析错误
alert(1);   //
alert(;     //
alert(2);   //

? 错误类型:

执行错误:程序运行的时候出现的错误

解析错误:程序进行解析编译的时候出现的语法错误

? 总结

执行错误:会影响当前代码段的代码的执行,如果出现执行错误,当前代码段的所有的代码终止运行,不会影响下一个代码段的代码执行。

解析错误:会影响当前代码段的所有代码执行,不会影响下一个代码段的代码执行

? 执行流程图:

相关推荐

Xfce桌面环境升级截图工具,支持AVIF和JPEG XL格式

IT之家5月20日消息,Xfce团队近日将屏幕截图工具xfce4-screenshooter更新至1.10.4版本,允许用户将截图保存为AVIF和JPEGXL两种无损图像格...

pyautogui:截图及定位功能_如何截图定位

截图函数PyAutoGUI可以截取屏幕截图,将其保存到文件中,并在屏幕中查找图像。如果您有一个小图像,例如需要单击并希望在屏幕上找到它的按钮,这将非常有用。这些功能由PyScreeze模块提供,该模块...

如何在Ubuntu上释放/boot分区的空间?

前几天,我收到一个警告,/boot分区已经几乎满了,没有剩余空间了。?来源:linux.cn?作者:AnkushDas?译者:郑?(本文字数:2868,阅读时长大约:4分钟)前几天,...

新Linux木马发现:每30秒截图并用麦克风录音

近期在Linux平台发现的木马程序能够定期截图,并可通过已连接的麦克风来录音,不同于通常设计用来攻击Linux端服务器的恶意程序。该木马程序最早被俄罗斯安全公司DoctorWeb发现,他们将其称之为...

使用 Rust 实现屏幕截图功能_rust怎么设置快捷键

前言在一些网安产品应用程序中,屏幕截图是常见的需求。对于想要使用Rust来进行屏幕截图的开发者,今天我们将介绍如何使用Rust实现屏幕截图功能,捕获屏幕内容并保存为图像文件。本文的目标本文件将...

Linux中的截图工具 - Flameshot_linux里面比较好的截图工具

Flameshot[1]是一款功能强大但易于使用的屏幕截图软件,中文名称火焰截图。Flameshot简单易用并有一个CLI版本,所以你也可以从命令行来进行截图。Flameshot是一个Lin...

linux/unix中如何使用sed一次替换多个模式

文本处理是我们使用linux/unix必须掌握的一项技能。前两篇文章介绍了如何删除文本文件中的空行以及如何删除文本文件中包含指定字符串的行。本文主要介绍如何使用sed命令一次替换多个模式。以下是测试中...

Linux环境中的shell echo命令使用技巧

简介:在平常编写LinuxShell脚本的时候,常常会用到echo命令。这echo命令的作用呢,就是在显示器上显示出一段文字。这个命令挺简单的,可它在脚本编程还有日常的系统管理里,那可是...

7 个有趣的 Linux 命令,我10年linux经验都没见过一个

Linux命令行可以是高级用户和系统管理员的法宝,Linux不仅仅是枯燥乏味的系统,Linux是由喜欢玩乐的人开发的,他们创建了一系列好玩的命令,当你想要微笑时,试着自己玩这些。1、蒸汽机车(s...

Linux文本处理三剑客之sed命令全面解析,一文就够了

作用sed命令是一个非交互式的行文本编辑器,它能对文件内容进行编辑,默认每次处理文本文件中所匹配到一行内容到模式空间,然后用后面的命令进行操作,操作完成之后,会把模式空间里面的内容输出到屏幕上,然后把...

Linux下常用命令及使用方法详解(可收藏!!!)

总结有哦福利哦ls文件属性:-:普通文件d:目录文件b:块设备c:字符设备文件l:符号连接文件p:命...

Python也有“管道”操作,你知道吗?

在编程世界中,"管道"是一项充满魅力的功能。像Unix和Linux中的管道一样,Python也有“管道”操作。本文将深入研究Python的管道操作,提供一些示例来帮助你理解和掌握它。什么是管...

运维人员常用的 Linux 命令汇总_运维人员常用的 linux 命令汇总表

作为运维人员,这些常用命令不得不会,掌握这些命令,工作上会事半功倍,提供工作效率。一.文件和目录1.cd命令,用于切换当前目录,它的参数是要切换到的目录的路径,可以是绝对路径,也可以是相对路径。cd...

Linux sed 命令详解_linux教程:sed命令的用法

简介sed的全称是:StreamEditor流编辑器,在Linux中是一个强大的文本处理工具,可以处理文件或标准输入流。基本语法sed[options]'command'file通过...

Linux tail命令用法_tail在linux

tail命令是Linux/Unix中的一个命令行工具,用于查看文件的最后几行或动态实时查看文件(tail-f)。语法tail[option(s)][file(s)]主要选项--n:指定显示文...

取消回复欢迎 发表评论: