javascript菜鸟教程

XIAO 2020-05-20 11:26:42 java常见问答 7999

作为web的编程语言,javascript的重要性也是不言而喻了,那么你也想入门学习一下吗?如果是的话,就跟小编一起来看看它的简单教程吧。

基础的JavaScript实例:

1.用JavaScript输出文本

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程</title> 
</head>
<body>
	
<h1>我的第一个 Web 页面</h1>
<p>我的第一个段落。</p>
<script>
document.write(Date());
</script>
	
</body>
</html>

2.用JavaScript改变HTML元素

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
	
<h1>我的第一个 Web 页面</h1>
<p id="demo">我的第一个段落。</p>
<script>
document.getElementById("demo").innerHTML="段落已修改。";
</script>
	
</body>
</html>

一个外部JavaScript

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程</title> 
</head>
<body>
	
<h1>我的 Web 页面</h1>
<p id="demo">一个段落。</p>
<button type="button" onclick="myFunction()">点击这里</button>
<p><b>注释:</b>myFunction 保存在名为 "myScript.js" 的外部文件中。</p>
<script src="myScript.js"></script>
	
</body>
</html>

JavaScript语句、注释和代码块

1.JavaScript 语句

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程</title> 
</head>
<body>

<h1>我的 Web 页面</h1>
<p id="demo">一个段落。</p>
<div id="myDIV">一个 DIV。</div>
<script>
document.getElementById("demo").innerHTML="你好 Dolly";
document.getElementById("myDIV").innerHTML="你最近怎么样?";
</script>

</body>
</html>

2.JavaScript代码块

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程</title> 
</head>
<body>

<h1>我的 Web 页面</h1>
<p id="myPar">我是一个段落。</p>
<div id="myDiv">我是一个div。</div>
<p>
<button type="button" onclick="myFunction()">点击这里</button>
</p>
<script>
function myFunction(){
	document.getElementById("myPar").innerHTML="你好世界!";
	document.getElementById("myDiv").innerHTML="你最近怎么样?";
}
</script>
<p>当您点击上面的按钮时,两个元素会改变。</p>

</body>
</html>

3.JavaScript单行注释

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程</title> 
</head>
<body>

<h1 id="myH1"></h1>
<p id="myP"></p>
<script>
// 输出标题:
document.getElementById("myH1").innerHTML="Welcome to my Homepage";
// 输出段落:
document.getElementById("myP").innerHTML="This is my first paragraph.";
</script>
<p><b>注释:</b>注释不会被执行。</p>

</body>
</html>

4.JavaScript多行注释

<!DOCTYPE html>
<html>
<head>
<title>菜鸟教程测试实例</title>
<meta charset="utf-8">
</head>
<body>

<h1 id="myH1"></h1>
<p id="myP"></p>
<script>
/*
下面的这些代码会输出
一个标题和一个段落
并将代表主页的开始
*/
document.getElementById("myH1").innerHTML="欢迎来到菜鸟教程";
document.getElementById("myP").innerHTML="这是一个段落。";
</script>
<p><b>注释:</b>注释块不会被执行。</p>

</body>
</html>

5.使用单行注释来防止执行

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程</title> 
</head>
<body>

<h1 id="myH1"></h1>
<p id="myP"></p>
<script>
//document.getElementById("myH1").innerHTML="欢迎来到我的主页";
document.getElementById("myP").innerHTML="这是我的第一个段落。";
</script>
<p><strong>注意:</strong> 注释块不会被执行</p>

</body>
</html>

6.使用多行注释来防止执行

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程</title> 
</head>
<body>

<h1 id="myH1"></h1>
<p id="myP"></p>
<script>
//document.getElementById("myH1").innerHTML="欢迎来到我的主页";
document.getElementById("myP").innerHTML="这是我的第一个段落。";
</script>
<p><strong>注意:</strong> 注释块不会被执行</p>

</body>
</html>

JavaScript变量

声明一个变量,为它赋值,然后显示出来

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程</title> 
</head>
<body>

<script>
var firstname;
firstname="Hege";
document.write(firstname);
document.write("<br>");
firstname="Tove";
document.write(firstname);
</script>
<p>上面的脚本定义了一个变量,给变量分配一个值并显示,再次修改变量的值后,再次显示。
</p>

</body>

好了,以上就是本篇文章的所有内容了,还想了解更多java入门学习教程记得多多关注本站消息哦。

推荐阅读:

Java虚拟机安装教程都有什么?该如何下载?

java环境配置怎么设置?Java基础教程

Java数组截取如何实现?Java语言教程