适用于阅读与简单编辑HTML代码的基础JS

最新推荐文章于 2022-07-03 10:07:12 发布

天行健·

最新推荐文章于 2022-07-03 10:07:12 发布

阅读量444

点赞数

文章标签： js

本文链接：https://blog.csdn.net/weixin_44144510/article/details/121794004

版权

JavaScript 是什么

JavaScript 语句是发给浏览器的命令。这些命令的作用是告诉浏览器要做的事情。

如想要将HTML的文本转化为另一个文本，要么views重新调用修改文本的html，要么html内部自己更新（JS）

<!DOCTYPE html>
<html>
<body>
<h1>我的 Web 页面</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">尝试一下</button>
<script>
function myFunction()
{
    document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>
</body>
</html>

JavaScript 在HTML中运行方式：

浏览器会解释并执行位于 <script> 和 </script>之间的 JavaScript 代码
也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。

如需使用外部文件，请在 <script> 标签的 "src" 属性中设置该 .js 文件： <script src="myScript.js"></script>

外部 JavaScript 文件的文件扩展名是 .js。

JavaScript 代码格式：

分号用于分隔 JavaScript 语句，浏览器按照编写顺序依次执行每条语句。
代码块以左花括号开始，以右花括号结束。
代码块的作用是一并地执行语句序列。（大概是同时的，无所谓）

语句	描述
break	用于跳出循环。
catch	语句块，在 try 语句块执行出错时执行 catch 语句块。
continue	跳过循环中的一个迭代。
do ... while	执行一个语句块，在条件语句为 true 时继续执行该语句块。
for	在条件语句为 true 时，可以将代码块执行指定的次数。
for ... in	用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）。
function	定义一个函数
if ... else	用于基于不同的条件来执行不同的动作。
return	退出函数
switch	用于基于不同的条件来执行不同的动作。
throw	抛出（生成）错误。
try	实现错误处理，与 catch 一同使用。
var	声明一个变量。
while	当条件语句为 true 时，执行语句块。

注释： /* */ , //

声明、赋予变量比C少了类型指定

var carname="Volvo";

var cars=new Array() 数组
var person={
firstname : "John",
lastname  : "Doe",
id        :  5566
}; 对象 类似于结构体


指定变量类型
var carname=new String;
var x=      new Number;
var y=      new Boolean;
var cars=   new Array;
var person= new Object;

声明函数：
function myFunction(var1,var2)
{
代码
}

调用函数：myFunction(argument1,argument2)

循环：
for (var i=0;i<cars.length;i++)
{ 
    document.write(cars[i] + "<br>");
}

JavaScript 触发HTML事件与控制HTML元素

HTML 事件是发生在 HTML 元素上的事情。

当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。
在事件函数中能够控制html元素改变

document.getElementById("demo").innerHTML = 'John Doe';

<button onclick="this.innerHTML=Date()">现在的时间是?</button>  // this 自己改变
<button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>
<p id="demo"></p>   //别人改变

下面是一些常见的HTML事件的列表:

事件	描述
onchange	HTML 元素改变
onclick	用户点击 HTML 元素
onmouseover	用户在一个HTML元素上移动鼠标
onmouseout	用户从一个HTML元素上移开鼠标
onkeydown	用户按下键盘按键
onload	浏览器已完成页面的加载