整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
数据编程入门：JavaScript输出
JavaScript是一种当前最流行的脚本语言，这门语言经常用于Web，今天小编将为大家带来大数据编程入门：JavaScript输出。
JavaScript是一种具有函数有限的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。
1、JavaScript：直接写入HTML输出流
运行结果：
注意：document.write只能在HTML输出中使用，如果在加载文档后使用此方法，将覆盖整个文档。
2、JavaScript：对事件的反应
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小米谷</title>
</head>
<body>
<h1>我的第一个 JavaScript</h1>
<p>
JavaScript 能够对事件作出反应。比如对按钮的点击：
</p>
<button type="button" onclick="alert('欢迎，我尊贵的VIP!')">点我!</button>
</body>
</html>
运行结果：
alert()函数在JavaScript中并不常用，但它非常方便代码测试。
3、JavaScript：改变HTML内容
使用JavaScript处理HTML内容的功能是非常强大。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小米谷的JavaScript</title>
</head>
<body>
<h1>我的第一段 JavaScript</h1>
<p id="demo">
JavaScript 能改变 HTML 元素的内容。
</p>
<script>
function myFunction()
{
x=document.getElementById("demo"); // 找到元素
x.innerHTML="Hello JavaScript!"; // 改变内容
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>
</body>
</html>
运行结果：
在上面的document.getElementByld(“some id”)这个方法是HTML DOM中定义的。
DOM全称为Document Object Model，翻译成中文为文档对象模式，适用于访问HTML元素的正式W3C标准。
4、JavaScript：改变HTML图像
运行结果：
在上面所演示的实例中，图片放在与HTML文档同一个文件的image文件中，因此路径为image/pic_buloff.gif。
上面示例中的代码codeelement.src.match("bulbon") 意味着检索<img id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180"> 里的src属性的值是否包含字符串bulbon，如果存在字符串bulbon，则图像SRC将更新为bulboff.gif。如果字符串bulbon不匹配，SRC将更新为bulbon.gif。
5、JavaScript：改变HTML样式
更改HTML元素的样式是更改HTML属性的一种变体。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>miuku</title>
</head>
<body>
<h1>我的第一段 JavaScript</h1>
<p id="demo">
JavaScript 能改变 HTML 元素的样式。
</p>
<script>
function myFunction()
{
x=document.getElementById("demo") // 找到元素
x.style.color="#ff0000"; // 改变样式
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>
</body>
</html>
运行结果：
6、JavaScript：验证输入
JavaScript可以常用于验证用户的输入。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Miuku</title>
</head>
<body>
<h1>我的第一段 JavaScript</h1>
<p>请输入数字。如果输入值不是数字，浏览器会弹出提示框。</p>
<input id="demo" type="text">
<script>
function myFunction()
{
var x=document.getElementById("demo").value;
if(x==""||isNaN(x))
{
alert("不是数字");
}
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>
</body>
</html>
运行结果：
说明：Java和JavaScript无论是在概念上还是在设计上两种完全不同的语言，且Java是更复杂的编程语言。
ECMA-262是JavaScript标准的官方名称。
以上就是关于大数据编程入门：JavaScript输出的全部内容了，希望这篇文章可以帮助到大家~
取元素偏移量
获取标签
示例
获取标签元素
示例
获取表单元素属性
示例
设置自定义属性
示例
添加和删除元素
改变 HTML 元素
获取元素偏移量
object.offsetLeft：元素距离leftBody多少；
object.offsetTop：元素距离topBody多少；
获取标签
object.getElementById：通过ID获取元素；
object.getElementsByTagName：通过标签获取元素；
object.getElementsByName：通过name获取元素；
object.getElementsByClassName：通过class获取元素；
object.querySelector：通过选择器获取元素,只返回第一个；
object.querySelectorAll：通过选择器获取元素,返回所有；
示例
document.getElementById('cce') // 通过id来获取元素;
document.getElementsByClassName('cce') // 通过class来获取元素;
document.getElementsByTagName('div') // 通过标签来获取元素;
document.querySelector('.cce') // 通过选择器来获取元素,只返回第一个;
document.querySelectorAll('#cce') // 通过选择器来获取元素,返回所有;
获取标签元素
innerHTML:找到标签下面的标签包括文本；
innerText/textContent:找到标签下面的文本,他们两个的用法是一样的，只不过有的浏览器不支持，现在一般用innerTEXT；
示例
document.getElementById('cce').innerTEXT='cce';
获取表单元素属性
value：用于大部分表单元素的内容获取(option除外)；
type：可以获取input标签的内心(输入框或复选框等)；
disabled：禁用属性；
checked：复选框选中属性；
selected：下拉菜单选中属性；
示例
object.getElementById('id').disabled=true/false
object.getElementById('id').checked=true/false
object.getElementById('id').selected=true/false
设置自定义属性
getAttribute：获取自定义属性；
setAttribute：设定自定义属性；
removeAttribute：移除自定义属性；
示例
object.getAttribute('cce')
object.setAttribute('cce',18)
object.removeAttribute('cce')
添加和删除元素
document.createElement(element)：创建HTML元素；
document.removeChild(element)：删除HTML元素；
document.appendChild(element)：添加HTML元素；
document.replaceChild(element)：替换HTML元素；
document.write(text)：写入HTML输出流；
改变 HTML 元素
element.innerHTML=new html content：改变元素的inner HTML；
element.attribute=new value：改变HTML元素的属性值；
element.setAttribute(attribute, value)：改变HTML元素的属性值；
element.style.property=new style：改变HTML元素的样式；
avaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
JavaScript 显示数据
JavaScript 可以通过不同的方式来输出数据：
使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。
使用 window.alert()
你可以弹出警告框来显示数据：
实例
nbsp;html>
我的第一个页面
我的第一个段落。
操作 HTML 元素
如需从 JavaScript 访问某个 HTML 元素，您可以使用 document.getElementById(id) 方法。
请使用 “id” 属性来标识 HTML 元素，并 innerHTML 来获取或插入元素内容：
实例
nbsp;html>
我的第一个 Web 页面
"demo">我的第一个段落
以上 JavaScript 语句（在 标签中）可以在 web 浏览器中执行：
document.getElementById(“demo”) 是使用 id 属性来查找 HTML 元素的 JavaScript 代码 。
innerHTML=“段落已修改。” 是用于修改元素的 HTML 内容(innerHTML)的JavaScript 代码。
在本教程中
在大多数情况下，在本教程中，我们将使用上面描述的方法来输出：
上面的例子直接把 id=”demo” 的
元素写到 HTML 文档输出中：
写到 HTML 文档
出于测试目的，您可以将JavaScript直接写在HTML 文档中：
实例
nbsp;html>
我的第一个 Web 页面
我的第一个段落。
Fri Apr 22 2022 16:20:12 GMT+0800 (中国标准时间)
请使用 document.write() 仅仅向文档输出写内容。
如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖。
实例
nbsp;html>
我的第一个 Web 页面
我的第一个段落。
"MYFUNCTION()">点我
写到控制台
如果您的浏览器支持调试，你可以使用 console.log() 方法在浏览器中显示 JavaScript 值。
浏览器中使用 F12 来启用调试模式， 在调试窗口中点击 “Console” 菜单。
nbsp;html>
我的第一个 Web 页面
实例 console 截图：
您知道吗?
程序中调试是测试，查找及减少bug(错误)的过程。
*请认真填写需求信息，我们会在24小时内与您取得联系。
