JavaScript进阶篇_学习笔记

首页免费课 JavaScript进阶篇笔记

JavaScript进阶篇

                
                慕课官方号
            页面重构设计

                    查看讲师更多课程 
                    慕课官方号讲师的其他课程
                
帝堵抢车位动画制作
初级·36954
免费课程
                                
JavaScript入门篇 
入门·739811
免费课程
                                
                难度入门
            
                时长 8小时55分
            
                学习人数
            
综合评分9.47
                            2557人评价
                        查看评价
                                9.7
                                内容实用
                            
                                9.4
                                简洁易懂
                            
                                9.3
                                逻辑清晰

最热最新

AppMan

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>screen</title>
</head>
<script type="text/javascript">
/*
window.screen 对象属性
.screen.availHeight 窗口可以使用的屏幕高度，单位像素
.screen.availWidth 窗口可以使用的屏幕宽度，单位像素
.screen.height 屏幕的高度，单位像素
.screen.width 屏幕的宽度，单位像素
.screen.colorDepth 用户浏览器表示的颜色位数，通常为32位
.screen.pixelDepth 用户浏览器表示的颜色位数，通常为32位（IE浏览器不支持此属性）
*/
document.write(window.screen.availHeight + "<br>");
document.write(window.screen.availWidth + "<br>");
document.write(window.screen.height + "<br>");
document.write(window.screen.width + "<br>");
document.write(window.screen.colorDepth + "<br>");
document.write(window.screen.pixelDepth + "<br>");
</script>
<body>
</body>
</html>

查看全部

0 采集收起来源：screen对象
2023-03-01
AppMan

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>navigator</title>
<script type="text/javascript">
function validB(){
var u_agent = window.navigator.userAgent;
var B_name="不是想用的主流浏览器!";
if(u_agent.indexOf("Firefox")>-1){
B_name="Firefox";
}else if(u_agent.indexOf("Chrome")>-1){
B_name="Chrome";
}else if(u_agent.indexOf("MSIE")>-1&&u_agent.indexOf("Trident")>-1){
B_name="IE(8-10)";
}
document.write("浏览器:"+B_name+"<br>");
document.write("u_agent:"+u_agent+"<br>");
}
</script>
</head>
<body>
<form>
<input type="button" value="查看浏览器" onclick="validB()" >
</form>
</body>
</html>

查看全部

0 采集收起来源：userAgent
2023-03-01
AppMan

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Navigator</title>
</head>
<script type="text/javascript">
/*
window.navigator. 对象属性：
appName 浏览器的名称
appVersion 浏览器的平台和版本信息
appCodeName 浏览器代码名的字符串表示
platform 运行浏览器的操作系统平台
userAgent 客户机发送服务器的user-agent头部的值
*/
document.write(window.navigator.appName + "<br>");
document.write(window.navigator.appVersion + "<br>");
document.write(window.navigator.appCodeName + "<br>");
document.write(window.navigator.platform + "<br>");
document.write(window.navigator.userAgent + "<br>");
</script>
<body>
</body>
</html>

查看全部

0 采集收起来源：Navigator对象
2023-03-01
AppMan

location 对象属性：
window.location.href 设置或返回完整的URL
window.location.hash 设置或返回从井号（#）开始的URL（锚）
window.location.host 设置或返回主机名和当前URL的端口号
window.location.hostname 设置或返回当前URL的主机名
window.location.port 设置或返回当前URL的端口号
window.location.pathname 设置或返回当前URL的路径部分
window.location.protocol 设置或返回当前URL的协议
window.location.search 设置或返回从问号（?）开始的URL（查询部分）

location 对象方法：
reload() 重新加载当前文档
assign() 加载新的文档，有可点击返回上一个页面
replace() 用新的文档替代当前文档，没有返回一页

查看全部

0 采集收起来源：Location对象
2023-03-01
AppMan

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script type="text/javascript">
/*
location 对象属性：
window.location.href 设置或返回完整的URL
window.location.hash 设置或返回从井号（#）开始的URL（锚）
window.location.host 设置或返回主机名和当前URL的端口号
window.location.hostname 设置或返回当前URL的主机名
window.location.port 设置或返回当前URL的端口号
window.location.pathname 设置或返回当前URL的路径部分
window.location.protocol 设置或返回当前URL的协议
window.location.search 设置或返回从问号（?）开始的URL（查询部分）

location 对象方法：
reload() 重新加载当前文档
assign() 加载新的文档，有可点击返回上一个页面
replace() 用新的文档替代当前文档，没有返回一页
*/

document.write(" window.location. 属性:<br>");
document.write(" .href 完整的URL: " + window.location.href + "<br>");
document.write(" .hash 从井号（#）开始的URL（锚）: " + window.location.hash + "<br>");
document.write(" .host 主机名和当前URL的端口号: " + window.location.host + "<br>");
document.write(" .hostname 当前URL的主机名: " + window.location.hostname + "<br>");
document.write(" .port 当前URL的端口号: " + window.location.port + "<br>");
document.write(" .pathname 当前URL的路径部分: " + window.location.pathname + "<br>");
document.write(" .protocol 当前URL的协议: " + window.location.protocol + "<br>");
document.write(".search 从问号（?）开始的URL（查询部分）: " + window.location.search + "<br>");

function locReload() {
window.location.reload()
}

function locAssign() {
window.location.assign("https://baidu.com")
}

function locReplace() {
window.location.replace("https://baidu.com")
}
</script>
</head>
<body>
<br/><br/>
reload() 重新加载当前文档:
<form>
<input type="button" value="重新加载当前文档" onclick="locReload()"/>
</form>
<br/><br/>
assign() 加载新的文档，有可点击返回上一个页面:
<form>
<input type="button" value="加载新的文档" onclick="locAssign();"/>
</form>
<br/><br/>
replace() 用新的文档替代当前文档，没有返回一页:
<form>
<input type="button" value="用新的文档替代当前文档" onclick="locReplace()"/>
</form>
</body>
</html>

查看全部

0 采集收起来源：Location对象
2023-03-01
AppMan

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<script type="text/javascript">
function GoBack() {
window.history.back();
}
function GoForward() {
window.history.forward();
}
</script>
<body>
点击下面的锚点链接，添加历史列表项:
<br />
<a href="#target1">第一个锚点</a>
<a name="target1"></a>
<br />
<a href="#target2">第二个锚点</a>
<a name="target2"></a>
<br /><br />
使用下面按钮，实现返回前或下一个页面:
<form>
<input type="button" value="返回前一个页面" onclick="GoBack();" />
<input type="button" value="返回下一个页面" onclick="GoForward();" />
</form>
</body>
</html>

查看全部

0 采集收起来源：返回浏览历史中的其他页面
2023-03-01
AppMan

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>History对象</title>
</head>
<script type="text/javascript">
var HL = window.history.length;
document.write(HL);
</script>
<body>
</body>
</html>

查看全部

0 采集收起来源：History 对象
2023-03-01
AppMan

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>计时器</title>
<script type="text/javascript">
var num=0;
function startCount() {
document.getElementById('count').value=num;
num=num+1;
setTimeout("startCount()", 1000);
}
</script>
</head>
<body>
<form>
<input type="text" id="count" />
<input type="button" value="Start" onclick="startCount()"/>
</form>
</body>
</html>

查看全部

0 采集收起来源：计时器setTimeout()
2023-03-01
AppMan

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>计时器</title>
<script type="text/javascript">
function clock(){
var time=new Date();
document.getElementById("clock").value = time;
}
var ic = setInterval(clock, 1000);
</script>
</head>
<body>
<form>
<input type="text" id="clock" size="50" />
<input type="button" value="Stop" onclick="clearInterval(ic)" />
</form>
</body>
</html>

查看全部

0 采集收起来源：取消计时器clearInterval()
2023-03-01
AppMan

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>定时器</title>
<script type="text/javascript">
var attime;
function clock(){
var time=new Date();
attime= time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds();
document.getElementById("clock").value = attime;
}
setInterval(clock, 1000);
</script>
</head>
<body>
<form>
<input type="text" id="clock" size="50" />
</form>
</body>
</html>

查看全部

0 采集收起来源：计时器setInterval()
2023-02-28
AppMan

window对象方法：
alert() 显示一段小学和一个确认按钮的警告框。
prompt() 显示可提示用户输入的对话框。
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
open() 打开一个新的浏览器窗口或查找一个已命名的窗口。
close() 关闭浏览器窗口。
print() 打印当前窗口的内容。
focus() 把键盘交点给予一个窗口。
blur() 把键盘焦点从顶层窗口移开。
moveBy() 可相对窗口的当前坐标把它移动指定的像素。
moveTo() 把窗口的左上角移动到一个指定的坐标。
resizeBy() 按照指定的像素调整窗口的大小。
resizeTo() 把窗口的大小调整到指定的宽度和高度。
scrollTo() 把内容关东到指定的坐标。
setInterval() 每隔指定的时间执行代码。
setTimeout() 在指定的延迟时间之后来执行代码。
clearInterval() 取消setInterval() 的设置
clearTimeout() 取消setTimeout() 的设置

查看全部

0 采集收起来源：window对象
2023-02-28
AppMan

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>window对象</title>
<script type="text/javascript">
alert("欢迎来到慕课网");
function openw() {
window.open("https://www.imooc.com","_blank", "width=600,height=400");
}
</script>
</head>
<body>
<form>
<input type="button" value="点击我，打开新窗口" onclick="openw()"/>
</form>
</body>
</html>

查看全部

0 采集收起来源：window对象
2023-02-28
AppMan

<!DOCTYPE HTML>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>系好安全带,准备启航</title>
<script type="text/javascript">
//通过javascript的日期对象来得到当前的日期，并输出。
var d = new Date();
//document.write(d.getDate()+"<br>");
var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
//document.write(weekday[d.getDay()]+"<br>");

//成绩是一长窜的字符串不好处理，找规律后分割放到数组里更好操作哦
var scoreStr = "小明:87;小花:81;小红:97;小天:76;小张:74;小小:94;小西:90;小伍:76;小迪:64;小曼:76";
var nf = scoreStr.split(";");
//document.write(nf+"<br>" + nf.length + "<br>");

//从数组中将成绩撮出来，然后求和取整，并输出。
var sum = 0;
for(var i = 0; i < nf.length; i++) {
//document.write(nf[i] + "<br>");
var f = nf[i].substring(nf[i].indexOf(":")+1);
//document.write(f + "<br>");
sum = sum + parseInt(f);
//document.write("sum = " + sum + "<br>")
}
document.write(d.getFullYear() + "年" + (d.getMonth() + 1) + "月" + d.getDate() + "日 " + weekday[d.getDay()]+ ", 平均分："+ Math.round(sum / nf.length));
</script>
</head>
<body>
</body>
</html>

查看全部

0 采集收起来源：编程练习
2023-02-28
AppMan

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Array对象 </title>
<script type="text/javascript">
function sortNum(a,b) {
// 降序
return b - a;
// 升序 return a - b;
}
var myarr = new Array("80","16","50","6","100","1");
document.write(myarr.sort(sortNum));
</script>
</head>
<body>
</body>
</html>

查看全部

0 采集收起来源：数组排序sort()
2023-02-28
AppMan

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Array对象 </title>
<script type="text/javascript">
var myarr1= ["我","爱","你"];
document.write(myarr1.slice(1));
</script>
</head>
<body>
</body>
</html>

查看全部

0 采集收起来源：选定元素slice()
2023-02-28

首页上一页 7 8 9 10 11 12 13 下一页尾页

0/150

提交

取消

开始学习

课程须知: 你需要具备HTML、css基础知识，建议同学们也可以想学习下js入门篇，快速认识js，熟悉js基本语法，更加快速入手进阶篇！

老师告诉你能学到什么？: 通过JavaScript学习，掌握基本语法，制作简单交互式页面

微信扫码，参与3人拼团

热搜

最近搜索清空

JavaScript进阶篇