JavaScript学习与实践一

Posted 温布利往事

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>
View Code

  6、PopupAlert对象:消息框,包括警告框,确认框,提示框

  • 警告框:用于确保用户可以得到某些信息,当警告框出现后,用户需要点击确定按钮才能继续操作

  alert("文本");

  

  • 确认框:用于使用户可以验证或者接受某些信息,当确认框出现后,用户确认点击确认或者取消才能继续操作。

  confirm("文本")

  

  • 提示框:用于提示用户在进入页面前输入某个值,当提示框出现后,用户需要输入某个值,然后点击确认或取消按钮才能继续操纵。如果用户点击确认,那么返回值为输入的值。如果用户点击取消,那么返回值为 null。

  prompt("文本","默认值")

  

 

以上是关于JavaScript学习与实践一的主要内容,如果未能解决你的问题,请参考以下文章

20155219付颖卓 Exp3 免杀原理与实践

javaAgent和Java字节码增强技术的学习与实践

Python编程入门与实践pdf电子版下载

JavaScript学习与实践一

javajava 新一代垃圾回收器ZGC的探索与实践

JavaScript —— 下一代物联网全栈开发