专栏首页python3javascript基础-3

javascript基础-3

一、Browser对象

<一>、window对象

1.window.尺寸

当ie>=9时:

window.innerHeight/outHeight window.innerWidth/outWidth

当ie=8,7,6,5时:

window.documentElement.clientHeight/outHeight window.documentElement.clientWidth/outWidth 或者 document.body.clientHeight document.body.clientWidth

2.window.open();widow.colse();

(1).window.open(URL,name,features,[replace])

其中: URL:新窗口的位置,有“省略/空格”时,不能显示任何文档;

name:窗口名称/target特性;

features:窗口特点:

channelmode=yes|no|1|0 是否使用剧院模式显示窗口。默认为 no。 directories=yes|no|1|0 是否添加目录按钮。默认为 yes。 fullscreen=yes|no|1|0 是否使用全屏模式显示浏览器。 默认是 no。处于全屏模式的窗口必须同时处于剧院模式。 height=pixels 窗口文档显示区的高度。以像素计。 left=pixels 窗口的 x 坐标。以像素计。 location=yes|no|1|0 是否显示地址字段。默认是 yes。 menubar=yes|no|1|0 是否显示菜单栏。默认是 yes。 resizable=yes|no|1|0 窗口是否可调节尺寸。默认是 yes。 scrollbars=yes|no|1|0 是否显示滚动条。默认是 yes。 status=yes|no|1|0 是否添加状态栏。默认是 yes。 titlebar=yes|no|1|0 是否显示标题栏。默认是 yes。 toolbar=yes|no|1|0 是否显示浏览器的工具栏。默认是 yes。 top=pixels 窗口的 y 坐标。 width=pixels 窗口的文档显示区的宽度。以像素计。

replace:一个可选布尔值

true:URL 替换浏览历史中的当前条目 false:URL 在浏览历史中创建新的条目

(2).window.close()
  • 直接调用; eg: <script type="text/javascript"> function closeCurrentWindow() { window.close(); } </script>
  • 当用于关闭指定的由window.open()打开的窗口,在没有window.open()时,则控制台显示“无法使用脚本关闭非脚本打开窗口”; eg: <script type="text/javascript"> var openedWindow; function openWindow() { openedWindow = window.open('moreinfo.htm'); } function closeOpenedWindow() { openedWindow.close(); } </script>
(3).window.resize();window.scroll();

window.resizeBy(XX[px],YY[px]);——窗口尺寸变化的单位为:±XX,±YY (单位/px); window.resizeTo(XX[px],YY[px]);——窗口尺寸变换为:XX,YY(单位/px); window.scrollBy(XX[px],YY[px]);——屏幕滚动的单位为:±XX,±YY (单位/px); window.scrollToo(XX[px],YY[px]);———屏幕滚动到数据位置:XX,YY(单位/px); object.onscroll();onscroll事件:元素滚动时执行..; document.Element.scrollTop||document.body.scrollTop;回顶;

2、History对象

  • window对象的一部分,可通过 window.history 属性对其进行访问:
  • window.history.back()——返回一前一个URL;
  • window.history.forward()——加载下一个URL;
  • window.history.go()——加载某个具体的页面;

3、Laction对象

  • window对象的一部分,可通过 window.Location 属性对其进行访问:
  • 属性:
  • >window.location.hash()——返回一个URL的锚部分(#及其以后的部分); window.location.host()——返回/设置主机名及端口 window.location.href()——返回完整的URL; window.location.search()——返回/设置RUL查询部分(从?开始的URL); window.location.port()——返回/设置一个URL服务器使用的端口号;
  • 方法: window.location.reload()——重新加载当前文档; window.location.assign()——加载一个新的文档; window.location.repalace()——替换当前文档;

<二>、Screen对象

Screen 对象包含有关客户端显示屏幕的信息。

screen.availHeight ——返回屏幕的高度(不包括Windows任务栏) screen.availWidth ——返回屏幕的宽度(不包括Windows任务栏) screen.colorDepth ——返回目标设备或缓冲器上的调色板的比特深度 screen.height ——返回屏幕的总高度 screen.pixelDepth ——返回屏幕的颜色分辨率(每象素的位数) screen.width ——返回屏幕的总宽度

window.innerHeight/Width、outHeight/Width与screen.height/width的区别 前者是,浏览器可见区域的内宽/高不含浏览器边框,但包含滚动条,兼容:ie9/10、chrome、firefox; 后者显示的是,屏幕的高度,同常与屏幕宽/高一致,兼容:ie7/8/9/10、chrome、firefox;

<三>、Navigatar对象

Navigator 对象包含有关浏览器的信息: 对象:

navigator.appCodeName——返回浏览器的代码名; navigator.appName——返回浏览器的名称; navigator.appVersion——返回浏览器的平台和版本信息; navigator.cookieEnabled——返回指明浏览器中是否启用 cookie 的布尔值; navigator.platform——返回运行浏览器的操作系统平台; navigator.userAgent—— 返回由客户机发送服务器的user-agent 头部的值;

方法:

navigator.javaEnabled() ——指定是否在浏览器中启用Java,返回blooner; navigator.taintEnabled() ——规定浏览器是否启用数据污点(data tainting);目前只有 Internet Explorer 和 Opera 浏览器支持 taintEnabled() 方法。 (链接为‘数据污点’的解释: 1、http://bbs.csdn.net/topics/300242073 2、 https://stackoverflow.com/questions/11520708/data-tainting-in-javascript );

<四>、悬浮在页面中的广告(现在很少见了)

1、js方法:top=XX.原top值+滚动条的scrollTop的距离+”px”;效果比较流畅; 2、css方法“:fixed;会出现广告窗口抖动的情况;

二、浮动框架

<iframe src="URL" frameborder="n" name="XX" id="Y">

其中,src="URL"可用来调用其他XX.html文件,这样对一些通用的html。只需一个即可,而且f12检查时,显示为空。

运用:

<div> <a href="1.html" target="NAME名"> xx</a> </div> <div> <iframe src="YY.html" framborder="0" name="NAME名" ></div> 即:使用相同的name,即可将两者联系起来,在同一界面中,无需重复iframe部分,至改变<a>内容即可;

  • 早期的iframe主要用于导航栏(navigator) 但因为每次刷新都会回到首页,于是后台用ASP 有 SSI,PHP 有 require、require_once 或 include 函数、JSP 也有 include 指令等解决;
  • 现在使用iframe的地方如: 沙箱隔离(Sandboxie:一种按照安全策略限制程序行为的执行环境。早期主要用于测试可疑软件等); 引用第三方内容; 独立的交互内容; 需要保持独立焦点和历史管理的子窗口(在ajax中会面临用户无法退回上一步的情况,可以用iframe解决,ajax下面会说)

举例,目前用在邮箱(如qq邮箱)中、w3school的代码测试页面、网易音乐的底部播放条、所见即所得的网页编辑器(WYSIWYG Online HTML Editor)均在使用。

  • (详细情况自己还不明白,搜了一下,先存着,以后遇到慢慢研究。https://blog.51cto.com/blogger/publish) 三、Cookie cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时,就会发送这个 cookie。 以“键=值”对形式存储; js中,document.cookie——创建、读取、删除cookie; eg:

document.cookie="username=LITAI;expires='UTC/GMT' ";(注;协调世界时和格林尼治标准时间,现在普遍使用前者)

设置cookie方式:

(1)、 document.cookie="username=LITAI;expires='UTC/GMT' "; (2)、var times=new Data().gettime(); times.setTime(newData().getTime()+1000);1000——延迟1000ms时间,以便显示之后1000ms后cookie消失; (3)、有效时间=times.toUTCString()/tmes.toGTMString();

四、AJAX (Asynchronous JavaScript and XML)

<一>、AJAX

  • AJAX不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。 传统的web交互,每次用户提交请求时,服务器都会重新返回一个完整的Html页面,这样用户需要等待而服务器资源也被浪费,于是诞生了ajax等各种服务于此的技术。 (ajax历史:https://www.cnblogs.com/shenzikun1314/p/6529911.html
  • AJAX核心依赖的是浏览器提供的XMLHttpRequest对象,其原理相当于在服务器和用户之间加了一个AJAX引擎,使用户操作和服务器实现响应异步化。

过程:初始化——>>发请求——>>服务器接受并处理——>>获得服务器响应 参考:w3school:http://www.w3school.com.cn/ajax/ajax_xmlhttprequest_create.asp (1)首先,创建XMLHttpRequest对象:

variable=new XMLHttpRequest()(;对于IE5/6版本使用:variable=new ActiveXObject("Microsoft.XMLHTTP");)

检查是否支持XMLHttpRequest 对象:

var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }

(2)接着,向服务器发送请求:

xmlhttp.open("GET","test1.txt",true); xmlhttp.send();

  • 其中:open(method、url、async) 规定请求的类型、URL 以及是否异步处理请求。: method:请求的类型;GET 或 POST url:文件在服务器上的位置,任何形式的服务器脚本文件,.txt/.xml/.asp/.php; async:true(异步,浏览器可以做其他事)或 false(同步,浏览器不能做其他事),一般默认异步;
  • send(string)将请求发送到服务器:
  • > string:仅用于 POST 请求;
  • GET 还是 POST? 与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。 然而,在以下情况中,请使用 POST 请求:

  • 无法使用缓存文件(更新服务器上的文件或数据库)
  • 向服务器发送大量数据(POST 没有数据量限制)
  • 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠

get请求:

xmlhttp.open("GET","demo_get.asp?t=" + Math.random(),true); xmlhttp.send();为了避免缓存造成的网页自动保存情况,加一个如 Math.random()的变量;

post请求:

xmlhttp.open("POST","demo_post.asp",true); xmlhttp.send();

(3)接着,向服务器处理后,我们开始接受服务器响应: 使用XMLHttpRequest 对象的 responseText 或 responseXML 属性: responseText——获得字符串形式的响应数据 :

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

responseXML——获得 XML 形式的响应数据: 请求 books.xml (关于XML请求及响应文档的说明: http://blog.csdn.net/jason009/article/details/1299831 )文件,并解析响应:

(4)onreadystatechange 事件 当请求被发送到服务器时,我们需要执行一些基于响应的任务。 每当 readyState 改变时,就会触发 onreadystatechange 事件。 readyState 属性存有 XMLHttpRequest 的状态信息.

readyState —— 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化(以数字表示):

  • 0: 请求未初始化
  • 1: 服务器连接已建立
  • 2: 请求已接收
  • 3: 请求处理中
  • 4: 请求已完成,且响应已就绪

status—— 状态以字符串表示(Ajax status和statusText状态对照表:http://blog.csdn.net/qi1271199790/article/details/60465859 ):

200: "OK" 404: 未找到页面

当 readyState 等于 4 且状态为 200 时,表示响应已就绪:

xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }

然后遍历并赋值即可:

xmlDoc=xmlhttp.responseXML; txt=""; x=xmlDoc.getElementsByTagName("ARTIST"); for (i=0;i<x.length;i++) { txt=txt + x[i].childNodes[0].nodeValue + "<br />"; } document.getElementById("myDiv").innerHTML=txt;

ajax实例1:

<script> window.onload = function() {

var oBtn = document.getElementById('btn');

oBtn.onclick = function() {

    var xhr = null;
    try {
        xhr = new XMLHttpRequest();
    } catch (e) {
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }
    /*
        1.缓存 在url?后面连接一个随机数,时间戳
        2.乱码 编码encodeURI
    */
    xhr.open('get','links文件夹/X.get.php?username='+encodeURI('小明')+'&age=23&' + new Date().getTime(),true);
    xhr.send();

    xhr.onreadystatechange = function() {

        if ( xhr.readyState == 4 ) {
            if ( xhr.status == 200 ) {
                alert( xhr.responseText );
            } else {
                alert('出错了,Err:' + xhr.status);
            }
        }

    }

}

} </script>

<二>、AJAX的封装:

<script src="js/ajax.js"></script> <script> window.onload = function() { var oBtn = document.getElementById('btn'); oBtn.onclick = function() { ajax('get','links/getNews.php','',function(data) { var data = JSON.parse( data ); var oUl = document.getElementById('content'); var html = ''; for (var i=0; i<data.length; i++) { html += '<li><a href="">'+data[i].title+'</a>[<span>'+data[i].date+'</span>]</li>'; } oUl.innerHTML = html; }); } } </script>

应用: 1、photolist:

<div class="show"></div> <input type="button" class="btn" value="加载中."/> <script src="js/ajax.js"></script> <script> window.onload=function(){

    var show=document.getElementsByClassName("show")[0];

    var btn=document.getElementsByClassName("btn")[0];

    var page=0;

    var loading=false;

    loadingpage()

    btn.onclick=function(){
        if(!loading){
            loadingpage()
        }
    }
    function loadingpage(){

        loading=true;
        btn.value="加载中.....";

        ajax("get","*links/getImages.php*?page="+page,"",function(data){
            var ndata=JSON.parse(data);
            if(!ndata.err){
                var msg="";
                for(var i=0;i<ndata.length;i++){
                    msg+="<div class='pic'><img src='"+ndata[i].src+"'><p>"+ndata[i].name+"</p></div>";
                }
                var nshow=document.createElement("div");
                nshow.innerHTML=msg;
                show.appendChild(nshow);

                page++;
                btn.value="点击加在更多图片";
                loading=false;
            }
            else{
                btn.value="已经没有图片了";
            }
        })
    }
}

</script> 2、获取data值: 从获取

<body> <input type="text" class="city"/> <button>显示天气</button> <p class="show"> 今天是:<span class="date1"></span><br> 天气:<span class="type1"></span><br> 最高温度为 <span class="high1"></span><br> 最底温度为 <span class="low1"></span><br> </p> <script src="js/ajax.js"></script> <!--文件所在位置--> <script> window.onload=function(){ var city=document.getElementsByClassName("city")[0]; var btn=document.getElementsByTagName("button")[0]; var date1=document.getElementsByClassName("date1")[0]; var type1=document.getElementsByClassName("type1")[0]; var high1=document.getElementsByClassName("high1")[0]; var low1=document.getElementsByClassName("low1")[0]; btn.onclick=function(){ var city1=city.value; ajax("get","http://wthrcdn.etouch.cn/weather_mini?city="+city1,"",function(da){ var data=JSON.parse(da); console.log(data); var list=data.data.forecast[0]; date1.innerHTML=list.date; type1.innerHTML=list.type; high1.innerHTML=list.high; low1.innerHTML=list.low; }) } } </script> </body>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 简单实现Socks5代理(Python&

    用户2398817
  • 3)js的基础语法使用以及css定位

    var north = ['北京','山东','天津']; var south = ['东莞','深圳','上海']; var newCity = north....

    用户2398817
  • Python:GUI

    用户2398817
  • 原 原始值和复杂值

    作者:汪娇娇 日期:2016.10.12 一、原始值 1、定义:本身很简单,不能由其他值组成的值,例如5、“foo”、true、null和undefined等,...

    jojo
  • Go编程中的一些编译时刻断言技巧

    有时候,我们希望在编译时刻就能够判断某些条件是否成立,而不是等到运行时刻报错。但是Go并没有提供在编译时刻直接判断某个条件是否成立的功能。那么该如何做到这一点呢...

    刘老貘
  • javascript循环

    天天_哥
  • 4篇笔记搞定JavaScript----第三篇

    我们使用关键词 new 来创建数组对象。下面的代码定义了一个名为 myArray 的数组对象:

    Lemon黄
  • sparklines迷你图系列17——Distribution(Stripes)

    今天跟大家分享sparklines迷你图系列16——Distribution(Stripes)。 Stripe图是类似于条形码那样的呈现连续性数据分布状态的一种...

    数据小磨坊
  • 单点登录 SSO 的实现原理

    单点登录SSO(Single Sign On)说得简单点就是在一个多系统共存的环境下,用户在一处登录后,就不用在其他系统中登录,也就是用户的一次登录能得到其他所...

    joshua317
  • Kotlin lateinit 和 by lazy 的区别

    3.lateinit可以在任何位置初始化并且可以初始化多次。而lazy在第一次被调用时就被初始化,想要被改变只能重新定义

    ydymz

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动