js基础学习笔记

最新推荐文章于 2024-09-04 11:06:12 发布

Monsterstars

最新推荐文章于 2024-09-04 11:06:12 发布

阅读量207

点赞数

本文链接：https://blog.csdn.net/u010286313/article/details/79773638

版权

JS基础学习笔记
1 JavaScript简介
1.1 JavaScript：写入 HTML 输出
<p>JavaScript 能够直接写入 HTML 输出流中：
</p>
<script>document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>");
</script>
<p>您只能在 HTML 输出流中使用 <strong>document.write</strong>。
如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。
</p>
1.2 JavaScript：对事件作出反应
<button type="button" οnclick="alert('Welcome!')">点击这里</button>
1.3 JavaScript：改变 HTML 内容
<p id="demo">JavaScript 能改变 HTML 元素的内容。
</p>
<script>
function myFunction()
{
x=document.getElementById("demo"); // 找到元素
x.innerHTML="Hello JavaScript!"; // 改变内容
}
</script>
<button type="button" οnclick="myFunction()">点击这里</button>
1.4 JavaScript：改变 HTML 图像
<script>
function changeImage()
{
element=document.getElementById('myimage')
if (element.src.match("bulbon"))
{
element.src="/i/eg_bulboff.gif";
}
else
{
element.src="/i/eg_bulbon.gif";
}
}
</script>
<img id="myimage" οnclick="changeImage()" src="/i/eg_bulboff.gif">
1.5 JavaScript：改变 HTML 样式
<p id="demo">JavaScript 能改变 HTML 元素的样式。
</p>
<script>
function myFunction()
{
x=document.getElementById("demo") // 找到元素
x.style.color="#ff0000"; // 改变样式
}
</script>
<button type="button" οnclick="myFunction()">点击这里</button>
1.6 JavaScript：验证输入
<p>请输入数字。如果输入值不是数字，浏览器会弹出提示框。</p>
<input id="demo" type="text">
<script>
function myFunction()
{
var x=document.getElementById("demo").value;
if(x==""||isNaN(x)) //isNaN(x):x为数字为假，x不为数字为真
{
alert("Not Numeric");
}
}
</script>
<button type="button" οnclick="myFunction()">点击这里</button>

2 JavaScript 使用
2.1 HTML 中的脚本必须位于 <script> 与 </script> 标签之间。
<script>alert("My First JavaScript");
</script>
2.2 脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。
2.3 JavaScript 函数和事件
2.4 <head> 或 <body> 中的 JavaScript
您可以在 HTML 文档中放入不限数量的脚本。
脚本可位于 HTML 的 <body> 或 <head> 部分中，或者同时存在于两个部分中。
通常的做法是把函数放入 <head> 部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。
2.4.1 <head> 中的 JavaScript 函数
<head>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="My First JavaScript Function";
}
</script>
</head>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph.</p>
<button type="button" οnclick="myFunction()">点击这里</button>
</body>
2.4.2 <body> 中的 JavaScript 函数
<body>
<h1>My First Web Page</h1>
<p id="demo">A Paragraph.</p>
<button type="button" οnclick="myFunction()">点击这里</button>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="My First JavaScript Function";
}
</script>
</body>
2.5 外部的 JavaScript
<body>
<script src="myScript.js"></script>
</body>

3 JavaScript 输出
3.1 操作 HTML 元素
<p id="demo">My First Paragraph.</p>
<script>
document.getElementById("demo").innerHTML="My First JavaScript";
</script>
3.2 写到文档输出
<body>
<h1>我的第一张网页</h1>
<script>
document.write("<p>我的第一段 JavaScript</p>");
</script>
</body>
3.3 JavaScript 语句
3.4 JavaScript 代码
3.5 JavaScript 代码块
JavaScript 语句通过代码块的形式进行组合。
块由左花括号开始，由右花括号结束。
块的作用是使语句序列一起执行。
<p id="myPar">I am a paragraph.</p>
<div id="myDiv">I am a div.</div>
<p>
<button type="button" οnclick="myFunction()">点击这里</button>
</p>
<script>
function myFunction()
{
document.getElementById("myPar").innerHTML="Hello World";
document.getElementById("myDiv").innerHTML="How are you?";
}
</script>
3.6 JavaScript 对大小写敏感。JavaScript 会忽略多余的空格。

4 JavaScript 注释
4.1 JavaScript 注释
单行注释以 // 开头。
4.2 JavaScript 多行注释
多行注释以 /* 开始，以 */ 结尾。
4.3 使用注释来阻止执行(测试代码)
4.4 在行末使用注释

5 JavaScript 变量
5.1 JavaScript 变量
与代数一样，JavaScript 变量可用于存放值（比如 x=2）和表达式（比如 z=x+y）。
5.2 JavaScript 数据类型
JavaScript 变量有很多种类型，但是现在，我们只关注数字和字符串。
当您向变量分配文本值时，应该用双引号或单引号包围这个值。
当您向变量赋的值是数值时，不要使用引号。如果您用引号包围数值，该值会被作为文本来处理。
5.3 声明（创建） JavaScript 变量
<p>点击这里来创建变量，并显示结果。</p>
<button οnclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction()
{
var carname="Volvo";
document.getElementById("demo").innerHTML=carname;
}
</script>
5.4 一条语句，多个变量
您可以在一条语句中声明很多变量。该语句以 var 开头，并使用逗号分隔变量即可.
声明也可横跨多行.
5.5 Value = undefined
5.6 重新声明 JavaScript 变量
5.7 JavaScript 算数

6 JavaScript 数据类型(字符串、数字、布尔、数组、对象、Null、Undefined)
6.1 JavaScript 拥有动态类型
JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型：
<script>
var x // x 为 undefined
var x = 6; // x 为数字
var x = "Bill"; // x 为字符串
</script>
6.2 JavaScript 字符串
字符串是存储字符（比如 "Bill Gates"）的变量。
字符串可以是引号中的任意文本。您可以使用单引号或双引号：
您可以在字符串中使用引号，只要不匹配包围字符串的引号即可：
<script>
var carname1="Bill Gates";
var carname2='Bill Gates';
var answer1="Nice to meet you!";
var answer2="He is called 'Bill'";
var answer3='He is called "Bill"';

document.write(carname1 + "<br>")
document.write(carname2 + "<br>")
document.write(answer1 + "<br>")
document.write(answer2 + "<br>")
document.write(answer3 + "<br>")
</script>
6.3 JavaScript 数字
JavaScript 只有一种数字类型。
数字可以带小数点，也可以不带。
极大或极小的数字可以通过科学（指数）计数法来书写：
<script>
var x1=36.00;
var x2=36;
var y=123e5;
var z=123e-5;

document.write(x1 + "<br>")
document.write(x2 + "<br>")
document.write(y + "<br>")
document.write(z + "<br>")
</script>
6.4 JavaScript 布尔
布尔（逻辑）只能有两个值：true 或 false。
6.5 JavaScript 数组
三种创建数组方式：
<script>
var cars=new Array();
cars[0]="Audi";
cars[1]="BMW";
cars[2]="Volvo";
</script>

<script>
var cars=new Array("Audi","BMW","Volvo");
</script>

<script>
var cars=["Audi","BMW","Volvo"];
</script>
6.6 JavaScript 对象
对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔。声明可以跨行。
<script>
var person={firstname:"Bill", lastname:"Gates", id:5566};
</script>
对象属性有两种寻址方式。
<script>
name=person.lastname;
name=person["lastname"];
</script>
6.7 Undefined 和 Null
Undefined 这个值表示变量不含有值。 //不含有值，没有定义过。
可以通过将变量的值设置为 null 来清空变量。 //值为null
6.8 声明变量类型
当您声明新变量时，可以使用关键词 "new" 来声明其类型。声明类型后的变量不能赋其他类型变量的值。
<script>
var carname=new String;
var x= new Number;
var y= new Boolean;
var cars= new Array;
var person= new Object;
</script>

7 JavaScript 对象
JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。
在 JavaScript 中，对象是拥有属性和方法的数据。
7.1 属性和方法
7.2 JavaScript 中的对象
在 JavaScript 中，对象是数据（变量），拥有属性和方法。
当您像这样声明一个 JavaScript 变量时：
<script>var txt = "Hello";</script>
您实际上已经创建了一个 JavaScript 字符串对象。字符串对象拥有内建的属性 length。对于上面的字符串来说，length 的值是 5。字符串对象同时拥有若干个内建的方法。
属性：
<script>
txt.length=5
</script>
方法：
<script>
txt.indexOf()
txt.replace()
txt.search()
</script>
7.3 创建 JavaScript 对象
<script>
person=new Object();
person.firstname="Bill";
person.lastname="Gates";
person.age=56;
person.eyecolor="blue";
document.write(person.firstname + " is " + person.age + " years old.");
</script>
7.4 访问对象的属性
语法：objectName.propertyName
<script>
var message="Hello World!";
var x=message.length;
</script>
7.5 访问对象的方法
语法：objectName.methodName()
<script>
var message="Hello world!";
var x=message.toUpperCase();
</script>

8 JavaScript 函数
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
<head>
<script>
function myFunction()
{
alert("Hello World!");
}
</script>
</head>
<body>
<button οnclick="myFunction()">点击这里</button>
</body>
8.1 JavaScript 函数语法
函数就是包裹在花括号中的代码块，前面使用了关键词 function：
function functionname()
{
这里是要执行的代码
}

当调用该函数时，会执行函数内的代码。
可以在某事件发生时直接调用函数（比如当用户点击按钮时），并且可由 JavaScript 在任何位置进行调用。
JavaScript 对大小写敏感。关键词 function 必须是小写的，并且必须以与函数名称相同的大小写来调用函数。
8.2 调用带参数的函数
在调用函数时，您可以向其传递值，这些值被称为参数。这些参数可以在函数中使用。您可以发送任意多的参数，由逗号 (,) 分隔。
<p>点击这个按钮，来调用带参数的函数。</p>
<button οnclick="myFunction('Bill Gates','CEO')">点击这里</button>
<script>
function myFunction(name,job)
{
alert("Welcome " + name + ", the " + job);
}
</script>
8.3 带有返回值的函数
<p>本例调用的函数会执行一个计算，然后返回结果：</p>
<p id="demo"></p>
<script>
function myFunction(a,b)
{
return a*b;
}
document.getElementById("demo").innerHTML=myFunction(4,3);
</script>

在您仅仅希望退出函数时，也可使用 return 语句。返回值是可选的：
<script>
function myFunction(a,b)
{
if (a>b)
{
return;
}
x=a+b
}
</script>
8.4 局部 JavaScript 变量
在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）。
您可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量。
只要函数运行完毕，本地变量就会被删除。
8.5 全局 JavaScript 变量
在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。
8.6 JavaScript 变量的生存期
JavaScript 变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。
8.7 向未声明的 JavaScript 变量来分配值
如果您把值赋给尚未声明的变量，该变量将被自动作为全局变量声明。
这条语句：
<script>carname="Volvo";</script>
将声明一个全局变量 carname，即使它在函数内执行。

9 JavaScript 运算符

10 JavaScript 比较和逻辑运算符

11 JavaScript If...Else 语句

12 JavaScript Switch 语句

13 JavaScript For 循环

14 JavaScript While 循环

15 JavaScript Break 和 Continue 语句
break 语句用于跳出循环。
continue 用于跳过循环中的一个迭代。

16 JavaScript 错误 - Throw、Try 和 Catch
try 语句测试代码块的错误。
catch 语句处理错误。
throw 语句创建自定义错误。
16.1JavaScript 测试和捕捉
try 语句允许我们定义在执行时进行错误测试的代码块。
catch 语句允许我们定义当 try 代码块发生错误时，所执行的代码块。
JavaScript 语句 try 和 catch 是成对出现的。
语法：
try
{
//在这里运行代码
}
catch(err)
{
//在这里处理错误
}
实例：
<head>
<script>
var txt="";
function message()
{
try
{
adddlert("Welcome guest!"); //错误在于alert打错
}
catch(err)
{
txt="本页有一个错误。\n\n";
txt+="错误描述：" + err.message + "\n\n";
txt+="点击确定继续。\n\n";
alert(txt);
}
}
</script>
</head>
<body>
<input type="button" value="查看消息" οnclick="message()" />
</body>
16.2Throw 语句
throw 语句允许我们创建自定义错误。
正确的技术术语是：创建或抛出异常（exception）。
如果把 throw 与 try 和 catch 一起使用，那么您能够控制程序流，并生成自定义的错误消息。
语法：
throw exception
异常可以是 JavaScript 字符串、数字、逻辑值或对象。
<body>
<script>
function myFunction()
{
try
{
var x=document.getElementById("demo").value;
if(x=="") throw "值为空";
if(isNaN(x)) throw "不是数字";
if(x>10) throw "太大";
if(x<5) throw "太小";
}
catch(err)
{
var y=document.getElementById("mess");
y.innerHTML="错误：" + err + "。";
}
}
</script>
<h1>我的第一个 JavaScript 程序</h1>
<p>请输入 5 到 10 之间的数字：</p>
<input id="demo" type="text">
<button type="button" οnclick="myFunction()">测试输入值</button>
<p id="mess"></p>
</body>
17 JavaScript 表单验证

JS HTML DOM