第六次网页前端培训笔记

qq_57231850

已于 2022-02-11 23:50:52 修改

阅读量470

点赞数

分类专栏： html的学习文章标签：前端 javascript

于 2022-02-10 23:10:38 首次发布

本文链接：https://blog.csdn.net/qq_57231850/article/details/122869421

版权

html的学习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一、总体概述

学习链接：

【优极限】 HTML+CSS+JavaScript+jQuery前端必学教程，小白教学，前端基础全套完成版_哔哩哔哩_bilibili

HTML全套基础教程-html实战开发-深入浅出HTML_哔哩哔哩_bilibili

JavaScript 教程 | 菜鸟教程
本次学习的主要内容是JS的基础使用，其中包括运算符、数组，函数定义和函数调用。

二、学习内容

1、运算符

运算符分为两种，一种为算数运算符，一种为赋值运算符。

赋值运算符有"+","-","*","/","%"(余数),"++"(自增),"--"(自减)，赋值运算符有”=“，”+=“，”-+“，”*=“，”/=“，”%=“。与Java不同，JS中”+“可以把文本值或字符串变量加起来即连接起来，还可以将字符串和数字进行加法运算，运算结果的类型为字符串。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS的运算符</title>
</head>
<body>
<script type="text/javascript">
  var a = 1+1;
  var b = 2-1;
  var c = 2*2;
  var d =4/2;
  var e = 4%3;
  var f = a++;
  var g = b--;
  console.log(a);
  console.log(b);
  console.log(c);
  console.log(d);
  console.log(e);
  console.log(f);
  console.log(g);

</script>
</body>
</html>

2、数组

数组对象是使用单独的变量名来存储一系列的值，创建数组有三种方式。第一种为常规方式：

var myCars=new Array();
myCars[0]="Saab";      
myCars[1]="Volvo";
myCars[2]="BMW";

第二种是简介方法：

var myCars=new Array("Saab","Volvo","BMW");

第三种则是通过字面：

var myCars=["Saab","Volvo","BMW"];

遍历数组的方式有很多种，其中最常用的就是通过for循环遍历。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS的数组</title>
</head>
<body>
<script type="text/javascript">
  var a =new Array("a","b","c");
  var b =["d","e","f"]
  for(let i =0; i<a.length; i++)
  {
    console.log("第"+(i+1)+"数字为"+a[i]);
  }
  for(let i =0; i<b.length; i++)
  {
    console.log("第"+(i+1)+"数字为"+b[i]);
  }
</script>
</body>
</html>

3、函数

1、定义函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS函数初步</title>
</head>
<body>
<script type="text/javascript">
  /*
      1、JS中的函数
        JS中的函数：等同于java语言中的方法，函数也是一段可以被重复利用的代码片段。
        函数一般都是可以完成某个特定功能的。
      2、回顾java中的方法？
          [修饰符列表] 返回值类型 方法名（形式参数列表）{
            方法体;
          }
          例如：
          public static boolean login(String name,String password){
              ...
              return true;
          }
          boolean loginSuccess = login("admin","123")
      3、JS中的变量是一种弱类型，那么函数应该怎么定义呢？
            语法格式：
               第一种方式：
               function 函数名(形式参数列表){
                    函数体;
               }
               第二种方法：
               函数名 = function(形式参数列表){
                    函数体;
               }

                JS中的函数不需要指定返回值类型，返回什么类型都行。
   */
  function sum(a,b){
      //a和b都是局部变量，他们都是形参(a和b都是变量名，变量名随意。)
      alert(a+b);
  }
  //函数必须调用才能执行的。
  sum(10,20);
  //定义函数sayHello
  sayHello = function (username){
      alert("hello" + username)
  }
  //调用函数
  sayHello("zhangsan")
</script>
<input type="button" value="hello" onclick="sayHello('jack')">
<input type="button" value="计算10和20的求和" onclick="sum(10,20)">
</body>
</html>

2、调用函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS函数初步</title>
</head>
<body>
<script type="text/javascript">
  /*
      Java中的方法有重载机制，JS中的函数能重载吗？
        JS当中的函数在调用的时候，参数的类型没有限制，并且参数的个数也没有限制，JS就是这么随意。（弱类型）

      重载的含义：
         方法名或者函数名一样，形参不同（个数，类型，顺序）
   */
  function sum(a,b){
    return a+b;
  }
  //调用函数sum
  var retValue = sum(1,2);
  alert(retValue);

  var retValue2 = sum("jack");//jack赋值给a变量，b变量没有赋值系统默认赋值undefined
  alert(retValue2);//jackundefined

  var retValue3 = sum();
  alert(retValue3);//NaN (NaN是一个具体存在的值，该值表示不是数字，Not a Number)

  var retValue4 =sum(1,2,3);
  alert("结果 = "+retValue4);//结果 =3
/*
    在JS当中，函数的名字不能重名，当函数重名的时候，后声明的函数会将之前声明的同名函数覆盖。
 */
  function test1(username){
      alert("test1");
  }
  function test1(){
      alert("test1 test1");
  }
  test1("lisi")//这个调用的是第二个test1()函数
</script>
</body>
</html>

三、内容总结

本次学习内容主要是JS中的数组，运算符和函数初步。

首先，应知道JS中所包含的几个基本运算符，与其他语言中的运算符基本类似。灵活使用运算符可以是数据变得更加清晰了当。数组，则是可以存储多个元素，与Java相比，JS的数组有一个特点，就是在数组中可以同时存储字符串、数字等两种或两种以上的数据类型，不会出现报错，并且网页可以正常运行。其次，在JS的函数中，首先要知道函数的关键字为function，其次，JS的函数可以理解为与Java语言中的方法类似，都是一段可以被重复利用的代码段。函数有两种定义方式，需要我们牢记，

                第一种方式：
               function 函数名(形式参数列表){
                    函数体;
               }
               第二种方法：
               函数名 = function(形式参数列表){
                    函数体;
               }

                JS中的函数不需要指定返回值类型，返回什么类型都行。

函数需要调用，才会执行。

最后，当前所学内容为JS基础中的重难点，需要去理解和记忆。

qq_57231850

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第六次网页前端培训笔记

一、总体概述学习链接：【优极限】 HTML+CSS+JavaScript+jQuery前端必学教程，小白教学，前端基础全套完成版_哔哩哔哩_bilibiliHTML全套基础教程-html实战开发-深入浅出HTML_哔哩哔哩_bilibiliJavaScript 教程 | 菜鸟教程本次学习的主要内容是JS的基础使用，其中包括运算符、数组，函数定义和函数调用。二、学习内容 1、运算符运算符分为两种，一种为算数运算符，一种为赋值运算符...
复制链接

扫一扫