JavaScript基础语法1

最新推荐文章于 2024-08-24 12:37:57 发布

小济公

最新推荐文章于 2024-08-24 12:37:57 发布

阅读量97

点赞数 1

分类专栏： JS 文章标签： js javascript

本文链接：https://blog.csdn.net/weixin_43185348/article/details/103762783

版权

JS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

JavaScript 通常用于操作 HTML 元素。
操作 HTML 元素如需从 JavaScript 访问某个 HTML 元素，可以使用 document.getElementById(id) 方法。请使用 “id” 属性来标识 HTML 元素：

<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p id="demo">My First Paragraph</p>
<script>
document.getElementById("demo").innerHTML="My First JavaScript";
</script>
</body>
</html>

JavaScript 由 web 浏览器来执行。在这种情况下，浏览器将访问 id=“demo” 的 HTML 元素，并把它的内容（innerHTML）替换为 “My First JavaScript”。
写到文档输出
下面的例子直接把

元素写到 HTML 文档输出中：

<!DOCTYPE html>
<html>
<body>
	<h1>My First Web Page</h1>
	<script>
	document.write("<p>My First JavaScript</p>");
	</script>
</body>
</html>

请使用 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>

JavaScript 语句
JavaScript 语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么。下面的 JavaScript 语句向 id=“demo” 的 HTML 元素输出文本 “Hello World”：

document.getElementById("demo").innerHTML="Hello World";

分号 ;
分号用于分隔 JavaScript 语句。通常我们在每条可执行的语句结尾添加分号。使用分号的另一用处是在一行中编写多条语句。
提示：也可能看到不带有分号的案例。在 JavaScript 中，用分号来结束语句是可选的。
JavaScript 代码块
JavaScript 语句通过代码块的形式进行组合。块由左花括号开始，由右花括号结束。块的作用是使语句序列一起执行。JavaScript 函数是将语句组合在块中的典型例子。下面的例子将运行可操作两个 HTML 元素的函数：

function myFunction()
{
document.getElementById("demo").innerHTML="Hello World";
document.getElementById("myDIV").innerHTML="How are you?";
}

JavaScript 对大小写敏感。
JavaScript 对大小写是敏感的。当编写 JavaScript 语句时，请留意是否关闭大小写切换键。
函数 getElementById 与 getElementbyID 是不同的。
同样，变量 myVariable 与 MyVariable 也是不同的。
JavaScript 注释
JavaScript 不会执行注释。
我们可以添加注释来对 JavaScript 进行解释，或者提高代码的可读性。
单行注释以 // 开头。
多行注释以 /* 开始，以 */ 结尾。
JavaScript 对象
在 JavaScript 中，对象是拥有属性和方法的数据。
属性和方法
属性是与对象相关的值。
方法是能够在对象上执行的动作。
举例：汽车就是现实生活中的对象。
汽车的属性包括名称、型号、重量、颜色等。
所有汽车都有这些属性，但是每款车的属性都不尽相同。
汽车的方法可以是启动、驾驶、刹车等。
所有汽车都拥有这些方法，但是它们被执行的时间都不尽相同。
当这样声明一个 JavaScript 变量时：

var txt = "Hello";

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

txt.length=5

方法：

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

创建 JavaScript 对象
JavaScript 中的几乎所有事务都是对象：字符串、数字、数组、日期、函数，等等。也可以创建自己的对象。本例创建名为 “person” 的对象，并为其添加了四个属性：
实例

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

访问对象的属性
访问对象属性的语法是

objectName.propertyName

本例使用 String 对象的 length 属性来查找字符串的长度：

var message="Hello World!";
var x=message.length;

12

访问对象的方法
可以通过下面的语法调用方法：

objectName.methodName()

这个例子使用 String 对象的 toUpperCase() 方法来把文本转换为大写：
var message=“Hello world!”;
var x=message.toUpperCase();
在以上代码执行后，x 的值是：

HELLO WORLD!

JavaScript 函数
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
函数就是包裹在花括号中的代码块，前面使用了关键词 function：

function functionname()
{
这里是要执行的代码
}

当调用该函数时，会执行函数内的代码。可以在某事件发生时直接调用函数（比如当用户点击按钮时），并且可由 JavaScript 在任何位置进行调用。
提示：JavaScript 对大小写敏感。关键词 function 必须是小写的，并且必须以与函数名称相同的大小写来调用函数。
（1）调用带参数的函数
在调用函数时，可以向其传递值，这些值被称为参数。这些参数可以在函数中使用。可以发送任意多的参数，由逗号 (,) 分隔：

myFunction(argument1,argument2)

当您声明函数时，请把参数作为变量来声明：

function myFunction(var1,var2)
{
这里是要执行的代码
}

变量和参数必须以一致的顺序出现。第一个变量就是第一个被传递的参数的给定的值，以此类推
实例

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

上面的函数会当按钮被点击时提示 “Welcome Bill Gates, the CEO”。函数很灵活，可以使用不同的参数来调用该函数，这样就会给出不同的消息：

<button onclick="myFunction('Harry Potter','Wizard')">点击这里</button>
<button onclick="myFunction('Bob','Builder')">点击这里</button>

根据点击的不同的按钮，上面的例子会提示 “Welcome Harry Potter, the Wizard” 或 “Welcome Bob, the Builder”。
（2）带有返回值的函数
有时，我们会希望函数将值返回调用它的地方。通过使用 return 语句就可以实现。在使用 return 语句时，函数会停止执行，并返回指定的值。

function myFunction()
{
var x=5;
return x;
}

上面的函数会返回值 5。
注释：整个 JavaScript 并不会停止执行，仅仅是函数。JavaScript 将继续执行代码，从调用函数的地方。
函数调用将被返回值取代：

var myVar=myFunction();

myVar 变量的值是 5，也就是函数 “myFunction()” 所返回的值。即使不把它保存为变量，也可以使用返回值：

document.getElementById("demo").innerHTML=myFunction();

“demo” 元素的 innerHTML 将成为 5，也就是函数 “myFunction()” 所返回的值。可以使返回值基于传递到函数中的参数：
实例：（计算两个数字的乘积，并返回结果）

function myFunction(a,b)
{
return a*b;
}
document.getElementById("demo").innerHTML=myFunction(4,3);

“demo” 元素的 innerHTML 将是：12
在仅仅希望退出函数时，也可使用 return 语句。返回值是可选的：

function myFunction(a,b)
{
if (a>b)
  {
  return;
  }
x=a+b
}

如果 a 大于 b，则上面的代码将退出函数，并不会计算 a 和 b 的总和。
局部 JavaScript 变量
在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）。可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量。
只要函数运行完毕，本地变量就会被删除。
全局 JavaScript 变量
在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。
JavaScript 变量的生存期
JavaScript 变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。

向未声明的 JavaScript 变量来分配值
如果您把值赋给尚未声明的变量，该变量将被自动作为全局变量声明。
这条语句：

carname="Volvo";

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

小济公

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript基础语法1

JavaScript 通常用于操作 HTML 元素。操作 HTML 元素如需从 JavaScript 访问某个 HTML 元素，可以使用 document.getElementById(id) 方法。请使用 “id” 属性来标识 HTML 元素：<!DOCTYPE html><html><body><h1>My First Web Page...
复制链接

扫一扫

专栏目录