js基础学习笔记（2014年开始）

最新推荐文章于 2024-07-17 15:48:51 发布

sarah_cw

最新推荐文章于 2024-07-17 15:48:51 发布

阅读量480

点赞数

分类专栏： Front end

本文链接：https://blog.csdn.net/caowen414/article/details/41043107

版权

Front end 专栏收录该内容

45 篇文章 0 订阅

订阅专栏

1、什么是 JavaScript？

在数百万张页面中，JavaScript 被用来改进设计、验证表单、检测浏览器、创建cookies等。

JavaScript 被设计用来向 HTML 页面添加交互行为。

JavaScript 是一种脚本语言（脚本语言是一种轻量级的编程语言）。

JavaScript 由数行可执行计算机代码组成。

JavaScript 通常被直接嵌入 HTML 页面。

JavaScript 是一种解释性语言（就是说，代码执行不进行预编译）。

2、JavaScript：写入 HTML 输出

<html>

<body>

<p>

JavaScript 能够直接写入 HTML 输出流中：

</p>

document.write("<h1>This is a heading</h1>");

document.write("<p>This is a paragraph.</p>");

</script>

<p>

您只能在 HTML 输出流中使用 <strong>document.write</strong>。

如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。

</p>

</body>

</html>

3、JavaScript：对事件作出反应（onclick后的内容很重要，单击后做出什么反应，注意有双引号）

<button type="button" onclick="alert('Welcome!')">点击这里</button>//在表单form的时候用onsubmit

4、 document.getElementByID("some id")。这个方法是 HTML DOM 中定义的。

DOM（文档对象模型）是用以访问 HTML 元素的正式 W3C 标准。

//如需从 JavaScript 访问某个 HTML 元素，可以使用 document.getElementById(id) 方法。

请使用 "id" 属性来标识 HTML 元素,JavaScript 能改变 HTML 元素的内容。

</p>

function myFunction()

{

x=document.getElementById("demo"); // 找到元素

x.innerHTML="Hello JavaScript!"; // 改变内容，innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。

x.style.color="#ff0000"; // 改变样式

}

</script>

5、isNaN() 函数用于检查其参数是否是非数字值。

通常的做法是把函数放入 <head> 部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。

6、直接把 <p> 元素写到 HTML 文档输出中

document.write("<p>My First JavaScript</p>");

</script>

7、在 JavaScript 中，用分号来结束语句是可选的。

8、JavaScript 对大小写是敏感的。

9、您可以在文本字符串中使用反斜杠对代码行进行换行。下面的例子会正确地显示：

document.write("Hello \ World!");

10、JavaScript 是脚本语言。浏览器会在读取代码时，逐行地执行脚本代码。而对于传统编程来说，会在执行前对所有代码进行编译。

11、把变量看做存储数据的容器。

Javascript中的变量：var x=2;

变量必须以字母开头

变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）

JavaScript 只有一种数字类型。数字可以带小数点，也可以不带

12、JavaScript 对象(汽车就是现实生活中的对象，属性是与对象相关的值car.name,方法是能在对象上执行的动作car.start())

对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：

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

上面例子中的对象 (person) 有三个属性：firstname、lastname 以及 id。

对象属性寻址：name=person.firstname;

13、在 JavaScript 中，对象是数据（变量），拥有属性和方法。

当声明一个 JavaScript 变量时：

var txt = "Hello";

实际上已经创建了一个 JavaScript 字符串对象。字符串对象拥有内建的属性 length。对于上面的字符串来说，length 的值是 5。字符串对象同时拥有若干个内建的方法。

属性：

txt.length=5

方法：

txt.indexOf()，txt.replace()，txt.search()

提示：在面向对象的语言中，属性和方法常被称为对象的成员。

JavaScript 中的几乎所有事务都是对象：字符串、数字、数组、日期、函数，等等。

你也可以创建自己的对象。例如建名为 "person" 的对象，并为其添加了三个属性：

实例

person=new Object();

person.firstname="Bill";

person.lastname="Gates";

person.age=56;

14、default 关键词

请使用 default 关键词来规定匹配不存在时做的事情，实例：

如果今天不是周六或周日，则会输出默认的消息：

var day=new Date().getDay();

switch (day){

case 6: x="Today it's Saturday"; break;

case 0: x="Today it's Sunday"; break;

default: x="Looking forward to the Weekend";}

15、JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。

被 JavaScript 验证的这些典型的表单数据有：

a.用户是否已填写表单中的必填项目？

b.用户输入的邮件地址是否合法？

c.用户是否已输入合法的日期？

d.用户是否在数据域 (numeric field) 中输入了文本？

16.通过可编程的对象模型(dom)，JavaScript 获得了足够的能力来创建动态的 HTML。

JavaScript 能够改变页面中的所有 HTML 元素

JavaScript 能够改变页面中的所有 HTML 属性

JavaScript 能够改变页面中的所有 CSS 样式

JavaScript 能够对页面中的所有事件做出反应

17、通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

25、在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。
显示当前时间
<script>
document.write(Date());
</script>

18、在本例中，当用户在 <h1> 元素上点击时，会改变其内容：
<h1 οnclick="this.innerHTML='谢谢!'">请点击该文本</h1>
如果用函数，如下：
<script>
function changetext(id)
{
id.innerHTML="谢谢!";
}
</script>
</head>
<body>

<h1 onclick="changetext(this)">请点击该文本</h1>
19.onchange 事件常结合对输入字段的验证来使用。
下面是一个如何使用 onchange 的例子。
当用户改变输入字段的内容时，会调用 upperCase() 函数。
<script>
function myFunction()
{
var x=document.getElementById("fname");
x.value=x.value.toUpperCase();(也可以变成小写等等，把变化后的赋给x.value)
}
</script>
</head>
<body>
请输入英文字符：<input type="text" id="fname" οnchange="myFunction()">
<p>当您离开输入字段时，会触发将输入文本转换为大写的函数。</p>
</body>
20、onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
例子：<body>
<div οnmοuseοver="mOver(this)" οnmοuseοut="mOut(this)" style="background-color:green;width:120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面</div>
<script>
function mOver(obj)
{
obj.innerHTML="谢谢"
}
function mOut(obj)
{
obj.innerHTML="把鼠标移到上面"
}
</script>
</body>

21.getElementsByTagName() 方法返回节点列表。节点列表是一个节点数组。
length 属性定义节点列表中节点的数量。
<!DOCTYPE html>
<html>
<body>
<p>Hello World!</p>
<p>DOM 很有用！</p>
<p>本例演示 <b>length</b> 属性。</p>

<script>
x=document.getElementsByTagName("p");
for (i=0;i<x.length;i++)
{
document.write(x[i].innerHTML);
document.write("<br>");//这里换行不可以用直接写<br/>
}
</script>
</body>
</html>

22.您能够使用三个节点属性：parentNode、firstChild 以及 lastChild ，在文档结构中进行导航。
请看下面的 HTML 片段：
<html>
<body>
<p>Hello World!</p>
<div>
<p>DOM 很有用!</p>
<p>本例演示节点关系。</p>
</div>

</body>
</html>
首个 <p> 元素是 <body> 元素的首个子元素（firstChild）
<div> 元素是 <body> 元素的最后一个子元素（lastChild）
<body> 元素是首个 <p> 元素和 <div> 元素的父节点（parentNode）
firstChild 属性可用于访问元素的文本：
实例
<html>
<body>
<p id="intro">Hello World!</p>

<script>
x=document.getElementById("intro");
document.write(x.firstChild.nodeValue);
</script>
</body>
</html>

22.DOM 根节点
这里有两个特殊的属性，可以访问全部文档：
document.documentElement - 全部文档
document.body - 文档的主体
<!DOCTYPE html>
<html>
<body>
<p>Hello World!</p>
<div>
<p>DOM 很有用！</p>
<p>本例演示 <b>document.body</b> 属性。</p>
</div>
<script>
alert(document.body.innerHTML);
</script>
</body>
</html>
23.除了 innerHTML 属性，您也可以使用 childNodes 和 nodeValue 属性来获取元素的内容。
<p id="intro">Hello World!</p>
<script>
txt=document.getElementById("intro").childNodes[0].nodeValue;
document.write(txt);
</script>
onsubmit 事件会在表单（form）中的确认按钮被点击时发生。