初学JavaScript小结

最新推荐文章于 2024-10-15 09:57:04 发布
最新推荐文章于 2024-10-15 09:57:04 发布
阅读量79 收藏 1
点赞数
文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wyh2001ok/article/details/131346378
版权

JavaScript自学小结

一、JavaScript 简介

JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备

二、 JavaScript 用法

1.1 HTML里的JavaScript

在HTNML中的位置：

  • HTML 中的 JavaScript 脚本代码必须位于 <script> 与</script>标签之间。
  • JavaScript 脚本代码可被放置在 HTML 页面的<body>和<head>部分中。

<head>中的JavaScript函数:

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
    document.getElementById("demo").innerHTML="看看我在哪？";
}
</script>
</head>
<body>
<h1>我的 Web 页面</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">尝试一下</button>
</body>
</html>

<body> 中的 JavaScript 函数：

<!DOCTYPE html>
<html>
<body>
<h1>我的 Web 页面</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">尝试一下</button>
<script>
function myFunction()
{
    document.getElementById("demo").innerHTML="我现在又在哪？";
}
</script>
</body>
</html>

2.1外部的 JavaScript

把脚本保存到外部文件中。
外部 JavaScript 文件的文件扩展名是 .js。
如需使用外部文件，请在<script>标签的 “src” 属性中设置该 .js 文件：

<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>

myScript.js 文件代码如下：

function myFunction()
{
    document.getElementById("demo").innerHTML="现在我在这";
}

三、JavaScript 输出

注意： JavaScript 没有任何打印或者输出的函数。
JavaScript 可以通过不同的方式来输出数据：

  • 使用 window.alert() 弹出警告框
  • 使用 document.write() 方法将内容写到 HTML 文档中
  • 使用 innerHTML 写入到 HTML 元素
  • 使用 console.log() 写入到浏览器的控制台

1.1使用 window.alert()

弹出警告框显示数据：

<!DOCTYPE html>
<html>
<body>

<h1>我的第一个页面</h1>
<p>我的第一个段落。</p>

<script>
window.alert("下次注意！");
</script>

</body>
</html>

结果如下：
在这里插入图片描述

四、JavaScript 语法

1.1 JavaScript 字面量

含义：在编程语言中，一般固定值称为字面量，如 3.14。

类型示例
数字（Number）字面量3.14、1001、123e5
字符串（String）字面量“Xiao Wang”
表达式字面量5 * 20
数组（Array）字面量[5, 20, 1, 3, 1, 4]
对象（Object）字面量{firstName:“John”, lastName:“Doe”, age:50, eyeColor:“blue”}
函数（Function）字面量function myFunction(a, b) { return a * b;}

2.1 JavaScript 变量

JavaScript 使用关键字 var 来定义变量， 使用等号来为变量赋值：

var x, length

x = 5

length = 6

注意： 变量是一个名称，字面量是一个值。

3.1 JavaScript 操作符

3.1.1 JavaScript 算术运算符：
运算符描述例子y值x运算结果
+加法x=y+246
-减法x=y-253
*乘法x=y*236
/除法x=y/252.5
%取模（余数）x=y%251
++自增x=++y、x=y++66、7
–自减x=–y、x=y–44、3
3.1.2 JavaScript 赋值运算符

给定 x=10 和 y=5，下面的表格解释了赋值运算符：

运算符例子等同于运算结果
=x=yx=5
+=x+=yx=x+yx=15
-=x-=yx=x-yx=5
*=x*=yx=x*yx=50
/=x/=yx=x/yx=2
%=x%=yx=x%yx=0
3.1.3用于字符串的 + 运算符

将两字符串拼接起来：
实例

txt1="What a very";
txt2="nice day";
txt3=txt1+txt2;

结果：

What a verynice day
3.1.4对字符串和数字进行加法运算

两个数字相加，返回数字相加的和，如果数字与字符串相加，返回字符串.
实例：

x=5+5;
y="5"+5;
z="Hello"+5;

x,y, 和 z 输出结果为:

10
55
Hello5

JavaScript大部分语法与高级语言一样，就不多说了，下面说一些，它特有的

五、JavaScript JSON

1.1 简介

JSON 是用于存储和传输数据的格式。
JSON 通常用于服务端向网页传递数据 。

2.1 什么是 JSON

  • JSON 英文全称 JavaScript Object Notation
  • JSON 是一种轻量级的数据交换格式
  • JSON是独立的语言

3.1 JSON 语法规则

  • 数据为 键/值 对
  • 数据由逗号分隔
  • 大括号保存对象
  • 方括号保存数组

4.1 JSON 数据 - 一个名称对应一个值

JSON 数据格式为 键/值 对，就像 JavaScript 对象属性。
键/值对包括字段名称（在双引号中），后面一个冒号，然后是值：

"name":"Runoob"

5.1 JSON 数组

JSON 数组保存在中括号内。
就像在 JavaScript 中, 数组可以包含对象：

"sites":[
    {"name":"Runoob", "url":"www.runoob.com"}, 
    {"name":"Google", "url":"www.google.com"},
    {"name":"Taobao", "url":"www.taobao.com"}
]

6.1 JSON 字符串转换为 JavaScript 对象

通常我们从服务器中读取 JSON 数据，并在网页中显示数据。
简单起见，我们网页中直接设置 JSON 字符串 (你还可以阅读我们的 JSON 教程):
首先，创建 JavaScript 字符串，字符串为 JSON 格式的数据：

var text = '{ "sites" : [' +
'{ "name":"Runoob" , "url":"www.runoob.com" },' +
'{ "name":"Google" , "url":"www.google.com" },' +
'{ "name":"Taobao" , "url":"www.taobao.com" } ]}';

然后，使用 JavaScript 内置函数 JSON.parse() 将字符串转换为 JavaScript 对象:

var obj = JSON.parse(text);

最后，在你的页面中使用新的 JavaScript 对象：

var text = '{ "sites" : [' +
    '{ "name":"Runoob" , "url":"www.runoob.com" },' +
    '{ "name":"Google" , "url":"www.google.com" },' +
    '{ "name":"Taobao" , "url":"www.taobao.com" } ]}';
    
obj = JSON.parse(text);
document.getElementById("demo").innerHTML = obj.sites[1].name + " " + obj.sites[1].url;

7.1 相关函数

函数描述
JSON.parse()用于将一个 JSON 字符串转换为 JavaScript 对象。
JSON.stringify()用于将 JavaScript 值转换为 JSON 字符串

暂时了解的就这些，如果你想更深入

可以访问：
链接: 菜鸟Javascript 教程

wyh2001ok
关注
JavaScript初学小结
爱思考的萌爸
08-10 556
最近的几周花了很多时间学习JavaScript 基础，以为有C++, C#基础，学起来应该挺快的，实际上大相径庭，之前的C++， C#的概念先入为主，  让我在理解 JS的类和对象时困惑了很久，直到我读到 IBM一个工程师的一篇文章《全面理解面向对象的 JavaScript》和w3cschools的解读，才总算理清了一点头绪。现把自己理解的东西重新整理下，理个头绪。   1. JS的类型：
前端初学之JavaScript学习小结
qq_64133626的博客
11-18 370
下面是我在学习前端JavaScript时遇到的一些问题，在此分享一下，希望可以帮到自己和像自己一样迷茫和困惑的人。 一、return、continue、break的区别 break、return、continue可以跳出循环或者终止循环 1、break break 会使得整个程序终止执行或者包含了最内层的循环或者退出一个switch的循环。 由于它是用来终止循环或者跳出switch循环的，所以只有当它出现在这些语句时，才是合法的。 如果一个循环的终止条件非常复杂，那么使用break语句来实.
初学JavaScript&输出语句
程序员大腾的博客
07-12 471
前端三大件分别为：HTML、CSS、JavaScript。其中最重要的当属JavaScript。 虽然现在开发通常使用框架，但是这些基础的才最重要的，就像一座高楼不能没有稳固的地基一样。打好基础，走遍天下都不怕。JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。 即JavaScript 是一种编程语言，主要参与构建 Web 前端应用。 window.alert(); document.write(); console.log(); ...
初学JavaScript 的函数
程序员大腾的博客
07-16 199
Function可以用来创建函数，JavaScript中的所有函数，都是Function对象。JavaScript函数通过function关键词进行定义，其后是函数名和括号()。圆括号可包括由逗号分隔的参数function函数名(参数1,参数2,…){函数体;}例定义一个不带参数的函数fn//定义函数fnfunctionfn(){console.log("函数执行时的语句");}//调用函数fn();...
javascript难点小结
sinat_19385391的博客
08-26 3075
总是使用 === 比较符 使用 == 比较符可以让令人郁闷的bug消失于无形。它允许在 JavaScript花园 中有清楚解释的弱类型。使用严格的 === 比较符不会执行类型强制转换，从而能够严格地评估两个对象之间的差别。再说一遍，更多详细信息请参见 JavaScript花园。 var zeroAsAString = “0”; if (zeroAsAString == 0) { /...
JavaScript 基础知识小结
iteye_5130的博客
12-30 134
从今天开始第一次写博客   我是js初学者，我认为这些软件的学习只是看是不行的，我尽量会在一边学习做题的时候，一边把代码写一遍。 我一开始有个疑问，JavaScript 跟java 有什么关系 ？ 现navigator 在我知道了 他们的关系就是  雷锋与雷峰塔的关系 ：JavaScript原来叫livescript，在 Netscape 2正式发布前夕 Netscape 为了搭上媒体热炒...
前端初学JavaScript数据类型学习
前端水獭的博客
05-21 310
JS中的数据类型 虽然JS是弱类型语言，JS的变量声明的时候并不需要指定数据类型，但是在赋值上每一个数据是由类型的。 值得注意的是ES6之后，又基于以下的6中类型之外添加了一种新的类型：symbol 学习数据类型我们还常用typeof运算符，这个运算符可以再程序的运行阶段动态的获取变量的数据类型。使用的方法很简单：typeof 变量名 typeof运算符的运算结果是字符串，内容为： “undefined” “number” “string” “boolean” “object” “function”,6种结
JavaScript初学入门之构造函数
kongla
08-27 266
文章目录构造函数构造函数创建对象构造函数和对象区别new关键字执行过程遍历对象 构造函数 前面两种创建对象的方式一次只能穿创建一个对象 构造函数里面封装的是对象 构造函数就是把对象里面一些相同的属性和方法抽象出来进行封装到函数里面 构造函数创建对象 构造函数的语法格式 <script> function 构造函数名 () { this.属性 = 值; this.方法 = function() {} }
JavaScript 阶段小结
陌上花开，可缓缓归矣
12-07 1534
JavaScript 是一种脚本语言，主要用在浏览器中，实现对网页的文档对象的操作和一些用户交互动作的处理。李炎恢老师所讲的一百多集视频，对JavaScript进行了一次比较彻底的剖析，作为初学者感觉老师讲了好多的东西。这是缺乏全局观的表现，没有在全局上对JavaScript进行分析，只是一头扎进视频里不能自拔，所以才觉得知识琐碎，没有联系。但是对视频中琐碎的知识进行整理才发现： 　　Java
初识Javascript小结
10-23
初识JavaScript小结知识点整理： 1. JavaScript脚本位置：在HTML中，JavaScript代码可以被嵌入到页面的任意位置，通常位于标签内，或者标签的任意位置。不过，将脚本放在标签的底部是一个推荐的做法，这样可以确保...
javascript新手语法小结
12-10
JavaScript是Web开发中不可或缺的一部分，尤其对于初学者来说，掌握其基本语法至关重要。本文将针对JavaScript的新手语法进行总结，包括弹出对话框、获取系统时间、事件处理、循环、函数以及条件判断。 1. 弹出...
JavaScript初学者应注意的七个细节小结
10-28
标题中提到的知识点是"JavaScript初学者应注意的七个细节小结"，这里说明了JavaScript初学者在学习这门语言时需要注意的一些关键细节，这些细节对于提高代码质量、优化代码结构、加深对JavaScript特性的理解至关重要...
【JAVA开源】基于Vue和SpringBoot的高校学科竞赛平台
杨荧的CSDN博客
10-10 1465
教师功能有个人中心，题目类型管理，竞赛题库管理，竞赛类型管理，竞赛信息管理，报名信息管理，竞赛评分管理，参赛名单管理，晋级名单管理，获奖名单管理，竞赛总结管理，报销清单管理，成绩申诉管理，参赛信息管理，参赛信息管理，往年成绩管理，获奖情况管理。
React中的refs是什么？
Front end development engineer
10-10 381
React 的众多优点之一是它抽象了处理真实 DOM 的复杂性。现在，我们无需手动查询元素、绞尽脑汁思考如何为这些元素添加类又或者是添加样式等，也无需为浏览器兼容性而苦恼，只需编写组件并专注于用户体验即可。然而，仍然有一些情况（虽然很少！）我们需要访问实际的 DOM。而当涉及到实际的 DOM 时，最重要的是要理解并学习如何正确使用 ref 以及 ref 周围的一切。
【JavaScript】移动色块案例 实现一个可以拖动并且在拖动过程中会自动改变颜色的色块（JS 事件监听器）
m0_66584716的博客
10-11 1338
- **移动色块**：用户可以通过鼠标按住并拖动页面上的红色方块（`#blocks`）。当用户按下鼠标左键时，色块开始跟随鼠标的移动而移动；当用户释放鼠标左键时，色块停止移动。 - **显示当前位置**：随着色块的移动，其当前的屏幕坐标（相对于浏览器窗口）会被实时更新，并显示在页面底部左侧的位置显示区域（`#positionDisplay`）中。 - **自动变色**：一旦用户开始拖动色块，系统就会每隔300毫秒随机改变一次色块的颜色。颜色的变化是通过调用 `getRandomColor()` 函数生成一个
javascript中==和===有什么不同
qq_48763502的博客
10-09 448
这个运算符用于比较两个值是否相等，但会在必要时进行类型转换。当两个值的类型不同，JavaScript 会尝试将它们转换为相同的类型，然后再进行比较。
ECMAScript标准解析及其发展历史与技术演进
最新发布
qq_20245171的博客
10-15 503
ECMAScript（简称ES）是由ECMA国际（欧洲计算机制造商协会）制定的一种脚本语言规范。它是JavaScript、JScript等语言的基础，并为现代Web开发提供了强大的支持。ECMAScript标准不仅定义了语言的语法和语义，还涵盖了数据类型、对象模型和执行环境等内容，极大推动了JavaScript语言的发展。本文将全面介绍ECMAScript标准的起源、各个版本的演变、关键特性以及未来趋势，深入探讨其对Web开发及编程语言设计的影响。
JavaScript每日小结：深入理解Array对象
在本文档中，我们将深入探讨JavaScript中关于数组的基础知识和常用方法，这对于JavaScript初学者和进阶开发者都是十分有价值的参考资料。以下是对每个知识点的详细解释： 1. **数组常用方法** - `toString()` 方法...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

wyh2001ok

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值