javascript

Posted 2020-12-29 faker-zw

javascript

（对大小写敏感/忽略多余的空格/使用对代码行进行换行）

数据类型：字符串（单引号或双引号）、数字、布尔、数组（array()）、对象(由花括号分隔,属性name : value,)、Null(清空变量)、Undefined(不含值)

在 html 页面中插入 JavaScript，<script> 和 </script> 会告诉 JavaScript 在何处开始和结束。浏览器会按照编写顺序来执行每条语句

操作html元素

1.访问某个 HTML 元素，使用 "id" 属性来标识 HTML 元素。

<script>

document.getElementById("demo").innerHTML="My First JavaScript";

</script>

JavaScript 由 web 浏览器来执行。在这种情况下，浏览器将访问 id="demo" 的 HTML 元素，并把它的内容（innerHTML）替换为 "My First JavaScript"。

 

2. 写到文档输出。写入<p>标签

<script>

document.write("<p>我的第一段 JavaScript</p>");

</script>

请使用 document.write()仅仅向文档输出写内容。在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖。

 

JavaScript 代码块，例如：函数

function myFunction()

{

document.getElementById("demo").innerHTML="Hello World";

document.getElementById("myDIV").innerHTML="How are you?";

}

带参函数：

function myFunction(var1,var2)

{

这里是要执行的代码

}

JavaScript for/in 语句循环遍历对象的属性

var person={fname:"John",lname:"Doe",age:25};

for (x in person)

  {

  txt=txt + person[x];

  }

标记 JavaScript 语句，请在语句之前加上冒号：

Label:语句

break labelname;     continue labelname;

continue 语句（带有或不带标签引用）只能用在循环中。

break 语句（不带标签引用），只能用在循环或 switch 中。

仅仅是能够跳出代码块的语句

 

 

try 语句允许我们定义在执行时进行错误测试的代码块。catch 语句允许我们定义当 try 代码块发生错误时，所执行的代码块

try

  {

  //在这里运行代码

  }

catch(err)

  {

  //在这里处理错误

  }

throw 与 try 和 catch 一起使用，那么您能够控制程序流，并生成自定义的错误消息。

 

表单验证

function validate_required(field,alerttxt)

{

with (field)

{

if (value==null||value=="")

         {alert(alerttxt);return false}

else {return true}

}

}

 

 

JavaScript HTML DOM（文档对象模型）

DOM -  改变HTML

JavaScript 能够改变页面中的所有 HTML 元素 、HTML 属性、CSS 样式

对页面中的所有事件做出反应。

如何改变 HTML 元素的内容 (innerHTML)、HTML 元素的样式 (CSS)、对 HTML DOM 事件对做出反应、添加或删除 HTML 元素。

 

1. 通过 id 查找 HTML 元素，

var x=document.getElementById("intro");

2.改变 HTML 输出流，document.write(Date());

3.改变 HTML 内容，

语法：document.getElementById(id).innerHTML=new HTML

<p id="p1">Hello World!</p>

document.getElementById("p1").innerHTML="New text!";

4.改变 HTML 属性，

语法：document.getElementById(id).attribute=new value

<img id="image" src="smiley.gif">

document.getElementById("image").src="landscape.jpg";

 

DOM CSS样式

5.改变 HTML 样式

语法：document.getElementById(id).style.property=new style

<p id="p2">Hello World!</p>

document.getElementById("p2").style.color="blue";

 

DOM事件

1. 对事件做出反应（onclick=JavaScipt）

HTML 事件的例子：

当用户点击鼠标时、网页已加载时、图像已加载时、鼠标移动到元素上时、输入字段被改变时、提交 HTML 表单时、用户触发按键时

<h1 onclick="this.innerHTML=‘谢谢!‘">请点击该文本</h1>

向 button 元素分配 onclick 事件(使用事件属性)

<button onclick="displayDate()">点击这里</button>

1.onclick事件,点击触发事件发生

2.onload 和 onunload 事件。onload 和 onunload 事件会在用户进入或离开页面时被触发

3.onchange 事件，onchange 事件常结合对输入字段的验证来使用。

4. onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

5. onmousedown 和 onmouseup当用户按下鼠标按钮时，更换一幅图像。

6. onfocus当输入字段获得焦点时，改变其背景色。

DOM 元素（节点）

1. 创建新的 HTML 元素

这段代码创建新的 <p> 元素：

var para=document.createElement("p");

如需向 <p> 元素添加文本创建文本节点。

var node=document.createTextNode("这是新段落。");

必须向 <p> 元素追加这个文本节点：

para.appendChild(node);

最后您必须向一个已有的元素追加这个新元素。

var element=document.getElementById("div1");

这段代码向这个已有的元素追加新元素：

element.appendChild(para);

 

2.删除已有的 HTML 元素

找到 id="div1" 的元素：

var parent=document.getElementById("div1");

找到 id="p1" 的 <p> 元素：

var child=document.getElementById("p1");

从父元素中删除子元素：

parent.removeChild(child);

 

JavaScript对象

字符串、数值、数组、函数...此外，JavaScript 提供多个内建对象，比如 String、Date、Array 等等

 

RegExp 对象表示正则表达式，它是对字符串执行模式匹配。

new RegExp(pattern, attributes);

包含属性 "g"、"i" 和 "m"，分别用于指定全局匹配、区分大小写的匹配和多行匹配。

JavaScript Window - 浏览器对象模型BOM

document 是 window 对象的属性

window.document.getElementById("header");

一些方法：

window.open() - 打开新窗口

window.close() - 关闭当前窗口

window.moveTo() - 移动当前窗口

window.resizeTo() - 调整当前窗口的尺寸

 

1.window.screen 对象包含有关用户屏幕的信息

screen.availWidth - 可用的屏幕宽度

screen.availHeight - 可用的屏幕高度

 

2.window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

一些例子：（前四个是属性和最后一个方法）

location.hostname 返回 web 主机的域名

location.pathname 返回当前页面的路径和文件名

location.port 返回 web 主机的端口 （80 或 443）

location.protocol 返回所使用的 web 协议（http:// 或 https://）

location.assign() 方法加载新的文档。

 

3.window.history 对象包含浏览器的历史

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

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

 

4.window.navigator 对象包含有关访问者浏览器的信息。

一些属性：

navigator.appCodeName

navigator.appName

navigator.appVersion

navigator.cookieEnabled

警告： 来自 navigator 对象的信息具有误导性，不应该被用于检测浏览器版本，这是因为：

1.navigator 数据可被浏览器使用者更改

2.浏览器无法报告晚于浏览器发布的新操作系统

 

1. JavaScript 中创建三种消息框：警告框、确认框、提示框。PopupAlert

折行警告框

alert("再次向您问好！在这里，我们向您演示" + ‘ ‘ + "如何向警告框添加折行。")

警告框alert()

确认框confirm()

提示框prompt()

 

1. JavaScript 计时

在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。

 

setTimeout() 未来的某时执行代码

var t=setTimeout("javascript语句",毫秒)

clearTimeout() 取消setTimeout()

     clearTimeout(t)

 

1. cookie 用来识别用户。

 

JavaScript 库

JavaScript 库 - jQuery、Prototype、MooTools。

这些框架都提供针对常见 JavaScript 任务的函数，包括动画、DOM 操作以及 Ajax 处理。

jQuery使用 CSS 选择器来访问和操作网页上的 HTML 元素（DOM 对象）。jQuery 同时提供 companion UI（用户界面）和插件。

 

Prototype 是一种库，提供用于执行常见 web 任务的简单 API。

API 是应用程序编程接口包含属性和方法的库，用于操作 HTML DOM。

Prototype 通过提供类和继承，实现了对 JavaScript 的增强。