JavaScript进阶篇笔记(一)_var myarr=[1,2,3,4,5,6,7]; myarr.concat(8,9); docu-优快云博客

本文链接：https://blog.youkuaiyun.com/monkey_kong/article/details/52059792

本文介绍了JavaScript的基础知识，包括JavaScript的作用、关键字、数组操作、函数定义及调用、事件处理等内容，并通过实例演示了如何利用JavaScript增强网页动态效果、实现用户交互等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. JavaScript基础

1.1 JavaScript能做什么？

增强页面动态效果(如:下拉菜单、图片轮播、信息滚动等)
实现页面与用户之间的实时、动态交互(如:用户注册、登陆验证等

1.2 JavaScript关键字

1.3 JavaScript数组

<!DOCTYPE  HTML>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>数组</title>
<script type="text/javascript">
 //创建数组
 var myarr=["*","##","***","&&","****","##*"];
 myarr[7]="**";
 //显示数组长度
 //alert(myarr.length);
 //将数组内容输出，完成达到的效果。
document.write(myarr[0]+"<br>"+myarr[7]+"<br>"+myarr[2]+"<br>"+myarr[4])
</script>
</head>
<body>
</body>
</html>

1.4 JavaScript函数

<!DOCTYPE  HTML>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>函数</title>
<script type="text/javascript">
//定义函数
function fun(x,y){
    if(x>=y){
        return x;
    }else{
        return y;
    }
}

var v1=fun(5,4);
var v2=fun(6,3);
//调用函数，实现下面两组数中，返回较大值。
  document.write(" 5 和 4 的较大值是:"+v1+"<br>");
  document.write(" 6 和 3 的较大值是:"+v2 ); 
</script>
</head>
<body>
</body>
</html>

2. JavaScript事件

2.1 主要事件

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 鼠标经过事件 </title>
<script type="text/javascript">
    function message(){
      confirm("请输入密码后，再单击确定!"); }
</script>
</head>
<body>
<form>
密码:<input name="password" type="password" >
<input name="确定" type="button" value="确定" onmouseover="message()"/>
<input type="button" value="onclick事件测试" onclick="message()"/>
</form>
</body>
</html>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 内容选中事件 </title>
<script type="text/javascript">
  function message(){
    alert("您触发了选中事件！"); }
</script>    
</head>
<body>
  <form>
  个人简介：<br>
   <textarea name="summary" cols="60" rows="5" onselect="message()">请写入个人简介，不少于200字！</textarea>
  </form>
</body>
</html>

<script type="text/javascript">
//事件会在页面加载完成后，立即发生，同时执行被调用的程序。
//加载页面时，触发onload事件，事件写在<body>标签内。
  function message(){
    alert("加载中，请稍等…"); }
</script>    
</head>
<body onload="message()">
  欢迎学习JavaScript。
</body>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 卸载事件 </title>
<script type="text/javascript">  
    //onbeforeunload在关闭时弹框，onunload不弹
     window.onbeforeunload = onunload_message;   
     function onunload_message(){   
        alert("您确定离开该网页吗？");   
    }   
</script>   
</head>
<body>
  欢迎学习JavaScript。
</body>
</html>

<!DOCTYPE html>
<html>
 <head>
  <title> 事件</title>  
  <script type="text/javascript">
   function count(){

    //获取第一个输入框的值
    var v1=document.getElementById("txt1").value;
    //获取第二个输入框的值
    var v2=document.getElementById("txt2").value;
    //获取选择框的值
    var v3=document.getElementById("select").value;
    //获取通过下拉框来选择的值来改变加减乘除的运算法则
    var v4;
    //switch
    switch (v3) {
        case "+": v4=parseInt(v1)+parseInt(v2); break;
        case "-": v4=parseInt(v1)-parseInt(v2); break;
        case "*": v4=parseInt(v1)*parseInt(v2); break;
        case "/": v4=parseInt(v1)/parseInt(v2); break;  
    }
    //设置结果输入框的值 
    document.getElementById("fruit").value=v4;
   }
  </script> 
 </head> 
 <body>
   <input type='text' id='txt1' /> 
   <select id='select'>
        <option value='+'>+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
   </select>
   <input type='text' id='txt2' /> 
   <input type='button' value=' = ' onclick="count()"/> <!--通过 = 按钮来调用创建的函数，得到结果--> 
   <input type='text' id='fruit' />   
 </body>
</html>

2. JavaScript内置对象

2.1 什么是对象？

JavaScript 中的所有事物都是对象，如:字符串、数值、数组、函数等，每个对象带有属性和方法。
对象的属性：反映该对象某些特定的性质的，如：字符串的长度、图像的长宽等；
对象的方法：能够在对象上执行的动作。例如，表单的“提交”(Submit)，时间的“获取”(getYear)等；
JavaScript 提供多个内建对象，比如 String、Date、Array 等等，使用对象前先定义，如下使用数组对象：

数组对象的方法：

//数组对象
var myarray=new Array(6);//定义数组对象
var myl=myarray.length;//访问数组长度length属性
//concat方法,在数组myarr1后面连接数组myarr2
document.write(myarr1.concat(myarr2));
//join方法，把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。结果：86-010-84697581
var myarr1= new Array("86","010")
var myarr2= new Array("84697581");
var myarr3= myarr1.concat(myarr2);
document.write(myarr3.join("-"));
//reverse方法，颠倒数组元素的顺序。结果是：你,爱,我
var myarr1= ["我","爱","你"];
document.write(myarr1.reverse());
//slice方法，从已有的数组中返回选定的元素，含头不含尾
var myarr1= ["我","爱","你"];
document.write(myarr1.slice(1,3));//爱，你
//sort方法,对数组降序排序
<script type="text/javascript">
   function sortNum(a,b) {
       return b-a;
   }
var myarr = new Array("80","16","50","6","100","1");
document.write(myarr.sort(sortNum));
</script>

//字符串对象
var mystr="Hello world!";//创建一个字符串
var request=mystr.toUpperCase(); //使用字符串对象方法
document.write( mystr.charAt(mystr.length-1));//返回指定位置的字符
//字符串对象mystr中，o字母第二次出现的位置索引
document.write(mystr.indexOf("o",mystr.indexOf("o")+1));
//split方法，在mystr中的-字符出分割
document.write(mystr.split("-")+"<br />");
//substring方法，输入开始和结束的索引，提取字符串
document.write(mystr.substring(0,5)
//substr方法，输入开始位置索引和长度，提取指定长度的字符串
document.write(mystr.substr(0,5)

//日期对象
var myDate=new Date();
var myDate2=new Date(2016,7,22);
var myDate3=new Date(Jul 22,2016);

set/getDate();
set/getFullYear();
set/getYear();
set/getMonth();
set/getHours();
set/getMinutes();
set/getSeconds();
set/getTime();
//得到星期
var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
  document.write("今天是：" + weekday[mydate.getDay()]);
//推迟时间
document.write("当前时间："+mydate+"<br>");
mydate.setTime( mydate.getTime()  + 2* 60 * 60 * 1000);
document.write("推迟二小时时间：" + mydate);

2.2 Math对象

注意：Math 对象是一个固有的对象，无需创建它，直接把 Math 作为对象使用就可以调用其所有属性和方法。这是它与Date,String对象的区别。
属性：

方法：

//ceil方法,向上取整，向下取整floor()
document.write(Math.ceil(3.3));
//round方法，四舍五入
document.write(Math.round(3.3)+ "<br>");
//random方法，返回区间[0,1)中的一个随机数
document.write(Math.round((Math.random())*10));

 var mydate = new Date();
  var weekend = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六",];
  document.write(mydate.getFullYear()+"年"+mydate.getMonth()+"月"+mydate.getDate()+"日 "+weekend[mydate.getDay()]);