【JavaScript 学习】没啥参考价值，纯记录，来自w3school

最新推荐文章于 2024-11-02 12:42:04 发布

码农Peter

最新推荐文章于 2024-11-02 12:42:04 发布

阅读量1.7k

点赞数

分类专栏： Web前端文章标签： javascript 学习笔记没啥价值

本文链接：https://blog.csdn.net/mangosnow/article/details/38071805

版权

Web前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

输出

document.write("<h1>This is a heading</h1>");
只能在 HTML 输出流中使用 document.write。如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。

JavaScript 语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么。
document.getElementById("demo").innerHTML="Hello World";

注释
注释和OC的注释差不多。

JavaScript 拥有动态类型
布尔（逻辑）只能有两个值：true 或 false

数组
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};
空格和折行无关紧要。声明可横跨多行：
var person={
firstname : "Bill",
lastname : "Gates",
id : 5566
};
对象属性有两种寻址方式
name=person.lastname;
name=person["lastname"];

undefined 和 Volvo 操作
document.write(person + "<br />");
document.write(car + "<br />");
var car=null
document.write(car + "<br />");

undefined
Volvo
null

字符串

+ 运算符用于把文本值或字符串变量加起来（连接起来）
txt1="What a very";
txt2="nice day";
txt3=txt1+txt2;
如果把数字与字符串相加，结果将成为字符串

运算符
== 等于
=== 全等（值和类型）

&& || ！

(a >b)? a:b;

循坏语句
JavaScript 支持不同类型的循环：
   •   for - 循环代码块一定的次数
   •   for/in - 循环遍历对象的属性
   •   while - 当指定的条件为 true 时循环指定的代码块
   •   do/while - 同样当指定的条件为 true 时循环指定的代码块

JavaScript 标签
如需标记 JavaScript 语句，请在语句之前加上冒号：
label:
语句

continue 和 break
continue 语句（带有或不带标签引用）只能用在循环中。
break 语句（不带标签引用），只能用在循环或 switch 中。
通过标签引用，break 语句可用于跳出任何 JavaScript 代码块：

异常
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 + ".";
}

JavaScript 作用
   •   JavaScript 能够改变页面中的所有 HTML 元素
   •   JavaScript 能够改变页面中的所有 HTML 属性
   •   JavaScript 能够改变页面中的所有 CSS 样式
   •   JavaScript 能够对页面中的所有事件做出反应

查找HTML元素
通过 id 找到 HTML 元素
var x=document.getElementById("intro");
未找到该元素，则 x 将包含 null。

通过标签名找到 HTML 元素
本例查找 id="main" 的元素，然后查找 "main" 中的所有 <p> 元素：
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");

通过类名找到 HTML 元素

插入修改内容

HTML DOM 允许 JavaScript 改变 HTML 元素的内容。
JavaScript 能够创建动态的 HTML 内容：

<script>
document.write(Date());
</script>
绝不要使用在文档加载之后使用 document.write()。这会覆盖该文档。

修改 HTML 内容的最简单的方法时使用 innerHTML 属性
document.getElementById(id).innerHTML=new HTML
<body>
<h1 id="header">Old Header</h1>
<script>
var element=document.getElementById("header");
element.innerHTML="New Header";
</script>
</body>

如需改变 HTML 元素的属性，请使用这个语法：

document.getElementById(id).attribute=new value

改变CSS
如需改变 HTML 元素的样式，请使用这个语法：
document.getElementById(id).style.property=new style

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

对事件做出反应
如需在用户点击某个元素时执行代码，请向一个 HTML 事件属性添加 JavaScript 代码：
οnclick=JavaScript

<h1 οnclick="this.innerHTML='谢谢!'">请点击该文本</h1>

如需向 HTML 元素分配事件，您可以使用事件属性。
<button οnclick="displayDate()">点击这里</button>

HTML DOM 允许您通过使用 JavaScript 来向 HTML 元素分配事件
<button id="myBtn">点击这里</button>
<script>
document.getElementById("myBtn").οnclick=function(){displayDate()};
</script>

onload 和 onunload 事件
onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie。
<body οnlοad="checkCookies()">

onchange 事件
onchange 事件常结合对输入字段的验证来使用。
<input type="text" id="fname" οnchange="upperCase()">
onmouseover 和 onmouseout 事件
onmousedown、onmouseup 以及 onclick 事件

创建新的 HTML 元素
如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。
<body>

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

</body>

删除已有的 HTML 元素
如需删除 HTML 元素，您必须首先获得该元素的父元素
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>

<script>
var parent ld);
</script>

对象详解

JavaScript 中的所有事物都是对象：字符串、数值、数组、函数...
此外，JavaScript 允许自定义对象。对象只是带有属性和方法的特殊数据类型。
访问对象属性的语法是：
objectName.propertyName
您可以通过以下语法来调用方法：
objectName.methodName()

创建新对象有两种不同的方法：
   1.   定义并创建对象的实例


person=new Object();
person.firstname="Bill";
person.lastname="Gates";
person.age=56;
person.eyecolor="blue";

person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"};

2.   使用函数来定义对象，然后创建新的对象实例
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;

function changeName(name)
{
this.lastname=name;
}

}

JavaScript 是面向对象的语言，但 JavaScript 不使用类。
JavaScript 基于 prototype，而不是基于类的。

JavaScript 数字
var pi=3.14;    // 使用小数点
var x=34;       // 不使用小数点
var y=123e5;    // 12300000
var z=123e-5;   // 0.00123
所有 JavaScript 数字均为 64 位
如果前缀为 0，则 JavaScript 会把数值常量解释为八进制数，如果前缀为 0 和 "x"，则解释为十六进制数

返回当日的日期和时间
如何使用 Date() 方法获得当日的日期。
getTime()
getTime() 返回从 1970 年 1 月 1 日至今的毫秒数。
setFullYear()
如何使用 setFullYear() 设置具体的日期。
toUTCString()
如何使用 toUTCString() 将当日的日期（根据 UTC）转换为字符串。
getDay()
如何使用 getDay() 和数组来显示星期，而不仅仅是数字。

var myDate=new Date()
myDate.setFullYear(2008,7,9)
myDate.setDate(myDate.getDate()+5)

var mycars=new Array()
mycars[0]="Saab"
mycars[1]="Volvo"
mycars[2]="BMW"

var mycars=new Array("Saab","Volvo","BMW")

合并两个数组 - concat()
用数组的元素组成字符串 - join()
文字数组 - sort()
数字数组 - sort()

var myBoolean=new Boolean();
var myBoolean=new Boolean(0);
var myBoolean=new Boolean(null);
var myBoolean=new Boolean("");
var myBoolean=new Boolean(false);
var myBoolean=new Boolean(NaN);

数值运算
round()
四舍五入
random()
如何使用 random() 来返回 0 到 1 之间的随机数。
max()
max() 来返回两个给定的数中的较大的数
min()
较小数

JavaScript 提供 8 种可被 Math 对象访问的算数值：
   •   常数
   •   圆周率
   •   2 的平方根
   •   1/2 的平方根
   •   2 的自然对数
   •   10 的自然对数
   •   以 2 为底的 e 的对数
   •   以 10 为底的 e 的对数
这是在 Javascript 中使用这些值的方法：（与上面的算数值一一对应）
   •   Math.E
   •   Math.PI
   •   Math.SQRT2
   •   Math.SQRT1_2
   •   Math.LN2
   •   Math.LN10
   •   Math.LOG2E
   •   Math.LOG10E

JavaScript RegExp 对象
正则表达式 RegExp
当您检索某个文本时，可以使用一种模式来描述要检索的内容。RegExp 就是这种模式。
简单的模式可以是一个单独的字符
更复杂的模式包括了更多的字符，并可用于解析、格式检查、替换等等。
您可以规定字符串中的检索位置，以及要检索的字符类型，等等。

定义
var patt1=new RegExp("e");

RegExp 对象有 3 个方法：test()、exec() 以及 compile()。

test() 方法检索字符串中的指定值。返回值是 true 或 false

var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free"));
由于该字符串中存在字母 "e"，以上代码的输出将是：true

exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配，则返回 null。

var patt1=new RegExp("e");

var patt1=new RegExp("e","g"); g:global 代表
do
{
result=patt1.exec("The best things in life are free");
document.write(result);
}
while (result!=null)
输出结果: eeeeeenull

compile() 方法用于改变 RegExp。
compile() 既可以改变检索模式，也可以添加或删除第二个参数。

var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free"));
patt1.compile("d");
document.write(patt1.test("The best things in life are free"));
由于字符串中存在 "e"，而没有 "d"，以上代码的输出是：truefalse

HTML DOM （文档对象模型）
JavaScript Window - 浏览器对象模型
浏览器对象模型（Browser Object Model）尚无正式标准。

所有浏览器都支持 window 对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性
全局函数是 window 对象的方法
window.document.getElementById("header");

Window 尺寸
对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：
   •   window.innerHeight - 浏览器窗口的内部高度
   •   window.innerWidth - 浏览器窗口的内部宽度
对于 Internet Explorer 8、7、6、5：
   •   document.documentElement.clientHeight
   •   document.documentElement.clientWidth
或者
   •   document.body.clientHeight
   •   document.body.clientWidth

实用的 JavaScript 方案（涵盖所有浏览器）：
var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

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

window.screen
window.screen 对象在编写时可以不使用 window 这个前缀。
   •   screen.availWidth - 可用的屏幕宽度
属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如窗口任务栏。
   •   screen.availHeight - 可用的屏幕高度
属性返回访问者屏幕的高度，以像素计，减去界面特性，比如窗口任务栏。

window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。
window.location 对象在编写时可不使用 window 这个前缀。
   •   location.hostname 返回 web 主机的域名
   •   location.pathname 返回当前页面的路径和文件名       /js/js_window_location.asp
   •   location.port 返回 web 主机的端口（80 或 443）
   •   location.protocol 返回所使用的 web 协议（http:// 或 https://）
   •   location.href 返回当前页面的URL http://www.w3school.com.cn/js/js_window_location.asp
   •   location.assign() 方法加载新的文档。

Window History
window.history 对象包含浏览器的历史。
window.history 对象在编写时可不使用 window 这个前缀。
   •   history.back() - 与在浏览器点击后退按钮相同,加载历史列表中的前一个 URL
   •   history.forward() - 与在浏览器中点击按钮向前相同加载历史列表中的前一个 URL

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

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;

来自 navigator 对象的信息具有误导性，不应该被用于检测浏览器版本，这是因为：
   •   navigator 数据可被浏览器使用者更改
   •   浏览器无法报告晚于浏览器发布的新操作系统

浏览器检测
由于 navigator 可误导浏览器检测，使用对象检测可用来嗅探不同的浏览器。
由于不同的浏览器支持不同的对象，您可以使用对象来检测浏览器。例如，由于只有 Opera 支持属性 "window.opera"，您可以据此识别出 Opera。

可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框。
警告框经常用于确保用户可以得到某些信息,当警告框出现后，用户需要点击确定按钮才能继续进行操作。

alert("文本")

确认框用于使用户可以验证或者接受某些信息。
当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。
如果用户点击确认，那么返回值为 true。如果用户点击取消，那么返回值为 false。
confirm("文本")
提示框经常用于提示用户在进入页面前输入某个值。
当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。
如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。
prompt("文本","默认值")

JavaScript 计时事件
setTimeout()
未来的某时执行代码
var t=setTimeout("javascript语句",毫秒)
etTimeout() 方法会返回某个值。在上面的语句中，值被储存在名为 t 的变量中。假如你希望取消这个 setTimeout()，你可以使用这个变量名来指定它。

clearTimeout()
取消setTimeout()
clearTimeout(setTimeout_variable)

cookie 用来识别用户。
cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时，就会发送这个 cookie。你可以使用 JavaScript 来创建和取回 cookie 的值。

JS框架
jQuery
jQuery 是目前最受欢迎的 JavaScript 框架。
它使用 CSS 选择器来访问和操作网页上的 HTML 元素（DOM 对象）。
jQuery 同时提供 companion UI（用户界面）和插件。
Prototype
Prototype 是一种库，提供用于执行常见 web 任务的简单 API。
API 是应用程序编程接口（Application Programming Interface）的缩写。它是包含属性和方法的库，用于操作 HTML DOM。
Prototype 通过提供类和继承，实现了对 JavaScript 的增强。
MooTools
MooTools 也是一个框架，提供了可使常见的 JavaScript 编程更为简单的 API。
MooTools 也含有一些轻量级的效果和动画函数。
CDN - 内容分发网络
您总是希望网页可以尽可能地快。您希望页面的容量尽可能地小，同时您希望浏览器尽可能多地进行缓存。
如果许多不同的网站使用相同的 JavaScript 框架，那么把框架库存放在一个通用的位置供每个网页分享就变得很有意义了。
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
</head>

答错的题目
外部脚本必须包含 <script> 标签吗？
否