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

「爱情、让人受尽委屈。」 2022-05-11 00:42 158阅读 0赞

## JavaScript是什么 ##

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

## JavaScript的作用 ##

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

## JavaScript三种引入方式 ##

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

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

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

*  外部引入：  
    在文件同目录下创建一个后缀为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为前进一次。 ##