JavaScript学习与实践一

Posted 2020-08-22 温布利往事

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript学习与实践一相关的知识，希望对你有一定的参考价值。

一、javascript数组

　　创建JavaScript数组有两种方式

　　方式一：

var cars=new Array();
cars[0]="Audi";
cars[1]="BMW";
cars[2]="Volvo";

　　方式二：

var cars=new Array("Audi","BMW","Volvo");

二、JavaScript对象

　　1、创建方式

var person={firstname:"Bill", lastname:"Gates", id:5566};

　　2、寻址方式

name=person.lastname;
name=person["lastname"];

三、JavaScript函数

　　1、作用域

在函数之外声明的变量作用域是全局的，在程序的任意位置使用或者改变它们。在函数内部声明的变量也是全局的，除非在声明时使用了var关键字。var关键字使得变量的作用域称为局部的。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    function greeting(str) {
        name = "xujian";
    }
    function greeting2() {
        greeting("123");
        alert(name);
    }
</script>
</head>
<body>
    <input type="button" onclick="greeting2()" value="欢迎" />
</body>
</html>

　　2、闭包

　　闭包就是能够读取其他函数内部变量的函数。

　　闭包有两个作用：一是可以读取到函数内部的变量，二是让这些变量的值始终保持在内存中。

四、文档对象模型DOM HTML

　　DOM HTML/CSS

　　1、document.write()可用于直接向html输出流写内容。(不要使用在文档加载之后使用 document.write()。这会覆盖该文档)

　　2、可以使用innerHTML属性来修改HTML内容

document.getElementById(id).innerHTML= ...

　　3、使用attribute属性改变HTML元素的属性

　　4、使用style.property改变HTML元素的样式

<p id="p2">Hello World!</p>
<script>
    document.getElementById("p2").style.color="blue";
</script>

　　DOM事件

onload/onunload事件：用户进入或离开页面时被触发
onchange事件：结合对输入字段的验证来使用

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
　　var x=document.getElementById("fname");
　　x.value=x.value.toUpperCase();
}
</script>
</head>
<body>
   请输入英文字符：<input type="text" id="fname" onchange="myFunction()">
   <p>当您离开输入字段时，会触发将输入文本转换为大写的函数。</p>
</body>
</html>

View Code

onmouseover/onmouseout事件：用户的鼠标移至HTML元素上方或移出元素时触发函数
onmousedown/onmouseup/onclick事件：onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。

　　DOM节点

　　创建新的HTML元素

<div id="div1">
    <p id="p1">这是一个段落</p>
    <p id="p2">这是另一个段落</p>
</div>
<script>
    var para=document.createElement("p");
    var node=document.createTextNode("这是新段落。");
    para.appendChild(node);
    var element=document.getElementById("div1");
    element.appendChild(para);
</script>

View Code

　　删除已有的HTML元素

<div id="div1">
    <p id="p1">这是一个段落。</p>
    <p id="p2">这是另一个段落。</p>
</div>
<script>
    var parent=document.getElementById("div1");
    var child=document.getElementById("p1");
    parent.removeChild(child);
</script>

View Code

五、浏览器对象模型BOM

　　1、window对象：表示浏览器窗口，所有JavaScript全局对象、函数以及变量都自动成为window对象的成员

window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸

　　2、Screen对象：包含有关用户屏幕的信息

screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度

　　3、Location对象：用于获得当前页面的地址(URL)，并把浏览器重定向到新的页面

location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口（80 或 443）
location.protocol 返回所使用的 web 协议（http:// 或 https://）
location.assign 方法加载新的文档

　　4、History对象：包含浏览器的历史

history.back() - 与在浏览器点击后退按钮相同
history.forward() - 与在浏览器中点击按钮向前相同

　　5、Navigator对象：包含有关访问者浏览器的信息

<div id="example"></div>
<script>
txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>";
txt+= "<p>Browser Name: " + navigator.appName + "</p>";
txt+= "<p>Browser Version: " + navigator.appVersion + "</p>";
txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";
txt+= "<p>Platform: " + navigator.platform + "</p>";
txt+= "<p>User-agent header: " + navigator.userAgent + "</p>";
txt+= "<p>User-agent language: " + navigator.systemLanguage + "</p>";
document.getElementById("example").innerHTML=txt;
</script>