笔记-javascript
JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。
HTML 中的脚本必须位于 <script> 与 </script> 标签之间。
脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。
<script> 和 </script> 会告诉 JavaScript 在何处开始和结束。
<script> 和 </script> 之间的代码行包含了 JavaScript:
如果把<script>标签放到body中,浏览器会在页面加载时执行;
上面例子中的 JavaScript 语句,会在页面加载时执行,但使用js主要目的是动态改变网页内容,而不仅仅是加载时;
通常,我们需要在某个事件发生时执行代码,比如当用户点击按钮时。
如果把 JavaScript 代码放入函数中,就可以在事件发生时调用该函数。
我们可以在 HTML 文档中放入不限数量的脚本,脚本可位于 HTML 的 <body> 或 <head> 部分中,或者同时存在于两个部分中。
较好的实践是把函数统一放入 <head> 部分中,或者放在页面底部。
也可以把脚本放到外部文件中,文件扩展名为.js;
当然这样需要进行说明,在 <script> 标签的 "src" 属性中设置 .js 文件:
案例:
<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>
JavaScript 对大小写是敏感的;
JavaScript 会忽略多余的空格;
分号用于分隔 JavaScript 语句;
可以在文本字符串中使用反斜杠对代码行进行换行
document.write("Hello \
World!");
这样的代码是允许的;
单行注释以 // 开头
// 输出标题:
document.getElementById("myH1").innerHTML="Welcome to my Homepage";
// 输出段落:
document.getElementById("myP").innerHTML="This is my first paragraph.";
var x=5; // 声明 x 并把 5 赋值给它
var y=x+2; // 声明 y 并把 x+2 赋值给它
这样也是可以的;
多行注释以 /* 开始,以 */ 结尾。
下面的例子使用多行注释来解释代码:
/*
下面的这些代码会输出
一个标题和一个段落
并将代表主页的开始
*/
document.getElementById("myH1").innerHTML="Welcome to my Homepage";
document.getElementById("myP").innerHTML="This is my first paragraph.";
var x=2;
var y=3;
var z=x+y;
变量必须以字母开头
变量也能以 $ 和 _ 符号开头(不过我们不推荐这么做)
变量名称对大小写敏感(y 和 Y 是不同的变量)
声明(创建) JavaScript 变量
var carname;
与python类似,javascript变量是动态类型的;
var x= 34; var y=34.00;
var cars=new Array();
cars[0]="Audi";
cars[1]="BMW";
cars[2]="Volvo";
或者:
var cars=new Array("Audi","BMW","Volvo");
或者:
var cars=["Audi","BMW","Volvo"];
对象由花括号分隔。在括号内部,对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔:
var person={firstname:"Bill", lastname:"Gates", id:5566};
对象属性寻址方式:
name=person.lastname;
name=person["lastname"];
声明新变量时,可以使用关键词 "new" 来声明其类型:
var carname=new String;
var x= new Number;
var y= new Boolean;
var cars= new Array;
var person= new Object;
与python类似,不解释
函数就是包裹在花括号中的代码块,前面使用了关键词 function:
function functionname()
{
这里是要执行的代码
return
}
switch(n)
{
case 1:
执行代码块 1
break;
case 2:
执行代码块 2
break;
default:
n 与 case 1 和 case 2 不同时执行的代码
}
try 语句测试代码块的错误。
catch 语句处理错误。
throw 语句创建自定义错误。
<script>
function myFunction()
{
try
{
var x=document.getElementById("demo").value;
if(x=="") throw "empty";
if(isNaN(x)) throw "not a number";
if(x>10) throw "too high";
if(x<5) throw "too low";
}
catch(err)
{
var y=document.getElementById("mess");
y.innerHTML="Error: " + err + ".";
}
}
</script>
<h1>My First JavaScript</h1>
<p>Please input a number between 5 and 10:</p>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">Test Input</button>
<p id="mess"></p>
本例查找 id="intro" 元素:
var x=document.getElementById("intro");
本例查找 id="main" 的元素,然后查找 "main" 中的所有 <p> 元素:
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
document.write() 可用于直接向 HTML 输出流写内容。
案例
<script>
document.write(Date());
</script>
输出:上述语句输出日期及时间
修改元素内容
document.getElementById("p1").innerHTML="New text!";
如需改变 HTML 元素的属性,请使用这个语法:
document.getElementById(id).attribute=new value
document.getElementById("image").src="landscape.jpg";
如需改变 HTML 元素的样式,请使用这个语法:
document.getElementById(id).style.property=new style
案例:
document.getElementById("p2").style.color="blue";
我们可以在事件发生时执行 JavaScript,比如当用户在 HTML 元素上点击时。
如需在用户点击某个元素时执行代码,请向一个 HTML 事件属性添加 JavaScript 代码:
onclick=JavaScript
HTML 事件的例子:
当用户点击鼠标时
当网页已加载时
当图像已加载时
当鼠标移动到元素上时
当输入字段被改变时
当提交 HTML 表单时
当用户触发按键时
如需向 HTML 元素分配 事件,您可以使用事件属性。
实例
向 button 元素分配 onclick 事件:
<button onclick="displayDate()">点击这里</button>
HTML DOM 允许您通过使用 JavaScript 来向 HTML 元素分配事件:
实例
向 button 元素分配 onclick 事件:
<script>
document.getElementById("myBtn").onclick=function(){displayDate()}
onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本,并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie。
onchange 事件常结合对输入字段的验证来使用。
下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时,会调用 upperCase() 函数。
实例
<input type="text" id="fname" onchange="upperCase()">
onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时,会触发 onmousedown 事件,当释放鼠标按钮时,会触发 onmouseup 事件,最后,当完成鼠标点击时,会触发 onclick 事件。
获得焦点时触发事件;
常用的javascript库/框架有
jQuery
Prototype
MooTools
jQuery
jQuery 是目前最受欢迎的 JavaScript 框架。
它使用 CSS 选择器来访问和操作网页上的 HTML 元素(DOM 对象)
本章节简要列出JAVASCRIPT/DOM对象
Array,Boolean,Date,Math,Numbe,String,RegExp,Global
Window,Navigator,Screen,History,Location,
本参考手册描述每个对象的属性和方法,并提供实例。
Document
Anchor
Area
Base
Body
Button
Canvas
Event
Form
Frame
Frameset
IFrame
Image
Input Button
Input Checkbox
Input File
Input Hidden
Input Password
Input Radio
Input Reset
Input Submit
Input Text
Link
Meta
Object
Option
Select
Style
Table
TableCell
TableRow
Textarea
原文:https://www.cnblogs.com/wodeboke-y/p/9126956.html