当前位置：网站首页 > 优雅编程 > 正文

web前端入门JavaScript笔记之一（web前端入门到精通）

sinye56 2024-10-27 14:11 16 浏览 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);   //

? 错误类型：

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

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

? 总结

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

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

? 执行流程图：

web前端笔记

上一篇：好程序员web前端培训JavaScript学习笔记Promise
下一篇：好程序员web前端培训JavaScript学习笔记 DOM一