前端|JavaScript

知识点

什么是JavaScript

  • JavaScript 是一种最流行的脚本语言
  • JavaScript 是属于 web 的语言,适用于 PC和移动端的开发
  • 为HTML 页面增加交互性、数据验证等特性
  • JavaScript可以改变
    • HTML内容
    • HTML属性
    • CSS样式
    • 隐藏显示HTML元素
<body>
<p id="demo" >JavaScript 改变 HTML 内容。</p>
<button type= " button" onclick= 'document.getElementById("demo").innerHTML
= " This JavaScript! "'>改变! </button>
</body>

document.getElementById("demo ")是查找 id="demo"的HTML元素,找到后,把元素内容(innerHTML)更改为"This JavaScript“
在这里插入图片描述

  • 特点
    • 交互性
    • 安全性 (不可以访问本地的硬盘)
    • 扩平台性 (浏览器可以解析js文件)
  • JavaScript只需解析就可以执行,而java需要先编译成字节码文件,再执行。

JavaScript 如何嵌入网页

将 JavaScript 语句插入 HTML 文档,内嵌和链接两种方式:

  • 使用<script> 标签将JavaScript代码嵌入HTML网页
<head>
<script type="text/javascript"> 
…… //Js代码
</script >
</head>

//例如
<script type="text/javascript">
  //弹窗
  alert("呵呵");
</script>
  • 把JavaScript代码写在一个*.js文件中,将JavaScript 源文件链接到 HTML 文档中
    需要注意的是:如果<script>标签通过src属性引入了外部的文件,里面的js代码就不会执行
<head>
<script language="text/javascript" src="文件名.js" >
</script>
</head>

JavaScript 的基本语法

变量

  • 变量声明
    • var 变量名
    • const 声明一个只读的常量,一旦声明,常量的值就不能改变
    • ES6:let。let 声明的变量只在 let 命令所在的代码块内有效
  • 变量名必须以字母或下划线(“_”)开头,变量可以包含数字、从 A 至 Z 的大小写字母
  • avaScript 区分大小写,即变量 myVar、 myVAR 和 myvar 是不同的变量
var a= 10; var x, y, z = 10;

函数

  • 自定函数
function 方法名称(str,num){     // 参数列表不能使用var关键字
	方法体;
	return;     // 如果没有返回值,retrun可以不写。
 }       
// 在方法体内存在一个数组   arguments 通过数组存储参数

//例如
function sum ( one, two)
{
	var result = one + two;
	return result;
}
  • 调用函数
    函数调用是和表单元素的事件一起使用,调用格式为:事件名=“函数名” ;
<INPUT name=“add” type=“button” value=“加法" onClick="sum(2,5)">
//单击此按钮时,调用函数sum( )执行
  • 变量作用域
    • 函数内 var声明的变量是局部变量,作用域是该函数
    • 函数外 var声明的变量是全局变量,作用域是整个HTML文件
    • 函数内 未用var声明的变量也是全局变量,作用域是HTML文件
    • 函数内 var声明的变量(局部变量),可以与全局变量同名
    • 即当全局变量跟局部变量重名时,局部变量的scope会覆盖掉全局变量的scope
<head>
<title>变量作用域示例</title>
<script language="text/javascript">
var i, j=10; //全局变量
function output( )
{
	var j=0; //局部变量
	i=100; //全局变量
	j++;
	j++;
	document.write(" j=",j);
	document.write(" i=",i);
	i++;
}
</script> </head>
<body><br><br>
<script>
document.write("尚未调用函数output(),所以i无定义,不能引用!<br>");
document.write("j的初始值=",j,"<br>");
document.write("调用output(),观察函数的输出!<br>");
output();
document.write("<br>调用output()后,观察函数对i,j的影响:i=",i," j=",j);
</script>
</body>

数据类型与运算符

  • 数据类型
    • String     字符串类型  双引号和单引号都是字符串
    • Number     数字类型  不区分整数和小数
    • Boolean     布尔类型
    • Null     空(给引用赋值)
    • Undefined     未定义(声明变量,没赋值)
    • parseFloat( )函数将字符串转换为float数据;
      parseInt( )函数将字符串转换为int数据
  • 示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <script type="text/javascript">
    /*  
        * typeof() 用来检测一个变量的类型
    */
    var str = "abc"; //字符串
    var num = "11"; //数字类型
    var flag = true; //布尔
    var data = null;
    var un;
    var str2 = "bcd";
    alert(typeof(str2));
    //可以检测一个变量的类型
    var str2 = 15;
    alert(typeof(str2));
    </script>
</body>
</html>

  • 运算符
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <script type="text/javascript">
        /*
             算术运算符
                alert(true + 1);    // 2
                * 0或者null代表是false,非0或者非null就是true,默认用1表示

            比较运算符
                ==      比较值
                ===     又比较值和类型
        */

        var num = 3710;
        // alert(num/1000*1000);        // 3710 

        var str = "12";
        //alert(str+1); // 121  链接字符串

        //alert(str - 1);   // 11   

        //alert("abc" - 1); // NaN

        //alert(true + 1);  // 2

        //alert(null + 1);  // 1

        /* if(5){
            alert("大于0以上的数字就是true");
        } */
        var n = 3;
        var m;
        m = ++n;
        //alert("m="+m+","+"n="+n);

        var str4 = "14";
        var num4 = 14;
        //alert(str4 == num4);
        alert(str4 === num4);
    </script>
</body>
</html>

一些语句

            * 判断语句
                if(8 == num){
                    赋值的问题,需要注意。
                }else{

                }

            * 循环语句
                for(var i=0;i<=8;i++){
                    // 循环体
                }
            * document对象write("字符串")
                * 把文本的内容写在浏览器端

            * while(){}

JavaScript 的对象

String对象

  • 属性
    length ⟹ \Longrightarrow 字符串的长度
  • 方法
    • 和HTML相关的
方法用途
bold()粗体显示字符串
fontcolor(color)设置字体的颜色
fontsize(size)设置字体的大小
italics()斜体显示
link(url)设置链接
sup()上标
  • 和JAVA中String对象类似的
方法用途
charAt(index)返回指定位置的字符
indexOf(searchvalue,fromindex)检索字符串
lastIndexOf()从后向前的
replace()替换字符串
substring(start,stop)从哪开始,到哪结合(包含开始不包含结束)
substr(start,length)从哪开始,截取长度
  • 示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <script type="text/javascript">
        var str = "abc";
        alert(str.length);
        document.write(str);
        document.write(str.charAt(2));
        document.write(str.indexOf("f"));
        var str2 = str.replace("bc", "ef");
        document.write(str2);

        document.write(str.substring(1, 3));   
        document.write(str.substr(1,3));   
        //bold()    粗体显示字符串
        document.write(mybold(str));
        function mybold(s){
            var result = "<b>"+s+"</b>";
            return result;
        }
        document.write(str.fontcolor("red"));
        document.write(str.link("http://www.baidu.com"));

        document.write(3+"2".sup());

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

Array对象

  • 数组初始化
	var arr = [2,3,4];
	var arr = new Array(5);   //数组长度是5
	var arr = new Array(5,6); //数组元素是5,6
	//数组的长度是可变的
  • 方法
方法用途
concat()链接数组或者元素都可以
join(separator)转化成字符串
pop()删除并返回最后一个元素
push()向末尾添加一个元素,返回新的长度
  • 示例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
</body>

    <script type="text/javascript">
        var arr = ["NBA","CBA","CUBA","WNBA"];
        alert(arr.length);
        document.write(arr+"<br/>");
        arr[4] = "abc";
        document.write(arr+"<br/>"); 

        document.write(arr+"<br/>");
        var arr2 = arr.concat("NBA");
        document.write(arr2+"<br/>");

        document.write(arr.join("-")+"<br/>");

        document.write(arr+"<br/>");
        var str = arr.pop();
        document.write(str+"<br/>");
        document.write(arr+"<br/>");

    </script>
</html>

Date对象

  • 创建对象
var date = new Date();    //当前的时间
  • 方法
方法用途
toLocaleString()根据本地的日期格式转化成字符串
getDate()返回一个月中的某一天
getDay()返回一周中的某一天(0-6)
getMonth()获取月份(0-11)
getFullYear()获取年
getTime()获取毫秒数
setTime()通过毫秒数设置日期
Date.parse(datestring)解析字符串(符合 RFC2822 或 ISO 8601 日期格式),返回从1970-1-1 00:00:00 UTC 到该日期对象的毫秒数
  • setTimeout的用法
    setTimeout(”调用的函数”,”定时的时间”)
var myTime=setTimeout("disptime( ) ",1000;
clearTimeout(myTime);

采用定时显示,使用定时器函数,每隔1秒调用disptime( )函数显示时间

  • 示例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
</body>

    <script type="text/javascript">
        var date = new Date();
        document.write(date+"<br/>");
        document.write(date.toLocaleString()+"<br/>");
        document.write(date.toLocaleDateString()+"<br/>");
        document.write(date.toLocaleTimeString()+"<br/>"); 

        var monthday = date.getDate();
        var weekday = date.getDay();
        var month = date.getMonth()+1;
        var year = date.getFullYear();

        document.write(year+"-"+month+"-"+monthday+" "+getWeek(weekday)+"<br/>");

        function getWeek(num){
            var arr = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
            return arr[num];
        }

        // 1414916247532
        var m = date.getTime();
        document.write(m+"<br/>");

        var date2 = new Date();
        date2.setTime(1414916247532);
        document.write(date2.toLocaleString()+"<br/>");

        var date3 = new Date(1414916247532);
        document.write(date3.toLocaleString()+"<br/>");

        var str = "11/11/2014";
        var mm = Date.parse(str);
        var date4 = new Date(mm);
        document.write(date4.toLocaleString()+"<br/>");

    </script>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	<script type="text/javascript">
    function disptime( )
    {
    var time = new Date( ); //获得当前时间
    var hour = time.getHours( ); //获得小时、分钟、秒
    var minute = time.getMinutes( );
    var second = time.getSeconds( );
    var apm="AM"; //默认显示上午: AM
    if (hour>12) //按12小时制显示
    { hour=hour-12;
    apm="PM" ;
    }
    if (minute < 10) //如果分钟只有1位,补0显示
    minute="0"+minute;
    if (second < 10) //如果秒数只有1位,补0显示
    second="0"+second;
    document.myform.myclock.value= hour+":"+minute+":"+ second+" "+apm;
    var myTime = setTimeout("disptime( )",1000);
    }
    </script>
<BODY onLoad="disptime( )">
	<FORM NAME="myform">
<INPUT name="myclock" type="text" value="">
</FORM>
</body>

</html>

Math对象

  • 方法
方法用途
ceil(x)上舍入
floor(x)下舍入
round(x)四舍五入
  • 示例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
</body>
    <script type="text/javascript">
    document.write(Math.ceil(14.2)+"<br/>");           
    document.write(Math.floor(14.6)+"<br/>");      
    document.write(Math.round(14.3)+"<br/>");      
        // 获取10个数,从1-10之间的数
        for(var i=0;i<10;i++){
        	document.write(Math.floor(Math.random()*10+1)+"<br/>");
        }
    </script>
</html>

浏览器对象

在这里插入图片描述

分层结构

在这里插入图片描述

Window 对象
  • 属性
名称说明
document表示给定浏览器窗口中的 HTML 文档。
history包含有关客户访问过的URL的信息。
location包含有关当前 URL 的信息。
name设置或检索窗口或框架的名称。
status设置或检索窗口底部的状态栏中的消息。
screen包含有关客户端的屏幕和显示性能的信息。
  • 方法
名称说明
alert (“m提示信息”)显示包含消息的对话框。
confirm(“提示信息”)显示一个确认对话框,包含一个确定取消按钮
Prompt(“提示信息”)弹出提示信息框
open (“url”,“name”)打开具有指定名称的新窗口,并加载给定 URL 所指定的文档;如果没有提供 URL,则打开一个空白文档
close ( )关闭当前窗口
setTimeout(“函数”,毫秒数)设置定时器:经过指定毫秒值后执行某个函数
Document 对象
  • 属性
名称说明
alinkColor设置或检索文档中所有活动链接的颜色
bgColor设置或检索 Document 对象的背景色
body指定文档正文的开始和结束
linkColor设置或检索文档链接的颜色
location包含关于当前 URL 的信息
title包含文档的标题
url设置或检索当前文档的 URL
vlinkColor设置或检索用户访问过的链接的颜色
  • 方法
名称说明
clear ( )清除当前文档
close ( )关闭输出流并强制显示发送的数据
write (“text”)将文本写入文档
History 对象
  • 方法
名称说明
back()加载 History 列表中的上一个 URL。
forward()加载 History 列表中的下一个 URL。
go(“url” ornumber)加载 History 列表中的一个 URL,或要求浏览器移动指定的页面数。
Location 对象
  • 属性
名称说明
host设置或检索位置或 URL 的主机名和端口号
hostname设置或检索位置或 URL 的主机名部分
href设置或检索完整的 URL 字符串
  • 方法
名称说明
assign(“url”)加载 URL 指定的新的 HTML 文档。
reload()重新加载当前页
replace(“url”)通过加载 URL 指定的文档来替换当前文档

JavaScript 事件处理

基本语法

事件名=" JavaScript 代码或调用函数"

<INPUT type="BUTTON" … onClick="alert(“单击!");>
<INPUT type="BUTTON" … onMouseDown="check( ) ">
//表示鼠标按下时,将调用执行函数check( )
事件名说明
onClick鼠标单击
onChange文本内容或下拉菜单中的选项发生改变
onFocus获得焦点,表示文本框等获得鼠标光标。
onBlur失去焦点,表示文本框等失去鼠标光标。
onMouseOver鼠标悬停,即鼠标停留在图片等的上方
onMouseOut鼠标移出,即离开图片等所在的区域
onMouseMove鼠标移动,表示在
层等上方移动
onLoad网页文档加载事件
onSubmit表单提交事件
onMouseDown鼠标按下
onMouseUp鼠标弹起

实例

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>图片切换</TITLE>
</HEAD>
<BODY>
	<IMG
		src="https://elearning.ecnu.edu.cn/images/console/logos/header_institution.png"
		name="picture" width="400" height="255" align="middle"
		onMouseOver="src='https://elearning.ecnu.edu.cn/images/console/logos/header_institution.png'"
		onMouseOut="src='https://elearning.ecnu.edu.cn/webapps/bb-BBWeChat-BBLEARN/img/wechat_logo.png'">
	<H1>移动变化图像</H1>
</BODY>
</HTML>

JavaScript 的函数

eval 函数

计算字符串表达式的值

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
</body>
    <script type="text/javascript">
    var str1=prompt("请输入一个表达式","");
    var result=eval(str1);
    document.write(str1+"="+result);
    </script>
</html>

在这里插入图片描述
在这里插入图片描述

isNaN 函数

验证参数是否为 NaN(非数字)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
</body>
    <script type="text/javascript">
    var x = prompt("输入一些数据","");
    if (isNaN(x))
    	alert (x + " 不是一个数字");
    else
    	alert (x + " 是一个数字");
    </script>
</html>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

实例:显示指定数的阶乘值

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>函数简例</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
    function factor(num){
    	var i,fact=1;
    	for (i=1;i<num+1;i++)
    	fact=i*fact;
    	return fact;
    	}
    </script>
</head>
<body>
	<p>
		<script>
			document.write("调用factor函数,5的阶乘等于:",factor(5),"。");
			</script>
	</p>
</body>

</html>

练习

用JavaScript设计并实现程序,页面有一个文本框,显示当前年、月、日,当鼠标移上去,文本框就变换为当前的具体时间显示。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>日期显示</title>
<script src="jedate/jedate.js"></script>
</head>

<body>

	<input type="text" id="test" />
	<script type="text/javascript">
var t=document.getElementById("test");
function nodetail( )
{
	var d=new Date();
	t.value=d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate();
}

function detail( )
{
	var time = new Date( ); //获得当前时间
	var hour = time.getHours( ); //获得小时、分钟、秒
	var minute = time.getMinutes( );
	var second = time.getSeconds( );
	var apm="AM"; //默认显示上午: AM
	if (hour>12) //按12小时制显示
	{ hour=hour-12;
	apm="PM" ;
	}
	if (minute < 10) //如果分钟只有1位,补0显示
	minute="0"+minute;
	if (second < 10) //如果秒数只有1位,补0显示
	second="0"+second;
	t.value= hour+":"+minute+":"+ second+" "+apm;
}
nodetail( );
t.onmouseout=nodetail
t.onmouseover=detail
</script>

</body>

</html>
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值