js替换html添加内容 js可以改变html的样式
在上一课中，我体验了JavaScript的各种用法，并编写了HelloWorld程序。本课将解释JavaScript的各种语法规范和格式。将onclick事件的JavaScript代码移到头部在上一课中，单击按钮
在上一课中，我体验了JavaScript的各种用法，并编写了HelloWorld程序。
本课将解释JavaScript的各种语法规范和格式。
将onclick事件的JavaScript代码移到头部在上一课中，单击按钮事件后，您可以编辑和修改网页的内容。虽然用途很好，但是把代码塞进HTML内容并不是一个好的格式和规范。那么如何修改呢？
可以将JavaScript代码从input的onclick事件中转移到head。
将testjs.html修改如下:
刷新页面，然后单击“单击”按钮:
你可以看到结果和之前一样。
在这里，您可以看到代码已被修改。在onclick事件中，调用函数changeContent，而<>JavaScript函数定义
函数的概念，如果你之前学过第一章，一定不陌生。
把一段代码组织在一起，用函数定义，就可以很方便的使用。
通常，函数是在head中定义的，然后在网页控件的事件发生时调用。
这样的好处显而易见。它可以把所有的JavaScript代码组织在一起，更有利于组织和调用。
JavaScript函数定义如下:
函数名(参数1，参数2 …){
执行函数中的代码；
}
函数必须定义为function，类似于python的def。
参数可以是0、1或更多，用括号括起来，用逗号分隔。
函数体受左右花括号的限制，JavaScript执行花括号内的代码。
JavaScript代码和网页内容的分离和前面的CSS代码一样，除了可以直接写在head的script标签中，JavaScript代码都是通过引用外部文件来完成的。
这样做的好处很明显，就是把网页的显示内容和网页的操作代码分开，更容易维护，更有利于组织代码，方便不同网页引用同一个JavaScript代码函数。
可以称为外部JavaScript文件，文件名一般以。js。
如果需要使用外部JavaScript文件，可以通过Script标签的src属性引用。
唯一需要注意的是，外部JavaScript文件不能包含脚本标签。
让我们修改代码，调用一个外部JavaScript文件。
创建一个名为testjs.js的新文件，将changeContent函数的全部内容移动到testjs.js文件中。并将文本修改颜色更改为绿色。
Testjs.js代码内容如下:
修改testjs.html文档的内容:
刷新页面，点击Click按钮，可以看到外部JavaScript文件工作了。
document.getElementById函数
您可以在函数changeContent中看到两行代码:
document . getelementbyid(‘testid & # 8217).innerHTML = & # 8217哥是西门吹雪’；
document . getelementbyid(‘testid & # 8217)style.color = & # 8217绿色’；
这里的关键语句是document.getElementById，用户使用它来访问web页面的元素。
它通过网页元素的id属性来定位和访问。
Document是JavaScript内部对象实例，表示JavaScript代码当前所在的这个网页的对象的实例引用。
至于“对象”和“实例”的概念，如果你有其他编程语言的经验，可能会更容易理解，但初学者可能不太懂。
粗略解释，“对象”是抽象概念的集合，“实例”是对象抽象概念的具体化。
对象用于定义某一类概念的抽象含义，实例是满足对象抽象概念的具体引用。
打个比喻来说，“汽车”是一个物体。它是一个概念，定义了一些东西，但不能直接使用。
而“一辆奔驰C180”就是“车”的一个例子。是可以直接使用的具体的东西，满足对象的定义。
每个对象都有一些操作方法，比如“汽车”可以启动、停止、前进、后退或转弯。
然后对象的实例可以使用这些方法进行操作。
同样，“一辆桑塔纳2000”也是“车”的例子，这些方法也可以用来操作。
如你所见，事物的概念只有一个对象，可以有无数个实例。
这里就不多赘述了。大家有个基本了解就够了。随着以后学习更多的编程语言，你会逐渐掌握的。
是文档对象的实例。它的方法之一是getElementById，返回值是网页中一个element对象的实例。
通过继续操作这个返回值，您可以更改网页元素的内容或样式。
InnerHTML是指网页元素的内容，而style是网页元素的样式属性，style.color是网民元素的颜色属性。
您可以通过指定语句=来设置相应的元素内容和样式。
JavaScript代码执行规则JavaScript代码向浏览器发出指令，告诉它如何执行处理。
它是一步完成的，通常在每句话末以分号结束。
执行代码可以是定义变量、赋值、判断、循环或调用其他函数的语句。
执行代码是按顺序执行的，但是越来越复杂的逻辑也可以通过分支语句和循环语句来实现。
例如，上节课中的以下语句:
if(document . getelementbyid(‘密码’)、value.length & lt6) {
alert(‘密码长度不能少于6位！’);
}否则{
alert(‘检查OK & # 8217);
}
如您所见，if语句与您之前学习的python语法的格式不同。
If后面是用()括号括起来的逻辑判断。根据逻辑判断的结果是真还是假，执行不同的代码。
这和python的逻辑是一样的，只是代码规范不同。
JavaScript代码区分大小写JavaScript是区分大小写的，这不同于第二章中的html代码。
让我们尝试一下，将getelementbyid更改为全部小写的getElementById:
修改testjs.js代码:
刷新页面，点击点击按钮，可以看到网页的内容和风格都没有变化，说明代码不行。
所以这里有点不好判断。是代码错误还是其他什么原因？
其实可以通过之前使用的浏览器调试工具进行调试。
用鼠标右键通过“检查”菜单打开浏览器调试工具。
在底部的控制台窗口，可以看到JavaScript代码出错的提示，可以清楚的知道哪一行出错了，哪里出错了。
空大小写和换行符JavaScript将忽略额外的空单元格，您可以通过添加空单元格来提高代码的可读性。
纠正刚才的小写错误，加上空。
Testjs.js代码修改如下:
然后刷新页面并重新执行。您可以看到，在web页面的执行中没有错误，并且空网格不会影响代码。
同样，如果一行代码中的文本字符串太长，也可以使用换行符来提高可读性。
在文本字符串中使用反斜杠将代码换行。
Testjs.js代码修改如下:
刷新网页，可以看到网页执行正常:
但是，如果使用反斜杠而不是文本字符串，将会出现错误:
Testjs.js代码修改如下:
刷新网页，可以看到控制台显示的错误。
JavaScript注释
就像CSS代码一样，为了暂时不执行被注释的代码或解释代码，可以对JavaScript代码进行注释。
单行注释以//开头，多行注释以/*开头，以*/结尾。
向代码中添加2条注释，注释掉错误代码，并添加正确的代码。
Testjs.js代码修改如下:
刷新网页并重新执行。可以看到评论内容并不影响代码的实际执行，网页执行正常。
