[ JavaScript编写方式 | 青训营笔记 ]js编写方式专栏，这是我参与「第五届青训营」伴学笔记创作活动的第3天

这是我参与「第五届青训营」伴学笔记创作活动的第3天。

一、本堂课重点内容：

本节课详细介绍了前端技术栈之一JavaScript的不同编写方式，以及对于低级浏览器的应对策略。

二、详细知识点介绍：

什么是JavaScript？：

JavaScript 是 Web 的编程语言，所有现代的 HTML 页面都可以使用 JavaScript。

JavaScript的不同编写方式：

`<script>`标签:

如需在 HTML 页面中插入 JavaScript，需使用<script>标签，在打开或刷新页面时则会调用该js文件。

<body>中的 JavaScript

<html>
<head>
<meta charset="utf-8">
<title>test1(runoob.com)</title>
</head>
<body>
	
<script>
document.write("<h1>标题1</h1>");
document.write("<p>段落1</p>");
</script>
	
</body>
</html>

运行结果如下：

<head>中的 JavaScript 点击按钮时调用改js函数。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>test2(runoob.com)</title> 
<script>
function myFunction(){
	document.getElementById("demo").innerHTML="新春快乐，兔年吉祥！";
}
</script>
</head>
<body>
	
<h1>网页</h1>
<p id="demo">js函数尝试</p>
<button type="button" onclick="myFunction()">点击这里</button>
	
</body>

运行结果如下所示：

外部的 JavaScript

把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码，外部 JavaScript 文件的文件扩展名是 .js，在 <script> 标签的 "src" 属性中设置该js文件

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

在浏览器中使用JavaScript

按f12打开控制台后清除所有控制台代码在控制台中调试js代码

创建脚本运行js代码

点击new新建脚本运行成功此时控制台也能找到我们刚才运行的所有代码：

三、实践练习例子

尝试for循环

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>1(runoob.com)</title>
</head>
<body>

<p>数字0-5</p>
<button onclick="myFunction()">请点击</button>
<p id="demo"></p>
<script>
function myFunction(){
	var x="";
	for (var i=0;i<5;i++){
		x=x + "该数字为 " + i + "<br>";
	}
	document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>

运行结果如下所示：

四、课后个人总结：

js在编写时需要考虑到不同浏览器的组件并不相同，在编写时存在局限性。同时也需要考虑较低级浏览器在访问时可能会遇到的问题。

五、引用参考

本文引用了博客园、csdn、菜鸟。

六、寄语

兔年吉祥如意！希望来年学业有成！

[ JavaScript编写方式 | 青训营笔记 ]