js基本语法（一）——String Date number Math Array 函数 events window Location

本文详细介绍了JavaScript的基础语法，包括String的方法如charAt()、concat()等，Date对象的设置与获取时间的方法，Number类型的处理，Math对象的随机数生成和其他数学运算，Array的各种操作，函数的定义与使用，以及事件处理如onclick、onmouseover等。同时，还涵盖了window对象的常用方法和Location对象的属性。

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

javascript
运行在浏览器端的脚本语言
1.轻量级的脚本语言
2.基于对象，并不完全面向对象
3.弱类型

内嵌js

<script type="text/javascript">
</script>

外部js
xxxx.js
引用：

<script type="text/javascript" src="js/myscript.js">

注释和java一样

弹出对话框

var a=5;
alert(typeof(a));

计算长方形周长

var a=parseInt(prompt("请输入长"));
var b=parseInt(prompt("请输入宽"));
var s=(a+b)*2;
alert(s);

全等符号，值和数据类型都相等

alert(a===b);

输出

document.write("*<br />");

输出金字塔

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>

	</head>
	<body>
		<div style="color: red; font:50px 仿宋">
			<script type="text/javascript">
				var str="*";
                 for(var i=0;i<10;i++){
                 	for(var j=0;j<10-i;j++){
                 		document.write("&nbsp;");
                 	}
                 	document.write(str+"<br/>");
                 	str+="**";
                 }
		    </script>
		</div>
	</body>
</html>

布尔类型对于数字，只要非零就为true；对于字母，只要非空就为true

String

charAt() 返回在指定位置的字符

var str="hello";
alert(str.charAt(0));

concat() 连接字符串

alert(str.concat(" world"));

indexOf() 检索字符串

alert(str.indexOf("l"));

fromCharCode() 从字符编码创建一个字符串

var str=String.fromCharCode(65,66,67,68,69);
alert(str);

replace() 替换与正则表达式匹配的子串

var str="hello world";
alert(str.replace("world","javascript"));

split() 把字符串分割为字符串数组

var str="192.168.0.219";
var ret=str.split("\.");
for(var i=0;i<ret.length;i++){
	alert(ret[i]);
}

substring() 提取字符串中两个指定的索引号之间的字符

var str="zhangsan@126.com";
var index=str.indexOf("@");
var username=str.substring(0,index);
alert(username);

sup() 把字符串显示为上标
sub() 把字符串显示为下标

Date

创建 Date 对象：

var myDate=new Date();

setFullYear() 设置 Date 对象中的年份（四位数字）
setMonth() 设置 Date 对象中月份 (0 ~ 11)
setDate() 设置 Date 对象中月的某一天 (1 ~ 31)
setHours() 设置 Date 对象中的小时 (0 ~ 23)
setMinutes() 设置 Date 对象中的分钟 (0 ~ 59)
setSeconds() 设置 Date 对象中的秒钟 (0 ~ 59)
setMilliseconds() 设置 Date 对象中的毫秒 (0 ~ 999)
setTime() 以毫秒设置 Date 对象

设置时间

var dt=new Date(); //2020-9-15 15:30:28
            dt.setFullYear(2020);
            dt.setMonth(8);
            dt.setDate(15);
            dt.setHours(15);
            dt.setMinutes(30);
            dt.setSeconds(28);

或

   dt.setTime(3600*1000*24*100);

获取时间

getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)
getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)
getMonth() 从 Date 对象返回月份 (0 ~ 11)
getFullYear() 从 Date 对象以四位数字返回年份
getYear() 请使用 getFullYear() 方法代替
getHours() 返回 Date 对象的小时 (0 ~ 23)
getMinutes() 返回 Date 对象的分钟 (0 ~ 59)
getSeconds() 返回 Date 对象的秒数 (0 ~ 59)
getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)
getTime() 返回 1970 年 1 月 1 日至今的毫秒数

toTimeString() 把 Date 对象的时间部分转换为字符串
toDateString() 把 Date 对象的日期部分转换为字符串
toLocaleString() 根据本地时间格式，把 Date 对象转换为字符串
每隔一秒刷新页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta http-equiv="Refresh" content="1;url=string.html" />
		<script type="text/javascript">
            var dt=new Date(); 
           document.write(dt);
		</script>
	</head>
	<body>
	</body>
</html>

number

NaN 非数字值

var num=new Number("abc");
alert(num);

toFixed 把数字转换为字符串，结果的小数点后有指定位数的数字

var num=new Number("3.1415926");
alert(num.toFixed(2));

Math

random() 返回 0 ~ 1 之间的随机数

var num=Math.random();
alert(num);

Array

创建数组

var arr = new Array();

数组的定义
方法1：

var arr=new Array(10);
arr[0]="aaa";
arr[1]=100;
arr[2]="bbb";
arr[3]=200;

方法2：

var arr=new Array("AAA",100,200,"BBB");

方法3：

var arr=["aaa","bbb","ccc","ddd"];

数组的取值
方法1：

  for(var i=0;i<arr.length;i++){
    				document.write(arr[i]+"<br/>");
    			}

方法2：

for(var i in arr){
			document.write(arr[i]+"<br/>");
		}

随机数组

var num=new Number(Math.random()*100+1);
num.toFixed(0);

二维数组

var arr=new Array();
arr["河南"]=new Array("许昌","郑州","南阳","周口","安阳");
arr["河北"]=new Array("石家庄","保定","衡水","秦皇岛");
arr["湖南"]=new Array("长沙","岳阳","张家界","湘潭","郴州");
			
			for(var i in arr){
				document.write(i+"<br/>");
				for(var j in arr[i]){
					document.write("&nbsp;&nbsp;"+arr[i][j]+"<br/>");
				}
			}

push() 向数组的末尾添加一个或更多元素，并返回新的长度

arr.push("aaa");

unshift() 向数组的开头添加一个或更多元素，并返回新的长度

arr.unshift("ccc");

reverse() 颠倒数组中元素的顺序

arr.reverse();

pop() 删除并返回数组的最后一个元素

var arr=new Array(1,2,3,4,5,6);
var num=arr.pop();
document.write(num+"<br/>");

shift() 删除并返回数组的第一个元素

for(var i =0;i<6;i++){
var num=arr.shift();
document.write(num+"<br/>");
}

splice() 删除元素，并向数组添加新元素

arr.splice(2,3,7,8,9,10,11);

表示从下标为2的位置删掉3个，替换为后面的元素。

concat() 连接两个或更多的数组，并返回结果

var arr=new Array(1,2,3,4,5,6);
var arr2=[7,8,9,10];
var arr3=arr.concat(arr2);
        for(var i in arr3){
       	document.write(arr3[i]+",");
         }

join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔

var arr=new Array(1,2,3,4,5,6);
var arr2=[7,8,9,10];
var arr3=arr.concat(arr2);
var s=arr3.join("--");
document.write(s);

函数

全局函数

parseFloat() 解析一个字符串并返回一个浮点数
parseInt() 解析一个字符串并返回一个整数
Number() 把对象的值转换为数字

var str="123";
var num=new Number(str);

String() 把对象的值转换为字符串

var s=new String(num);

isNaN() 检查某个值是否是数字

alert(isNaN("aaaa123"));

eval() 计算 JavaScript 字符串，并把它作为脚本代码来执行

var s="1+2+3+4+5";
alert(eval(s));

escape() 对字符串进行编码

var str1=escape("hello 郑州");
alert(str1);

unescape() 对由 escape() 编码的字符串进行解码

var str2=unescape(str1);
alert(str2);

自定义函数

function test(a,b){
				var c=a*b;
			    alert(c);
			}

events

onclick 鼠标点击某个对象
onmouseout 鼠标从某元素移开
onmouseover 鼠标被移到某元素之上

<img src="image/bg.jpg" onclick="test(2,3)" onmouseover="alert('over....');" 
			onmouseout="alert('out....');"/>

onchange 用户改变域的内容

<input type="file" name="file" onchange="alert('change file.....');" />

onclick 鼠标点击某个对象

<input type="button" value="btn-1" onclick="changecolor(1)" />

var btn2=document.getElementsByTagName("input")[1];
				btn2.onclick=function(){
					changecolor(250);
				};

onload 某个页面或图像被完成加载

window.onload=function(){}

onfocus 元素获得焦点
onblur 元素失去焦点

var input=document.getElementsByTagName("input");
			
				input[0].onfocus=function(){
					input[0].style.backgroundColor="red";
				}
				
				input[0].onblur=function(){
					input[0].style.backgroundColor="white";
				}

onmousemove 鼠标被移动

div.onmousemove=function(event){
					div.innerHTML=event.x+","+event.y;
				}

onkeydown 某个键盘按键被按下
onkeyup 某个键盘按键被松开

input.onkeydown=function(){
					div.innerHTML="keydown";
				}
				input.onkeyup=function(){
					div.innerHTML="keyup";
				}

通过键盘控制图片移动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#mydiv{width: 200px; height: 180px; border:1px solid #ccc; margin: 200px 300px;}
		</style>
		<script type="text/javascript">
			window.onkeydown=function(event){
				var s=String.fromCharCode(event.keyCode);
				var div=document.getElementById("mydiv");
				//var left=parseInt(div.style.marginLeft);
				var style=div.currentStyle?div.currentStyle:document.defaultView.getComputedStyle(div,null);
				var left=parseInt(style.marginLeft);
				switch(s){
					case 'D':
					    div.style.marginLeft=left+5+"px";
					break;
				}
			}
		</script>
	</head>
	<body>
		<div id="mydiv">
			<img src="image/49.gif" />
		</div>
	</body>
</html>

onsubmit 确认按钮被点击

<form action="#" method="post" onsubmit="alert('submit.....');">
			用户名<input type="text" name="username" /><br /><br />
			密码<input type="password" name="password" /><br /><br />
			<input type="submit" value="登录"/>
		</form>

创建对象
方法1：

<script type="text/javascript">
var obj=new Object();
			
			obj.username="zhangsan";
			obj.sex="male";
			obj.age=18;
			
			obj.hello=function(a,b){
				alert("你想干啥？"+(a+b));
			}
			
			alert(obj.username);
			obj.hello(3,5);
			</script>

方法2：

<script type="text/javascript">
function Student(name,age,sex){
				this.name=name;
				this.age=age;
				this.sex=sex;
				
				this.hello=function(){
					alert(this.name+this.age+this.sex);
				}
				
				
			}
			
			var obj=new Student("张三",18,'男');
			alert(obj.name);
			obj.hello();
			</script>

方法3：

<script type="text/javascript">
			//json
			var obj={
				"username":"zhangsan",
			    "gender":"男",
			    "age":17,
			    "hello":function(){
			    	alert(100);
			    }
			    };
			alert(obj.username);
			obj.hello();
		</script>

window

setTimeout() 在指定的毫秒数后调用函数或计算表达式
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框
open() 打开一个新的浏览器窗口或查找一个已命名的窗口
moveBy() 可相对窗口的当前坐标把它移动指定的像素
moveTo() 把窗口的左上角移动到一个指定的坐标
resizeBy() 按照指定的像素调整窗口的大小
resizeTo() 把窗口的大小调整到指定的宽度和高度
scrollTo() 把内容滚动到指定的坐标

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript">
		    function del(){
		    	if(confirm("你确定要删除吗?")){
		    		alert("数据已删除....");
		    	}
		    }
		    var mywindow;
		    function openwind(){
		    	 mywindow=window.open("ad.html","","width=300,height=300,location=0,menubar=0");
		    }
		    
		    function mymoveto(){
		    	if(mymoveto){
		    		mywindow.moveTo(200,200);
		    	}else{
		    		alert("请先打开窗口");
		    	}
		    }
		    function mymoveby(){
		    	if(mymoveto){
		    		mywindow.moveBy(100,100);
		    	}else{
		    		alert("请先打开窗口");
		    	}
		    }
		    
		    function myresizeto(){
		    	if(mymoveto){
		    		mywindow.resizeTo(200,200);
		    	}else{
		    		alert("请先打开窗口");
		    	}
		    }
		    
		    function myresizeby(){
		    	if(mymoveto){
		    		mywindow.resizeBy(50,-50);
		    	}else{
		    		alert("请先打开窗口");
		    	}
		    }
		    
		    function myscrollto(){
		    	window.scrollTo(0,2000);
		    }
		    
		    function myscrollby(){
		    	window.scrollBy(0,100);
		    }
		</script>
	</head>
	<body style="height: 9999px;">
		<div style="position: fixed;">
	    <input type="button" value="删除"  onclick="del()"/>
		<input type="button" value="open" onclick="openwind()" />
		<input type="button" value="moveto" onclick="mymoveto()" />
		<input type="button" value="moveby" onclick="mymoveby()" />
		<input type="button" value="resizeto" onclick="myresizeto()" />
		<input type="button" value="resizeby" onclick="myresizeby()" />
		<input type="button" value="scrollto" onclick="myscrollto()" />
		<input type="button" value="scrollby" onclick="myscrollby()" />
		</div>
	</body>
</html>

setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#mydiv{
				width:400px;
				height: 50px;
				border:1px solid red;
			}
		</style>
		
	</head>
	<body>
		<div id="mydiv">
			
		</div>
		
		<script type="text/javascript">
			function showtime(){
				var dt=new Date();
				var div=document.getElementById("mydiv");
				div.innerHTML=dt;
			}
			setInterval(showtime,1000);
		</script>
	</body>
</html>

setTimeout() 在指定的毫秒数后调用函数或计算表达式，将一个方法延迟执行

 <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#mydiv{
				width: 400px; height: 100px; border:1px solid red;
				font:bold 100px 微软雅黑;
			}
		</style>
		<script type="text/javascript">
			var num;
			function addnum(){
				num=parseInt(document.getElementById("mydiv").innerHTML);
				num++;
				document.getElementById("mydiv").innerHTML=num;
				window.setTimeout(addnum,1000);
			}
			/*var t;
			function start(){
				if(!t)
				   //t=window.setInterval(addnum,1000);
				   t=window.setTimeout(addnum,1000);
			}
			function stop(){
				//window.clearInterval(t);
				window.clearTimeout(t);
			}*/
		</script>
	</head>
	<body>
		<div>
			<input type="button" value="start" onclick="addnum()"/>
			<input type="button" value="stop" onclick="stop()"/>
		</div>
		<div id="mydiv">
			0
		</div>
	</body>
</html>

Location

hostname 设置或返回当前 URL 的主机名。
href 设置或返回完整的 URL
port 设置或返回当前 URL 的端口号
protocol 设置或返回当前 URL 的协议
reload() 重新加载当前文档

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			function show(){
				alert("主机名:"+location.hostname+"\n协议:"+location.protocol+"\n端口号:"+location.port);
			}
			
			function toindex(){			
				location.href="index.html";
			}
			
			function reload(){
				location.reload();
			}
		</script>
	</head>
	<body>
		<input type="button" value="show" onclick="show()" />
		<input type="button" value="index" onclick="toindex()" />
		<input type="button" value="reload" onclick="reload()" />
	</body>
</html>