3 JavaScript基础使用

已于 2023-04-24 17:25:06 修改
阅读量473 收藏 5
点赞数 7
分类专栏： ③《前端基础》 文章标签： javascript 前端 开发语言
于 2022-10-28 00:42:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Zinkse/article/details/127563882
版权

文章目录

📖博主介绍

个人主页： Zinksl
编程社区： Zinksl编程酒馆
个人格言： 想法落实的最佳时机就是现在！🏄

如果你 喜欢交流或热爱分享，欢迎加入编程社区或交流群 大家一起学习技术，交流心得，共同进步🚅

读前思考！

在使用之前要先明白2个问题：

  • 在哪里写（用）JavaScript代码？
  • 如何写JavaScript代码？

1 编写JavaScript的三类位置

1.1 写在HTML页面内的JavaScript

JavaScript作用于显示页，必然可以嵌在页面中，在HTML页面是通过写入的，代码写在两个标签之间；这种方式也叫【JavaScript的内嵌式】

嵌入HTML中的js示例:

<!DOCTYPE html>
<html>
  <head>
    <!-- 设置字符集 -->
    <meta charset="utf-8" />
    <!-- 页面标题 -->
    <title>hello word</title>
    <!-- js标签 -->
    <script type="text/javascript" >
      // 弹窗警告提示
      alert("hello word!");
      // 往页面中写入内容
      document.write("你好我是，小Z学长！");
      // 控制台打印内容
      console.log("我们一起学习JavaScript啊");
    </script>
  </head>
  <body>

  </body>
</html>

代码的执行顺序在默认情况下是由上往下逐条执行【在执行页面显示效果可以说明】

1.2 写在某个控件里的JavaScript

以下两个示例我们可以看出来，JavaScript代码也可以写入控件内部执行；这种方式叫【JavaScript的行内式】

JavaScript代码写入控件示例：

<!DOCTYPE html>
<html>
  <head>
    <!-- 设置字符集 -->
    <meta charset="utf-8" />
    <!-- 页面标题 -->
    <title>hello word</title>
  </head>
  <body>
    <!-- 点击按钮弹出警示框 -->
    <button οnclick=alert("嘿，点我就一起学习吧！") >谁敢点我试试！</button>
  </body>
</html>

JavaScript代码写入超链接示例：

<!DOCTYPE html>
<html>
  <head>
    <!-- 设置字符集 -->
    <meta charset="utf-8" />
    <!-- 页面标题 -->
    <title>hello word</title>
    <!-- js标签 -->
  </head>
  <body>
    <!-- 在超链接中写入JavaScript代码 -->
    <a href="JavaScript:alert('嘿，你还点')">再点我试试！</a>
    <a href="JavaScript:;">再点我试试！</a>
  </body>
</html>

1.3 单独文本里的JavaScript

单独JavaScript文档：

alert("我是外部JavaScript，你敢相信？");

HTML文档：

<!DOCTYPE html>
<html>
  <head>
    <!-- 设置字符集 -->
    <meta charset="utf-8" />
    <!-- 页面标题 -->
    <title>hello word</title>
    <!-- js标签 -->
    <!--  引入外部js代码 -->
    <script type="text/javascript" src="./js/firstJavaScript.js">
    </script>
  </head>
  <body>

  </body>
</html>

在HTML中通过script标签引入外部单独js的这种方式叫【外链式】

2 JavaScript怎么写呢

2.1 在知道如何写代码之前需要明白几个点：

（1）写js注意事项

①JavaScript严格区分大小写
②“;”标志JavaScript语句结束
③JavaScript忽略多个空格和换行[在代码间的空格or换行不影响代码执行效果]

（2）什么是字面量、变量和标识符

根据字面意思我们就可以得出结果，字面量就是不可改变的量好比数字“1”永远是1；
变量好比是年龄，今年18明年就19了，此处“年龄”就是一个变量与数学中的未知量类似；
标识符就是给变量、对象等起的名字就是标识符，好比以下示例中的age；标识符必须满足三个规定：①组成只能是字母大小写、数字“$”和“_”；②不能以数字开头；③不能是关键字或者保留字；最后命名建议使用驼峰命名规范要做到见名知意（一看标识符就知道是什么意思）；

在JavaScript中变量如何声明呢，通过关键字var声明，声明一个年龄age如下：

//声明变量
var age;
//声明并赋值
var age = 18；

（3）JavaScript的六类数据类型

在拿到某个变量不知其数据类型时，可通过typeof运算符进行检测；

示例：

// 弹警示框
alert("我是外部JavaScript，你敢相信？");
// 定义字符串
var name = "zinksl";
// 使用typeof运算符得到name数据类型
alert(typeof name);
名称字符串数值型布尔型未定义空对象类型
类型基本类型引用类型
关键字StringNumberBooleanUndefinedNullObject
示例var name = “z”;
var name1 = ‘z’;		var numb = 18;var flag= false;
var flag1= true;
备注：单引号和双引号都可以表示字符串；NaN、Infinity都是num类型；分别是：not a number和无穷大布尔类型只有两个值true和false表示未定义表示空对象

🚩强制类型转换：

①其他数据转String类型

通过调用被转换数据类型的toString方法实现转换；

示例：

//定义数值类型age
var age = 18;
//强制转换为String类型
var str = age.toString();
console.log(typeof str);

注意：【null和undefined不能用使用toString方法,但是可以调用String()函数】
示例：

//定义变量
var temp = null;
//接受函数返回值
var a = String(temp);
//在控制台输出运算结果
console.log(typeof a);

②其他数据转Number类型

通过Number()函数实现转换；

数据类型通过Number()函数转后备注
纯数字：直接转数值型；
含有其他字符：则转为NaN；
空串或者空格：转为“0”；
true1
false0
null0
undefinedNaN

针对字符转数值的两个函数：parseInt()只取整数、parseFloat()

③其他数据类型转为Boolean类型；

使用Boolean()函数转换；

数据类型通过Boolean()函数转后备注
数值类型：0和NaNfalse
其他数值类型true
字符串类型：空串false
其他字符串true
null和undefinedfalse

结尾彩蛋

认真分享技术，记录学习点滴若内容对你有用可以鼓励一下🍻方式如下
点赞：👍 留言：✍收藏：⭐️

如有疑问欢迎评论区留言，或加入技术交流群：1002743802
关注我订阅专栏，会持续体系化更新哦👈

Zinksl
关注
  • 7
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 9
    评论
专栏目录
Javascript实现动态改变控件大小(附完整源码)
希望我的博客，能帮上你解决学习中工作中所遇到的问题
11-05 67
Javascript实现动态改变控件大小(附完整源码)
JavaScript基础3
weixin_52188375的博客
11-14 128
JavaScript_3 1.JavaScript 运算符 1.1 算术运算符 + 、-、*、/、%、++、--。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>算术运算符</title> <script> window.onload=function(){ //1.算术运算符 + 、-、*、/、%、++、--..
获得网页控件方法大全
南三方---网站设计开发录
01-07 516
编写JS的时候,总会调用的网页上的控件,今天有心情,把获得网页上的控件方法写了下,有不足,请补充.【总结】一般我喜欢使用:document.getElementById()和document.all().现在觉得document.all.*比较不错!关于其更深一步的原理暂不清楚,希望有明白的人给个深入讲解的链接!!本帖以获得页面的text文本为例,获得控件后为其赋值为"你好!"【附一:方法大全
javascript组件开发方式
热门推荐
bingqingsuimeng的专栏
03-19 2万+
作为一名前端工程师，写组件的能力至关重要。虽然javascript经常被人嘲笑是个小玩具，但是在一代代大牛的前仆后继的努力下，渐渐的也摸索了一套组件的编写方式。 下面我们来谈谈，在现有的知识体系下，如何很好的写组件。 比如我们要实现这样一个组件，就是一个输入框里面字数的计数。这个应该是个很简单的需求。 我们来看看，下面的各种写法。 为了更清楚的演示，下面全部使用jQ
JS组件系列——Bootstrap 树控件使用经验分享 - 懒得安分 - 博客园
最新发布
2401_84435192的博客
05-08 638
刷题的重要性，不用多说。对于应届生或工作年限不长的人来说，刷面试题一方面能够尽可能地快速自己对某个技术点的理解，另一方面在面试时，有一定几率被问到相同或相似题，另外或多或少也能够为自己面试增加一些自信心，可见适当的刷题是很有必要的。对于应届生或工作年限不长的人来说，刷面试题一方面能够尽可能地快速自己对某个技术点的理解，另一方面在面试时，有一定几率被问到相同或相似题，另外或多或少也能够为自己面试增加一些自信心，可见适当的刷题是很有必要的。大厂面试远没有我们想的那么困难，摆好心态，做好准备，你也可以的。
通过浏览器控制台使用js脚本进行浏览器操作（定时点击等）
qq_56921846的博客
08-22 3394
可以搞一个抢购活动，比如准点开启某个活动 那么我们可以计算目标时间到现在的时间差计算毫秒数设置到定时器中
JS控件实现
qq_69325307的博客
08-17 92
js--->时间工具。
JavaScript基础-3
m0_49935332的博客
11-15 98
JavaScript_3 1.JavaScript 运算符        1.算术运算符 + 、-、* 、/、%、++、 --。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>算术运算符</title> <script> window.onload=functio
ArcGIS之JavaScript显示3D基础地图
03-25
ArcGIS之JavaScript显示3D基础地图
javascript基础知识整理
10-29
JavaScript是Web开发中不可或缺的一部分，尤其对于初学者来说，掌握其基础知识至关重要。下面将详细讲解JavaScript的基础知识，包括创建脚本、隐藏脚本、处理浏览器兼容性问题、链接外部脚本、注释、输出到浏览器、...
菜鸟javascript基础资料整理3 正则
10-28
js正则表达式(RegExp对象) 的使用。
js下载控件 JDowmLoad
11-10
jdownload js下载器 详见 http://www.suchso.com/UIweb/asp.net-jquery-download-plug-jDownload-ui-dialog-FileInfo.html
js 控件集
03-28
NULL 博文链接：https://rzy.iteye.com/blog/1236580
一些常用的JS插件，十分齐全，大部分有demo
06-26
一些常用的JS插件，十分齐全，大部分有demo。比如常用的JS插件 树形空间 日历空间 时间选择控件 表单验证控件，里面全都有，用法基本上都注明。
js时间控件
01-14
使用jq插件库 做了多种样式的时间控件 实现多种时间格式显示选择样式
JavaScript基础知识学习笔记
10-25
以上只是JavaScript基础知识的一部分，深入学习JavaScript还需要理解更多高级概念，如模块系统、Promise和async/await、模板字符串、ES6及后续版本的新特性等。对于初学者来说，逐步掌握这些知识，结合实践操作，将...
Javascript 入门基础学习
10-29
在开始JavaScript的学习之前，了解HTML和XHTML的基础是必要的，因为JavaScript通常与这些标记语言结合使用，以增强网页的用户体验。JavaScript能够向HTML页面添加交互行为，比如响应用户点击、改变页面内容、验证...
一篇文章教你开发一个完整的JavaScript组件
weixin_34007886的博客
05-16 369
作为一名开发者，大家应该都知道在浏览器中存在一些内置的控件：Alert，Confirm等，但是这些控件通常根据浏览器产商的不同而形态各异，视觉效果往往达不到UI设计师的要求。更重要的是，这类内置控件的风格很难与形形色色的各种风格迥异的互联网产品的设计风格统一。因此，优秀的前端开发者们各自开发自己的个性化控件来替代浏览器内置的这些控件。当然，这类组件在网络上已经有不计其数相当优秀的，写这篇文章的目的...
开发JavaScript组件（完整示例）
09-30 992
使用JavaScript，按照面向对象的思想来构建组件。 现以构建一个TAB组件为例。 从功能上讲，组件包括可视部分和逻辑控制部分；从代码结构上讲，组件包括代码部分和资源部分（样式、图片等）。 组件的特点：高内聚，低耦合（不与其他代码逻辑交叉，可以继承，包含）；封装性（隐藏私有方法和变量）；可重用性（可反复多次使用，用来组装更复杂的应用）。 <html> <head> <meta http-equiv="Content-Type" content="text/html.
javaScript基础及数组使用
03-28
JavaScript是一种脚本语言，用于Web开发、桌面应用程序和移动应用程序开发等领域。它是一种动态类型语言，可以轻松处理字符串、数字、布尔值、函数等多种数据类型。 数组是JavaScript中最常用的数据结构之一，它可以存储多个值，并使用索引进行访问。以下是常用的数组操作： 1. 创建数组： 可以通过两种方式创建数组： var arr1 = [1, 2, 3]; // 直接赋值 var arr2 = new Array(1, 2, 3); // 使用构造函数 2. 访问数组元素： 使用索引访问数组元素，索引从0开始，例如： var arr = [1, 2, 3]; console.log(arr[0]); // 输出1 3. 修改数组元素： 可以使用索引修改数组元素，例如： var arr = [1, 2, 3]; arr[0] = 4; console.log(arr); // 输出[4, 2, 3] 4. 添加数组元素： 可以使用push()方法将元素添加到数组末尾，例如： var arr = [1, 2, 3]; arr.push(4); console.log(arr); // 输出[1, 2, 3, 4] 5. 删除数组元素： 可以使用splice()方法删除数组元素，例如： var arr = [1, 2, 3]; arr.splice(1, 1); // 从第一个位置删除一个元素 console.log(arr); // 输出[1, 3] 6. 数组遍历： 可以使用for循环或forEach()方法遍历数组，例如： var arr = [1, 2, 3]; for (var i = 0; i < arr.length; i++) { console.log(arr[i]); } // 或者 arr.forEach(function(item, index) { console.log(item); }); 以上是一些基础的数组操作，还有更多高级的操作可以在实际开发中使用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 9
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

Zinksl

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

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

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

打赏作者

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

抵扣说明：

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

余额充值