复习之JavaScript基本语法（一）——三种引入方式及load、write、window、location

JavaScript是什么

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言。

JavaScript的作用

JavaScript用来给HTML网页增加动态功能。

JavaScript三种引入方式

• 行内引入:
  在控件的的事件里写JavaScript
  点击按钮跳转到first.html

<input type="button" value="点击我" onclick="window.location.href='first.html?'"/>

点击按钮调用js中的testA()方法

<input type="button" value="点击我" onclick="testA()"/>

• 内部引入：
  在head或body中，定义script标签，然后在script标签里面写js代码。

<script type="text/javascript">
 alert("JavaScript代码生效");
</script>

• 外部引入：
  在文件同目录下创建一个后缀为js的文件first.js

<scripttype="text/javascript" src="first.js"></script>

window.onload 事件

document.ready和onload的区别——JavaScript文档加载完成事件
页面加载完成有两种事件
一是ready，表示文档结构已经加载完成（不包含图片等非文字媒体文件）
二是onload，指示页面包含图片等文件在内的所有元素都加载完成。

网页中的某些JavaScript脚本代码往往需要在文档加载完成后才能够去执行，否则可能导致无法获取对象的情况，为了避免类似情况的发生，可以使用以下两种方式:

（1）.将脚本代码放在网页的底端，运行脚本代码的时候，可以确保要操作的对象已经加载完成。

（2）.通过window.onload来执行脚本代码。

script type="text/javascript">
        window.onload = function () {
        alert("JavaScript代码生效");
         }
    </script>

document.write事件

document.write事件是输出事件一般情况下很少使用，使用script要放在body前面

//输出,如果是页面加载完才执行，会覆盖整个文档
document.write("<h1>this is a heading</h1>");

window事件

打开和关闭窗口

打开、关闭操作一般写在按钮点击事件中

  var btn2=document.getElementById("btn2");
    btn2.onclick =function () {
        //打开新的窗口
        window.open("mouse.html","newwindow","width=400,height=300")
    }
    var btn3=document.getElementById("btn3");
    btn3.onclick=function () {
    //屏幕宽度
    var sw=screen.width;
        //获取浏览器的宽和高。
    alert(window.innerHeight);
    alert(window.innerWidth);
        //关闭窗口
        window.close();
    }

location.href

• location.href="url"常用的js跳转操作

   var sw=screen.width;
   //显示当前页面的url 赋值就是跳转
   alert(location.href);
   //js跳转页面
   location.href="index.html";

重定向和刷新

刷新当前页面

window.location.reload();

刷新框架

刷新包含该框架的页面用 

parent.location.reload();

子窗口刷新父窗口

self.opener.location.reload();
(　或　<a href="javascript:opener.location.reload()">刷新</a> )

刷新另一个框架的页面用

parent.另一FrameID.location.reload();

重定向

<input type="button" id="btn" value="返回顶部"/>
<input type="button" value="刷新" id="reload"/>
<script>
    console.log(location.href);
    console.log(location.hash);
    var btn =document.getElementById("btn");
    btn.onclick=function () {
        location.hash="#top";
    }
    //重定向
    //location.href="mouse.html";
    //window.location="mouse.html";
    location.replace("mouse.html");
    //刷新
    document.getElementById("reload").onclick=function () {
        location.reload(true)
    }

history.back() 调用浏览器保存的浏览过的页面，后退操作

history.forward()前进操作

history.go(-1),跳转操作，-1为后退一次，1为前进一次。