#JavaScript学习日记01

最新推荐文章于 2024-09-11 17:09:49 发布
最新推荐文章于 2024-09-11 17:09:49 发布
阅读量69 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47741303/article/details/115374008
版权

JavaScript用法
<body> 中的 JavaScript

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>body 中的 JavaScript</title>
</head>
<body>
	
<p>
JavaScript 能够直接写入 HTML 输出流中：
</p>
<script>
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落。</p>");
</script>
<p>
您只能在 HTML 输出流中使用 <strong>document.write</strong>。
如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。
</p>
	
</body>
</html>

<head> 中的 JavaScript

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title><body> head中的 JavaScript</title> 
<script>
function myFunction(){
	document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>
</head>
<body>
	
<h1>我的 Web 页面</h1>
<p id="demo">一个段落。</p>
<button type="button" onclick="myFunction()">点击这里</button>
	
</body>
</html>

外部的 JavaScript

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>外部的 JavaScript</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="6.js"></script>
	
</body>
</html>

function myFunction()
{
    document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}

JavaScript 输出
使用 window.alert()

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用 window.alert() 弹出警告框</title>
</head>
<body>
	
<h1>我的第一个页面</h1>
<p>我的第一个段落。</p>
<script>
window.alert(5 + 7);
</script>
	
</body>
</html>

效果图在这里插入图片描述JavaScript 语法
JavaScript 字面量
在编程语言中，一般固定值称为字面量，如 3.14。
数字（Number）字面量

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数字字面量</title>
</head>
<body>
	<!--可以是整数或者是小数，或者是科学计数(e)-->
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 123e5;
</script>

	
</body>
</html>

字符串（String）字面量

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>字符串字面量</title> 
</head>
<body>
	<!--可以使用单引号或双引号-->
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = '江南无所有，聊赠一枝春';
</script>
	
</body>
</html>

表达式字面量

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>表达式字面量</title> 
</head>
<body>
	
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 7 * 10;
</script>
	
</body>
</html>

JavaScript 对象
对象定义

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>对象定义</title> 
</head>
<body>

<p>创建 JavaScript 对象</p>
<p id="demo"></p>
<script>
var person = {
    firstName : "Malian",
    lastName  : "Doe",
    age       : 50,
    eyeColor  : "blue"
};
document.getElementById("demo").innerHTML =
	person.firstName + " 现在 " + person.age + " 岁。";
</script>

</body>
</html>

对象属性
访问对象属性

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>对象属性</title> 
</head>
<body>

<p>
有两种方式可以访问对象属性：
</p>
<p>
你可以使用 .property 或 ["property"].
</p>
<p id="demo"></p>
<script>
var person = {
    firstName : "John",
    lastName : "Doe",
    id : 5566
};
document.getElementById("demo").innerHTML =
	person.firstName + " " + person.lastName;
	<!--第二种：document.getElementById("demo").innerHTML =person["firstName"] + " " + person["lastName"];-->
</script>

</body>
</html>

对象方法
创建

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>创建对象方法</title> 
</head>
<body>

<p>创建和使用对象方法。</p>
<p>对象方法作为一个函数定义存储在对象属性中。</p>
<p id="demo"></p>
<script>
var person = {
    firstName: "Malian",
    lastName : "Doe",
    id : 5566,
    fullName : function() 
	{
       return this.firstName + " " + this.lastName;
    }
};
document.getElementById("demo").innerHTML = person.fullName();
</script>
	
</body>
</html>

使用

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>使用用对象方法</title> 
</head>
<body>

<p>使用对象方法</p>
<p>对象方法是一个函数定义,并作为一个属性值存储。</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
var person = {
    firstName: "Malian",
    lastName : "Doe",
    id : 5566,
    fullName : function() 
	{
       return this.firstName + " " + this.lastName;
    }
};
document.getElementById("demo1").innerHTML = "不加括号输出函数表达式："  + person.fullName;
document.getElementById("demo2").innerHTML = "加括号输出函数执行结果："  +  person.fullName();
</script>
	
</body>
</html>
容我想想ing
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript学习日记一
qq_41784284的博客
11-10 271
JavaScript学习日记一 alert("perti生成完成");//弹出文本框，提示 JavaScript中prompt()函数的用法。 定义和用法 prompt()方法用于显示一个带有提示信息，并且用户可以输入的对话框。 语法 1 prompt(text,defaultText); 参数 描述 text 可选。要在对话框中显示的提示信息（纯文本） defaultText 可选...
JavaScript日记（十二）
Tml的博客
05-08 345
键盘事件、BOM（浏览器对象模型）
JavaScript学习日记
weixin_44032244的博客
09-15 69
当在块中声明变量时，let可以将变量的作用域限制在块内，var则不行。1、函数内声明变量时，使用var与let相似（作用域均为函数内）2、块外声明时，var和let也相似（均为全局变量）
Javasript-Journey:javascript学习日记
05-29
**JavaScript学习日记** 在编程的世界里，JavaScript 是一种不可或缺的语言，尤其在Web开发领域，它扮演着至关重要的角色。这个名为“Javasript-Journey”的项目，是一份详尽的JavaScript学习日记，旨在帮助开发者...
javascript和jquery学习笔记
11-30
javascript和jquery的学习笔记，自己做的大家可以下载浏览，很不错
JavaScript日记
07-18
就是记录学习javascript的日记了
C++学习日记：关于我决定开始学习C++的那些事
qq_45562973的博客
07-15 264
而判断中的switch语句，也是让我眼前一亮我曾数次在Python中用if-else来实现此判断，但显然，switch做得更快、更有效（但由于我对C++数据类型实在是使用不惯，还是传统if-else更适合目前的我使用）。这也许是由于这些内容过于繁复，但我认为更多的是海量的知识令我的兴趣渐渐磨灭。我一直认为，输入输出乃是一个程序的灵魂，而C++的输入输出无疑是出类拔萃——至少令我满意。再加上那看上去毫无意义的变量声明，以及各种复杂不说还带有修饰符的数据类型，我不尽一阵晕眩（还有存储类，那究竟有啥用啊）。...
软件著作权申请教程（超详细）（2024新版）软著申请
m0_75269526的博客
09-09 2029
软件著作权，软著，软著申请，软用户使用手册：提交登记软件的任何一种文档的连续的前30页和连续的后30页，每页不少于30行。如果是多人合作开发著作权人不是一个人的话，还需要准备一份合作开发协议。首先我们需要在官网里面注册一个账号，并且完成实名认证，一般是注册【个人】的身份。合作开发协议书：这个如果是著作权人有多个（多个人一起开发）就需要提供这个材料。在填报完成之后需要打印一个签章页签字（如果不是个人需要盖章）注册完成后点击下面进行登记，如果没有实名需要先实名认证（源代码：源程序前连续的30页和后连续的30页。
js中【Worker】相关知识点详细解读
2301_79858914的博客
09-11 530
JavaScript 中的 Worker 是一个可以在后台线程中运行代码的 API，这样可以避免主线程（通常是 UI 线程）被阻塞。使用 Worker 时，JavaScript 可以在多线程环境中工作，解决了单线程的瓶颈问题。通常情况下，JavaScript 是单线程的，也就是所有的代码（包括 DOM 操作和事件处理等）都在同一个线程里执行。如果某段代码需要大量计算，或者运行时间过长，会阻塞整个页面，导致界面卡顿甚至崩溃。Worker提供了一种将复杂或耗时的任务分配到后台线程执行的方法。
Module “console“ has been externalized for browser compatibility.
Alvin的博客
09-07 276
在 Vue 3.5.3 中使用 Vite 作为构建工具时，如果你尝试直接从。模块外部化了，这意味着它不会在客户端环境中暴露。去除导入 error 函数的代码。函数，会遇到一个错误，提示。这是因为 Vite 默认将。Vue 3.5.3 中。
echarts.js+china.js实现中国地图各省数据案例
qq_58258855的博客
09-11 312
实现中国地图各省数据案例
JS笔记
2201_76100326的博客
09-11 574
javascript中的对象分为3种：自定义对象，内置对象，浏览器对象 JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。在 JavaScript 中，对象是拥有属性和方法的数据。属性是与对象相关的值。方法是能够在对象上执行的动作。.关键词（）
vue3中动态引入本地图片的两种方法
最新发布
haodanzj的博客
09-11 168
动态在本地引入图片
手写 Vue Router 中的 Hash 模式和 History 模式
书呆子ITme
09-06 1053
通过手写简化版的Vue Router，我们深入理解了Hash 模式和History 模式的实现原理。Hash 模式依赖于hashchange事件，而 History 模式依赖于pushState和API。两种模式各有优缺点，可以根据项目需求选择合适的路由模式。Hash 模式：简单、无需服务器配置，但URL不美观，对SEO不友好。URL美观且符合SEO要求，但需要服务器支持。
【vite-plugin-vue-layouts】关于 vue-layouts 布局插件的使用和注意事项
weixin_41899098的博客
09-06 1100
环境：vue3 + vuetify3 + unplugin-vue-router是怎么创建这个项目的：选择它推荐的设置（Recommend）
js实现动态生成不固定数量的气泡
丁哒哒的博客
09-10 211
【代码】js实现动态生成不固定数量的气泡。
大数据开发shell学习日记
09-02
大数据开发中的shell学习日记可以包括以下内容： 1. 学习Linux命令和shell脚本：作为大数据开发者，在Linux下进行开发是常见的，因此了解一些基本的Linux命令和编写shell脚本的技能是必备的。 2. 学习Django：Django...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值