Java学习日记番外篇：JavaScript

最新推荐文章于 2021-03-27 21:30:51 发布

Sleep_At_Home

最新推荐文章于 2021-03-27 21:30:51 发布

阅读量373

点赞数

分类专栏： Java学习日记文章标签： javascript html 脚本语言

本文链接：https://blog.csdn.net/Sleep_At_Home/article/details/68064269

版权

Java学习日记专栏收录该内容

17 篇文章 0 订阅

订阅专栏

声明：本文大部分内容来自w3school，此文章仅作为个人学习记录用。

JavaScript：

JavaScript 与 Java 是两种完全不同的语言，无论在概念还是设计上。
JavaScript 是脚本语言
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

HTML 中的脚本必须位于 <script> 与 </script> 标签之间。
脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。
JavaScript 变量均为对象。当您声明一个变量时，就创建了一个新的对象。

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

JavaScript：写入 HTML 输出

实例

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

提示：您只能在 HTML 输出流中使用 <strong>document.write</strong>
如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。

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

实例

<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My First Paragraph.</p>
<button onclick="myFunction()">点击这里</button>
<script>
function myFunction()
{document.write("糟糕！文档消失了。");}
</script>
</body>
</html>

在这个实例中，只要一按按钮，这个页面就会消失，只会剩下document.write("糟糕！文档消失了。");执行的内容。

JavaScript：对事件作出反应

实例

<button type="button" onclick="alert('Welcome!')">点击这里</button>

`alert()` 函数在 JavaScript 中并不常用，但它对于代码测试非常方便。 `onclick` 事件是“单击的时候”。

JavaScript：改变 HTML 内容

使用 JavaScript 来处理 HTML 内容是非常强大的功能。

实例

<p id="demo">
JavaScript 能改变 HTML 元素的内容。
</p>
<script>
function myFunction()
{
x=document.getElementById("demo");  // 找到元素
x.innerHTML="Hello JavaScript!";    // 改变内容
}
</script>

您会经常看到 document.getElementByID("some id")。这个方法是 HTML DOM 中定义的。

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

JavaScript：改变 HTML 图像

本例会动态地改变 HTML <image> 的来源 (src)：
点击灯泡就可以打开或关闭这盏灯

<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" onclick="changeImage()" src="../i/eg_bulboff.gif">

JavaScript 能够改变任意 HTML 元素的大多数属性，而不仅仅是图片。

JavaScript：改变 HTML 样式

改变 HTML 元素的样式，属于改变 HTML 属性的变种。

实例

<p id="demo">
JavaScript 能改变 HTML 元素的样式。
</p>
<script>
function myFunction()
{
x=document.getElementById("demo") // 找到元素
x.style.color="#ff0000";          // 改变样式
}
</script>

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

JavaScript：验证输入

JavaScript 常用于验证用户的输入。

实例

<input id="demo" type="text">
<script>
function myFunction()
{
var x=document.getElementById("demo").value;
if(x==""||isNaN(x))
    {alert("Not Numeric");}
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>

外部的 JavaScript

也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。

外部 JavaScript 文件的文件扩展名是 .js。
如需使用外部文件，请在 <script> 标签的 “src” 属性中设置该 .js 文件：

实例

<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>

在 <head> 或 <body> 中引用脚本文件都是可以的。实际运行效果与您在 <script> 标签中编写脚本完全一致。

提示：外部脚本不能包含 <script> 标签。

对代码行进行折行

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

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

不能像这样折行：

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

注释：

单行注释： //
多行注释：

 /*
……………
*/

JavaScript 变量

变量是存储信息的容器。

<script>
var x=2;
var y=3;
var z=2+3;

document.write(x + "<br>");
document.write(y + "<br>");
document.write(z + "<br>");
</script>

输出的结果是：

2
3
5

在下面的例子中，我们创建了名为 carname 的变量，并向其赋值 "Volvo"，然后把它放入 id="demo" 的 HTML 段落中：

<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction()
{
var carname="Volvo";
document.getElementById("demo").innerHTML=carname;
}
</script>

如果重新声明 JavaScript 变量，该变量的值不会丢失：
在以下两条语句执行后，变量 carname 的值依然是 "Volvo"：

var carname="Volvo";
var carname;

JavaScript 数据类型

字符串、数字、布尔、数组、对象、Null、Undefined

var x                // x 为 undefined
var x = 6;           // x 为数字
var x = "Bill";      // x 为字符串

JavaScript 数组

下面的代码创建名为 cars 的数组：

var cars=new Array();
cars[0]="Audi";
cars[1]="BMW";
cars[2]="Volvo";

或者(condensed array):

var cars=new Array("Audi","BMW","Volvo");

JavaScript 对象

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

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

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

空格和折行无关紧要。声明可横跨多行：

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

对象属性有两种寻址方式：

name=person.lastname;
name=person["lastname"];

Undefined 和 Null
Undefined 这个值表示变量不含有值。
可以通过将变量的值设置为 null 来清空变量。

声明变量类型

当您声明新变量时，可以使用关键词 “new” 来声明其类型：

var carname=new String;
var x=      new Number;
var y=      new Boolean;
var cars=   new Array;
var person= new Object;

JavaScript对象：

JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。
在 JavaScript 中，对象是拥有属性和方法的数据。

属性和方法
属性是与对象相关的值。

方法是能够在对象上执行的动作。
举例：汽车就是现实生活中的对象。
汽车的属性：

car.name=Fiat
car.model=500
car.weight=850kg
car.color=white

汽车的方法：

car.start()
car.drive()
car.brake()

JavaScript 中的对象
在 JavaScript 中，对象是数据（变量），拥有属性和方法。
当您像这样声明一个 JavaScript 变量时：

var txt = "Hello";

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

属性：

txt.length=5

方法：

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

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

JavaScript 函数

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

例子：

<script>
function myFunction()
{alert("Hello World!");}
</script>
</head>
<body>
<button onclick="myFunction()">点击这里</button>

JavaScript 对大小写敏感。关键词 function 必须是小写的，并且必须以与函数名称相同的大小写来调用函数。

带参数的函数：

<button onclick="myFunction('Bill Gates','CEO')">点击这里</button>
<script>
function myFunction(name,job)
{alert("Welcome " + name + ", the " + job);}
</script>

函数还可以加上返回值：return x;
函数调用将被返回值取代：

局部 JavaScript 变量

在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）。
您可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量。
只要函数运行完毕，本地变量就会被删除。

全局 JavaScript 变量

在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。

JavaScript 变量的生存期
JavaScript 变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。
向未声明的 JavaScript 变量来分配值
如果您把值赋给尚未声明的变量，该变量将被自动作为全局变量声明。
这条语句：

carname="Volvo";

将声明一个全局变量 carname，即使它在函数内执行。

运算符：

如需把两个或多个字符串变量连接起来，请使用 + 运算符。

txt1="What a very";
txt2="nice day";
txt3=txt1+txt2;

如果把数字与字符串相加，结果将成为字符串。

JavaScript 比较和逻辑运算符

全等（值和类型） x===5 为 true；x==="5" 为 false

条件运算符：
JavaScript 还包含了基于某些条件对变量进行赋值的条件运算符。
语法

variablename=(condition)?value1:value2

JavaScript Switch 语句

请使用 switch 语句来选择要执行的多个代码块之一。

语法

switch(n)
{
case 1:
  执行代码块 1
  break;
case 2:
  执行代码块 2
  break;
default:
  n 与 case 1 和 case 2 不同时执行的代码
}

工作原理：首先设置表达式 n（通常是一个变量）。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配，则与该 case 关联的代码块会被执行。请使用 break 来阻止代码自动地向下一个 case 运行。