第4天_JavaScript基础

第4天_JavaScript基础

1. 学习目标

• JavaScript函数
• JavaScript数组的运用
• JavaScript字符串操作
• JavaScript日期的使用
• JavaScript对象
• JavaScript定时器的应用

2. JavaScript函数

2.1 JavaScript函数介绍

• JS函数的概念：
  函数就是把特定功能的代码抽取出来，使之成为程序中的一个独立实体。
• 函数的作用：
  正如函数的概念, 我们可以根据需要, 将特定的功能用函数来包裹
• 使用函数的好处：
  • 函数可以在同一个程序或其他程序中多次重复使用（通过函数名调用）
  • 使程序变得更简短而清晰 ， 提高可读性
  • 有利于程序维护

2.2 函数的定义

• 定义函数的语法格式:
  function 函数名(参数1，参数2，……) {
  执行语句;
  return 返回值;
  }
• 注意:
  • 函数名后圆括号()中的参数数量不定, 也可以没有; (根据功能需要)
  • return关键字的作用是将某个值返回, 如果没有返回值则默认返回undefined;

练习:

1, 写一个函数判断一个年份是不是闰年   

2, 写一个函数判断一个数是不是素数 (又称质数,除了1和本身以外不再有其他数整除)

3. JavaScript数组的运用

3.1 数组的定义

• 方式一:
  new Array(参数1，参数2,…) //只有一个数字参数时是数组的长度（new可以省略,但一般尽量写上）
  例如:
  var arr = new Array(); //定义一个空数组
  var arr = new Array(10); //创建一个包含 10 个元素的数组，没有赋值
  var arr = new Array(“芙蓉姐姐”, 30); //创建一个数组有两个元素
• 方式二:
  var arr = [1,2,3,4,5,“abc”]; //字面量定义方式2

3.2 数组元素的获取(访问)

• arr[0]: 表示数组的第一个元素，0是下标，也叫索引
• arr[1]: 表示数组的第二个元素，1是下标

3.3 数组的遍历

一般使用普通for循环

3.4 数组的属性：

length : 数组长度  

3.5 数组的常用方法:

push(): 接收任意数量的参数，把它们逐个添加到数组的末尾，并返回修改后数组的长度;     	

pop(): 从数组末尾移除最后一个元素，减少数组的 length 值，然后返回移除的元素;	

sort() : 从小到大排序 ,  原数组也被升序排序了               

reverse() : 逆向排序, 原数组也被逆向排序了	

slice( ) :  切片， 不修改原数组, 将原数组中的指定区域数据提取出来并返回一个新数组	

splice( ) : 截取原数组中指定的数据, 会改变原数组	

indexOf( ) : 获取数组中第一个出现指定元素的下标， 如果不存在则返回-1	

join() : 将数组中的元素用指定字符连接，连接成为一个字符串

练习：

1,  给定一个整型数组，打印其中的最大值和最小值.

2, 让数组中的首尾两个元素交换位置

3,  对称数组. 定义一个数组，元素类型与个数皆未知，返回新数组，由原数组的元素正序反序拼接而成; 如传入[“One”, “Two”,”Three”] 返回[“One”, “Two”, “Three”,”Three”,”Two”, “One”]

4,  给定一个不存在重复元素的整数数组，例如[6,4,7,2,5,8]和一个数字，例如10，请设计一个函数找出两个元素(或同一个元素加自身)，并且使这两个数的和为给定数字，并打印出来例如[6,4,7,2,5,8]和数字10. 打印结果为: 6,4  2,8  5,5 

4. JavaScript字符串操作

4.1 字符串的定义

var str = “亲”；
var str = '亲' 

4.2 下标

console.log( str[0] );

4.3 字符串的属性

length : 字符串长度

4.4 字符串的方法

String.fromCharCode(97):  将ASCII码转换成字符	

str.indexOf(“abc”):  查找字符串第一次出现的位置, 如果没找到则返回-1  	

str.replace(): 替换字符串	

str.substring(start,end); 截取字符串 范围是[start, end)	

str.split(separator, howmany); 根据分隔符、拆分成数组	

str.toLowerCase(); 把字符串转换成小写	

str.toUpperCase(); 把字符串转换成大写

练习：

1, 获取65-90中的随机数, 并将该数当成ASCII码,转换成字母Math.random() : [0, 1)

2, 字母数字组合验证码（四位） (如: 4YT8) (数字,大写字母随机)

5. JavaScript日期的使用

5.1. Date对象

• Date类型使用自UTC(Coordinated Universal Time,国际协调时间) 1970年1月1日午夜(零时)开始经过的毫秒数来保存日期。Date类型保存的日期能够精确到1970年1月1日之前或之后的 285616年
• 时间戳： 从1970年到指定时间的毫秒数

5.2, Date对象的创建

• 创建一个日期对象，
  • 使用new运算符和 Date构造函数即可.
    // 在调用Date构造方法而不传递参数的情况下，新建的对象自动获取当前的时间和日期
    var d = new Date();
  • 创建日期对象并指定时间
    var d = new Date(“2022/08/22”);
    var d = new Date(2022, 04, 13, 14, 34);
    // 注: 日期的格式可以是“2022/08/22”，“2022-08-22”，或1970年当前日期的毫秒数1663453475234

5.3 日期Date的常用方法

• setDate() / getDate(); 从Date对象中返回一个月中的某一天(1~31)
• getDay(); 从Date对象返回一周中的某一天(0~6)
• set / getMonth(); 从Date对象中返回月份(0~11)
• set / getFullYear(); 从Date对象以四位数返回年份
• set / getHours(); 返回Date对象的小时(0~23)
• set / getMinutes(); 返回Date对象的分钟(0~59)
• set / getSeconds(); 返回Date对象的秒数(0~59)
• set / getMilliseconds(); 返回Date对象的毫秒
• set / getTime(); 返回1970年1月1日至今的毫秒数

练习:

1, 显示当前时间 (显示格式: 2019年 11月 11日 11时 11分 11秒)

2, 判断两个日期相差的天数(可先求毫秒数差,再转换成天 或 两个日期对象相减)

6. JavaScript对象

6.1对象的概念:

对象Object 是一种引用数据类型 。     

在 ECMAScript 中对象可以存储变量和函数(数据和功能) 

6.2创建对象

• 方式一: 使用new
  var obj = new Object(); //new方式
  obj.name = ‘张三’; //创建属性字段
  obj.age = 18; //创建属性字段
• 方式二: 字面量方式
  var obj = {
  name :‘张三’, //创建属性字段,最后加逗号
  age : 18,
  run : function() { //对象中添加方法
  retrun “正在跑步…”;
  }
  };

6.3属性字段也可以使用字符串形式

var box = {       
	"name": "张三",  //也可以用字符串形式        
	"age" : 28     
};

6.4两种属性输出方式

alert(box.age);    //点表示法输出    
alert(box["age"]);   //中括号表示法输出，注意引号

6.5使用 delete 删除对象属性 或 方法

delete obj.name;     //删除属性     
delete obj.run;     //删除方法

7. JavaScript定时器的应用

7.1, 定时器

• 开启定时器setInterval

  var timer = setInterval(function(){
  console.log(“每隔1秒执行一次”);
  }, 1000);

• 关闭定时器clearInterval

  clearInterval(timer);

7.2, 延时器setTimeout

• 开启延时器setTimeout
  var timer = setTimeout( function(){
  console.log(“1秒后执行一次”);
  },1000);
• 关闭延时器clearTimeout
  clearTimeout(timer);

练习:

1，实现秒表功能 : 显示时,分,秒 , 点击按钮开始计时