JavaScript基础功能代码实现

已于 2022-05-01 14:57:22 修改
阅读量1.8k 收藏 3
点赞数 5
分类专栏： JavaScript 前端 文章标签： javascript 前端 html js
于 2022-05-01 14:22:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhxzrd/article/details/124525568
版权

目录

HTML，CSS，JavaScript

基础代码实现

JavaScript：直接写入HTML输出流

JavaScript：改变HTML内容

JavaScript：对事件的反应

HTML，CSS，JavaScript

HTML定义网页的内容

CSS描述网页的布局

JavaScript控制网页的行为

JavaScript是脚本语言。

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

基础代码实现

JavaScript：直接写入HTML输出流

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>JavaScript</title> 
</head>
<body>
<script>
    document.write("<h2>这是标题</h2>");
    document.write("<p>这是段落。</p>");
</script>
</body>
</html>

实例（输出时间）

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>JavaScript</title> 
</head>
<body>
<h3> Web 页面输出时间</h3>
<script>
document.write(Date());
</script>	
</body>
</html>

JavaScript：改变HTML内容

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

实例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>JavaScript</title> 
</head>
<body>

<h2>这里是标题</h2>
<p id="demo">这里是段落。</p>
<script>
document.getElementById("demo").innerHTML="段落已被修改。";
</script>

</body>
</html>

 

JavaScript：对事件的反应

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>JavaScript</title> 
</head>
<body>
<button type="button" onclick="alert('登陆成功')">登录</button>
</body>
</html>

实例

Function()保存在名为 "js.js" 的外部文件中。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>JavaScript</title> 
</head>
<body>
<p id="demo">登录失败</p>
<button type="button" onclick="Function()">重试</button>
<script src="js.js"></script>
	
</body>
</html>

点击重试后

大菠萝学长
关注
  • 5
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
JS基础及编写第一个JS程序
Dimples_54的博客
08-26 1367
1.导入JavaScript标签 script type=“text/javascript”>script> 2.在标签中间写js代码 alert(“hello world!”) ; document.write(“亲，我在页面上，跟alert不一样噢！”); console.log(“我是在控制台打印的, 以后常用我！”); 3.标签 script标签可以出现多次, 且可以
JavaScript实现邮箱后缀提示功能的示例代码
10-17
6. 代码优化：在实现邮箱后缀提示功能的过程中，除了实现基础功能外，还需要考虑代码的优化，例如如何快速地从后缀列表中筛选出与用户输入匹配的后缀，以及如何优化用户的体验，例如当用户输入特定字符（如@）时，仅...
javascript基础代码
weixin_37565521的博客
12-27 889
菜鸟教程(runoob.com) JavaScript 能够直接写入 HTML 输出流中： 减少数据的支出 处于出粗 document.write(“这是一个标题”); document.write(“这是一个段落。”); document.write(“好好学习，天天向上”); function addText(){ x=document.getElementById(...
Web前端：JavaScript最强总结 附详细代码 （带常用案例！）_javascript在前端的应用
2401_85122999的博客
06-11 617
/199.99//1024//128console.log(parseFloat(“10年”));//10console.log(parseFloat(“今天是8号”));//NaN//66//199//1024//128console.log(parseInt(“10年”));//10console.log(parseInt(“今天是8号”));
javascript基础代码---基础例子code
wenmin1987的博客
12-19 268
1.解决js阻塞问题的代码--defer       &lt;!--defer属性的使用             1.异步加载js文档，不会阻塞UI的渲染             2.等待页面的对象构建完成后，按照出现的顺序执行。             3.适用于外部js文件           --&gt;       a.js：           var sum=0;           ...
JavaScript基础整理（配代码及注释）
香菜的博客
02-21 2275
1. 变量 1.1 变量基础 <script> //1.声明了一个age的变量 var age; //2.赋值 把值存入到这个变量中 age = 18; //3.输出结果 console.log(age); //4.变量的初始化(声明一个变量并赋值) var my = "香菜yyds!"; console.log(my); //我是分割
js功能实现
影分身的专栏
11-02 492
左边补零 // 不足5位左边补零 (Array(5).join('0') + 100).slice(-5)
纯javascript代码实现计算器功能(三种方法)
10-23
在本文中，我们将探讨如何仅使用JavaScript代码实现一个计算器的功能。这种计算器可以应用于多个场景，包括但不限于装修预算计算、贷款利率计算等实际工作领域。以下是使用纯JavaScript实现计算器功能的三种方法。 ...
基于javascript实现日历功能原理及代码实例
10-15
在探讨如何使用JavaScript来实现一个日历功能之前，首先要了解日历的基本结构和显示原理。一个标准的日历通常包括年份、月份、星期以及天数。传统的日历布局通常是通过表格或者列表的排列组合来完成的，包括年份与...
javascript实现计算器功能
10-15
文章中虽然没有提供完整的JavaScript代码，但是通过上述知识点的梳理，我们可以根据计算器的功能需求，编写相应的JavaScript代码来实现具体的功能。此外，文章还特别强调了两个关键点：除零操作的特殊处理以及小数...
JavaScript倒计时功能实现指南：从基础到高级应用
最新发布
07-07
本文提供了一个全面的 JavaScript 倒计时功能实现指南，从基础的实现到高级应用技巧，旨在帮助开发者掌握如何在网页中创建动态和互动的倒计时效果。通过实际的代码示例和详细的步骤说明，读者可以快速学会并应用这些...
JavaScript基础和实例代码
03-20
JavaScript电子书，包括了JavaScript的大部分知识，可以帮助读者快速入门。内容如下： 第1章 JavaScript语言概述 1.1 JavaScript是什么 1.1.1 JavaScript简史 1.1.2 JavaScript有何特点 1.2 JavaScript能做什么 1.2.1 表单数据合法性验证 1.2.2 页面特效 1.2.3 交互式菜单 1.2.4 动态页面 1.2.5 数值计算 1.3 JavaScript编程起步 1.3.1 “Hello World！”程序 1.3.2 选择JavaScript脚本编辑器 1.4 如何引入JavaScript脚本代码 1.4.1 通过与标记对引入 1.4.2 通过标记的src属性引入 1.4.3 通过JavaScript伪URL引入 1.4.4 通过HTML文档事件处理程序引入 1.5 嵌入JavaScript脚本代码的位置 1.5.1 在与标记对之间放置 1.5.2 在与标记对之间放置 1.5.3 在两个标记对之间混合放置 1.6 选择合适的浏览器 1.7 处理不支持JavaScript脚本的情况 1.7.1 使用标记对直接屏蔽法 1.7.2 使用和标记对给出提示信息 1.8 JavaScript的实现基础 1.8.1 ECMAScript 1.8.2 DOM 1.8.3 BOM 1.9 客户端与服务器端脚本 1.10 JavaScript与JScript、 VBScript 1.11 JavaScript与Java、Java applet 1.12 JavaScript的未来如何 1.13 本章小结 第2章 JavaScript语言入门 2.1 编程准备 2.1.1 编程术语 2.1.2 脚本执行顺序 2.1.3 大小写敏感 2.1.4 空白字符 2.1.5 分号 2.1.6 块 2.2 数值类型 2.2.1 整型和浮点数值 2.2.2 八进制和十六进制 2.3 变量 2.3.1 变量标识符 2.3.2 变量申明 2.3.3 变量作用域 2.4 弱类型 2.5 基本数据类型 2.5.1 Number型 2.5.2 String型 2.5.3 Boolean型 2.5.4 Undefined型 2.5.5 Null型 2.5.6 Function型 2.6 组合类型 2.6.1 Array型 2.6.2 Object型 2.7 运算符 2.7.1 赋值运算符 2.7.2 基本数学运算符 2.7.3 位运算符 2.7.4 位移运算符 2.7.5 自加和自减 2.7.6 比较运算符 2.7.7 逻辑运算符 2.7.8 逗号运算符 2.7.9 空运算符 2.7.10 ?...:运算符 2.7.11 对象运算符 2.7.12 typeof运算符 2.7.13 运算符优先级 2.8 核心语句 2.8.1 基本处理流程 2.8.2 if条件假设语句 2.8.3 switch流程控制语句 2.8.4 for循环语句 2.8.5 while和do-while循环语句 2.8.6 使用break和continue进行循坏控制 2.8.7 with对象操作语句 2.8.8 使用for…in进行对象循坏 2.8.9 含标签的语句 2.9 函数 2.9.1 函数的基本组成 2.9.2 全局函数与局部函数 2.9.3 作为对象的函数 2.9.4 函数递归调用 2.9.5 语言注释语句 2.9.6 函数应用注意事项 2.10 本章小结 第3章 JavaScript事件处理 3.1 什么是事件 3.2 HTML文档事件 3.2.1 事件捆绑 3.2.2 浏览器事件 3.2.3 HTML元素事件 3.2.4 IE扩展的事件 3.3 JavaScript如何处理事件 3.3.1 匿名函数 3.3.2 显式声明 3.3.3 手工触发 3.4 事件处理器的返回值 3.5 事件处理器设置的灵活性 3.6 现代事件模型与Event对象 3.7 IE4中的Event对象 3.7.1 对象属性 3.7.2 事件上溯 3.7.3 阻止事件上溯 3.7.4 事件改向 3.8 NN4中的Event对象 3.8.1 对象属性 3.8.2 事件捕获 3.8.3 关闭事件捕获 3.8.4 事件传递 3.9 DOM的解决之道
JS功能实现
WJLSH123的博客
07-29 400
开发中遇到的一些有用的功能
JavaScript代码基础
mengStudents的博客
11-30 329
javascript函数操作
js基础代码
远行的博客
06-20 3653
文章目录DOM文档对象模型js获取iframe里面的html DOM文档对象模型 document —一个html文件就是一个文档 object -----每个标签都是对象（如window–>html，–>head，body，p，span） model -----对象之间的关系（标签与标签之间是有关系的）想族谱一样，或者像一颗树一样。有根，有叶子，有结点（文档的每个...
js 基础代码
m0_59617857的博客
09-23 112
【代码】js 基础代码。
javascript 基础代码
flyhelloword的博客
04-20 791
1、基础判断 function isUndef(v) { return v === undefined || v === null } function isDef(v) { return v !== undefined && v !== null } function isTrue(v) { return v === true } function isF...
JavaScript验证与功能实现代码集合
"这是一份关于JavaScript的学习笔记，涵盖了各种实用的JS代码示例，包括验证类、功能类等模块，适合初学者和有一定基础的开发者参考学习。" 在这份JavaScript学习笔记中，作者整理了一系列常用的功能和验证方法，...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值