JavaScript简介-＜script＞、document.getElementById、JavaScript事件、JavaScript字符串、JavaScript数据类型

最新推荐文章于 2023-09-18 11:34:59 发布
最新推荐文章于 2023-09-18 11:34:59 发布
阅读量414 收藏 2
点赞数
分类专栏： 前端 JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45876795/article/details/108560292
版权
这篇博客介绍了JavaScript的基本概念，包括其作为脚本语言的角色、如何在HTML中使用JavaScript以及JavaScript的主要功能。内容涵盖JavaScript的插入、事件响应、改变HTML内容的方法如document.getElementById，以及数据类型的转换。此外，还讲解了var、let和const的区别。
摘要由CSDN通过智能技术生成

JavaScript简介

  • JavaScript是脚本语言。

  • JavaScript 是一种轻量级的编程语言。

  • JavaScript 是可插入 HTML 页面的编程代码。

  • JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

  • JavaScript：直接写入HTML输出流

    document.write("<h1>这是一个标题</h1>");
    • 只能在 HTML 输出中使用 document.write。如果您在文档加载后使用该方法，会覆盖整个文档。

  • JavaScript：对事件的反应

    <button type="button" onclick="alert('欢迎!')">点我!</button>
    • alert() 函数对于代码测试非常方便。
    • 在点击 点我！ 按钮时，调用onclick的函数。

  • JavaScript：改变HTML内容

    x=document.getElementById("demo");  //查找元素
x.innerHTML="Hello JavaScript";    //改变内容

    document.getElementById方法是 HTML DOM(Document Object M

最低0.47元/天 解锁文章
yanggfann
关注
专栏目录
JavaScript教程带你快速入门
OIqng的博客
09-03 2315
JavaScript 简介 JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的高级编程语言。 JavaScript 是基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。 JavaScript 用法 HTML 中的脚本必须位于 标签之间。 脚本可被放置在 HTML 页面的 和 部分中。 <script>标签 <script> 和 </script> 会告诉 JavaScript 在何处开始和结
学习document.getElementById()的使用
chuangnzh的专栏
11-12 2157
定义和用法getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。语法document.getElementById(id)说明HTML DOM 定义了多种查找元素的方法，除了 getElementById() 之外，还有 getElementsByName() 和 getElementsByTagName()。不过，如果您需要查找文档中的一个特定
document.getElementBy
lining213的专栏
01-04 926
<br />document.getElementById<br />document.getElementByName<br />document.getElementByTagName
四个document.getElement(s)By
qq_35698009的博客
12-26 2066
body> document.getElementsByName() 是通过名字获取元素，返回的是数组 document.getElementsByTagName() 是通过标签名获取元素，返回的是数组 document.getElementsByClassName() 是通过类名获取元素，返回的事数组 document.getElementById() 是通过ID获取元素，返回的一个对象，因为I
document.getElementByName("type").value不能使用，没反应
LI_AINY的博客
05-09 2162
改一个老项目，使用的是原生的js，使用getElementByName()一直没有获取到想要的值，仔细排查发现是单词错误 getElementById() getElementsByName() getElementsByTagName() var x = document.getElementsByName("type").value; //此时的x就是页面中所有name="type"所...
document.getElementById(), getElementsByname(),getElementsByClassName(),getElementsByTagName()
快乐de馒头
03-24 3301
window.onload=function(){ //找到指定id属性值得对象 返回找到的一个对象 var id=document.getElementById("uid"); //找到指定name属性的对象，返回数组 var arr=document.getElementsByName("user"); //找到指定标签对象 ,返回数组 var
自动点击事件
m0_59586754的博客
09-18 190
【代码】自动点击事件。
javascript typeof id==='string'?document.getElementById(id):id解释 <font color=red>原创</font>
10-21
如果`id`的类型是字符串（string），则代码会调用`document.getElementById(id)`函数来获取页面上ID属性匹配`id`参数的DOM元素；如果`id`不是字符串类型，那么直接返回`id`参数本身。 这个简短的函数设计可以使得...
javascript typeof id===’string’?document.getElementById(id):id解释 原创
11-26
如果 `id` 不是字符串，三元运算符的第二部分 `id` 会被返回，这意味着 `id` 本身将被直接使用，可能是已存在的DOM元素或其他非字符串类型的值。 现在，我们来看一下提供的两个函数： ```javascript function $(id)...
1.17 JavaScript高级-JSON和DOM操作.pdf
最新发布
10-27
在 JavaScript 中，可以使用 `JSON.stringify()` 方法将 JavaScript 对象或数组转换为 JSON 字符串，并使用 `JSON.parse()` 方法将 JSON 字符串解析为 JavaScript 原生值。 5. JSON 序列化选项 在 `JSON.stringify...
（4）document：getElementById、getElementByName、getNodeByTagName
FixedStar 的博客
08-06 3267
document对象：该对象将标记型文档进行封装。 该对象的作用：是对可以标记型文档进行操作 最常见的操作是：想要实现动态效果，需要对节点操作，那么要先获取到这个节点操作，那么要先获取到这个节点。 所以document对象最常见的操作就是获取页面中的节点
【JavaScript】JavaScript获取HTML DOM 元素节点
长生的梦呓
12-16 210
JavaScript获取HTML DOM 元素节点 获取节点
document.getElementBy系列方法获取不到对象
weixin_44848356的博客
02-13 3293
getElementById取不到对象 在浏览器进行文档解析时是有顺序的，当页面加载完毕之前，或者说在相应的DOM对象加载完毕之前，对应的对象是不能获取到的。 看下面代码： <script> var temp = document.getElementById("div"); alert(temp); </script> <body> <d...
【JavaScript】——document.getElementsByName()、document.getElementById()、document.getElementsByTagName()
严文文 Chris
07-03 1153
ocument.getElementsByName()   是根据控件名称获取这个控件对象，因为控件名称可以相同，返回的是一个对象数组。 document.getElementById()     是根据控件ID获取这个控件对象，因为控件ID唯一，返回的是一个对象。 document.getElementsByTagName() 是根据控件TAG获取这个控件对象，返回的是一个对象数组。 例如： H...
DOM基础：事件、获取元素、操作元素
m0_63669414的博客
08-14 1695
DOM:文档对象模型（Document Object Model），是W3C推荐的处理HTML或XML的标准编程接口。通过这些DOM接口可以改变网页的内容、结构和样式。自定义属性目的：为了保存并使用数据，有些数据可以保存到页面而不用保存到数据库中。...
javascript document.getElementsByName方法 操作radio
limlimlim的专栏
12-19 8060
http://www.w3.org/1999/xhtml">                 //遍历所有Radio的Value            function onclickme() {             var radios = document.getElementsByName("gender");             /*
document.getElementByName()的用法
热门推荐
雨林
09-12 6万+
document.getElementByTagName()的用法，用来取得相同name名称的内容 http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml">
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title></title> </head> <body> <script type="text/javascript"> function getPrice() { alert("getPrice()"); var prices =document.forms["tt"]["price"].value var prices =document.getElementById("price").value; var parr2=prices.split(","); var sum = 0; var len =parr2.length; for(var i=0;i<len;i++){ sum += parseInt(parr2[i]);} document.forms["tt"]["sum"].value=sum; } </script> <tr> <td>请输入5本书的价格，用逗号隔开</td> <br><br><br> <td><input type="text" id="price"/></td> <td><input type="button" value="总计" οnclick="getPrice()"/></td> <td><input type="text" name="sum" value=""/></td> </tr> <!--. 输入表单，输入五本书价格，自动计算价格总和 .--> <!--. <tr> <td>输入书本价格：</td> <td><input type="text" name="price" value=""/></td> <td><input id="" type="button" name="submit" value="和"/></td> <td><input type="text" name="sum" value=""/></td> </tr>.--> </body> </html>
03-26
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>书本价格总和计算器</title> </head> <body> <script type="text/javascript"> function getPrice() { var prices = document.getElementById("price").value; // 获取输入框中的价格值 var parr2 = prices.split(","); // 将字符串按逗号拆分为数组 var sum = 0; var len = parr2.length; for (var i = 0; i < len; i++) { sum += parseFloat(parr2[i]); // 将字符串转为浮点数并累加 } document.getElementById("sum").value = sum.toFixed(2); // 将计算结果写入总价输入框 } </script> <table> <tr> <td>请输入5本书的价格，用逗号隔开：</td> <td><input type="text" id="price"/></td> <td><input type="button" value="总计" onclick="getPrice()"/></td> <td><input type="text" id="sum"/></td> </tr> </table> </body> </html>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值