首页 > 编程语言 >JavaScript学习之旅——初识

JavaScript学习之旅——初识

时间:2024-01-13 14:37:31浏览次数:49  
标签:语句 ... 之旅 JavaScript js 初识 alert 弹窗


JavaScript 学习之旅——初识

本文内容基于JavaScript 相关基础知识进行介绍


  • JavaScript 学习之旅——初识
  • 前言
  • 一、JavaScript 是什么(都有什么呢?)
  • 1.ECMAScript
  • 2.Web APIs
  • 二、JavaScript 的书写位置
  • 1.内部JavaScript
  • 2.外部JavaScript
  • 3.内联(行内)JavaScript
  • 4. JavaScript 语句结束符
  • 三、JavaScript 的输入输出语法
  • 1.JavaScript的输出弹窗(alert)
  • 2.JavaScript的页面执行(document.write)
  • 3.JavaScript的输入弹窗(prompt)
  • 4.JavaScript的控制台打印(console.log)
  • 四、总结梳理



前言

在几年前,博主有意学习前端相关的内容,诸如Vue等相关的框架,所以也就想了解一下关于Html、CSS、JavaScript 等相关内容,但是没有实战的地方,随之放弃。
时至今日,鸿蒙系统上线,看到用的语言是基于TypeScript (自认为)


一、JavaScript 是什么(都有什么呢?)

JS是一个运行在客户端的编程语言

1.ECMAScript

规定了JS的基础语法&核心知识,例如:

  • 变量
  • 分支语句
  • 循环语句
  • 对象

2.Web APIs

针对文档的操作& 针对浏览器的操作~

  • DOM 操作文档,对于页面元素进行移动、大小、增删改查等操作
  • BOM 操作浏览器,页面弹窗,检测窗口宽度,储存数据到浏览器等等

懵吧?我也是懵懵的, 对于这些术语大概先了解一下即可,后续可能会慢慢透彻~

tips: mdn javascript 权威网站~

二、JavaScript 的书写位置

1.内部JavaScript

直接写在html文件中,用sctipt 标签包裹住,例如:
<html>
	<head>
	...
	</head>
	<body>
	...
	<script> 
	//在这里写javascript
	</script>
	</body>
</html>

但是这里要注意的是:
script标签 卸载 上面,原因是因为我们将

2.外部JavaScript

// 在js文件中,直接写js代码就可以了
alert("我是外部js")
<html>
	<head>
	...
	</head>
	<body>
	...
	<script src="./js/my.js"> 
	//如果是外部引入的js(标识src)那么再在其内部写js代码也不会执行
	</script>
	</body>
</html>

通过以上代码不难看出,在外部的js文件, 需要以相对路径引入到src中去,且在script标签中书写的代码不会被执行;
在外部书写js的优点是分离,更易于复用,并且没有脚本html代码的混合,更清晰一些~

3.内联(行内)JavaScript

代码写在标签内部,还是以上面例子为例:

<html>
	<head>
	...
	</head>
	<body>
	
	//在onclick中直接写的js代码,即成为行内js
	<button onclick="alert('行内js')">按钮名称</button>
	
	</body>
</html>

但是这种用的不多,仅作为demo或者vue框架用的多一些~

4. JavaScript 语句结束符

相当于java的;符号,其js也可以使用; 来表示语句的结束,但是也看具体情况,写不写;最重要的是风格统一

三、JavaScript 的输入输出语法

1.JavaScript的输出弹窗(alert)

alert("是我,alert弹窗")

比较基础的语法,没什么好说的,就是页面弹窗,后续可能有更多的形式,这里暂不赘述(因为我也不知道)

2.JavaScript的页面执行(document.write)

document.write("我是文字")
document.write("<h1>我是h1标签</h1>")

向文档插入语句,如果是html,则会执行该语句;

3.JavaScript的输入弹窗(prompt)

prompt("请输入文字:")

执行该js时, 会蹦出一个弹窗,提示文字是请输入文字:然后一个输入框~

需要着重注意的是,alert和prompt 语句他们会跳过页面渲染,先被执行(不知道为啥,后续了解)

4.JavaScript的控制台打印(console.log)

console.log("日志打印:")

没什么好说的~

四、总结梳理

伸伸懒腰,时间又不早了(bgm:北京时间23:33)

以上就是今天学习梳理的内容,简单的对JS有一个基础的认知和运行时的学习,诸君大可一眼扫过,不必过于纠结,都是一些很基础的东西~
再会~


标签:语句,...,之旅,JavaScript,js,初识,alert,弹窗
From: https://blog.51cto.com/u_16077105/9232348

相关文章

  • PHP学习第一天:初识与基础
    今天,我开始了PHP的学习之旅。PHP是一种常用的服务器端脚本语言,广泛应用于Web开发。早上,我首先了解了PHP的基本语法和结构。我学习了如何编写一个简单的PHP脚本,包括开头和结束的标记,以及如何在HTML中嵌入PHP代码。通过编写一个简单的“Hello,World!”程序,我成功地在浏览器中输出了......
  • 初识C语言struct关键字
    本人初学C语言,最近学习到了struct,分享以下自己的一些心得。struct是结构体关键字,里面可以包含多个成员,在描述一个复杂结构体时可以借助struct。打印时,“.”可以替代成“->”,即A->name。同时注意struct后是要加;的。#include<stdio.h>structPerson{ charname[10]; shortheigh......
  • 关于 JavaScript 代码里双重感叹号的语法
    在JavaScript中,连续出现两个感叹号(!!)的语法是一种类型转换的技巧,通常用于将一个值强制转换为布尔类型。这个技巧的本质是两次使用逻辑非(NOT)运算符,通过这种方式可以清晰地将一个值的真假状态显式地表示出来。语法解析语法结构如下:if(!!test){//代码块}这里的test是一个Ja......
  • 回忆我的程序研发之旅
    我是一名热爱编程的程序员,从大学时代开始,我就对计算机编程产生了浓厚的兴趣。毕业后,我加入了一家科技公司,开始了我的程序研发生涯。在公司的第一个项目中,我负责开发一个移动应用程序。这对我来说是一个巨大的挑战,因为我需要学习新的开发框架和技术。我投入了大量的时间和精力,研究和......
  • JavaScript 中的事件循环
    事件循环是JavaScript运行时环境的核心组件。它负责调度和执行异步任务。事件循环通过持续监视两个队列来工作:调用堆栈和事件队列。调用堆栈是一种堆栈(LIFO)数据结构,存储当前正在执行的函数(存储代码执行期间创建的执行上下文)。WebAPI是异步操作(setTimeout、获取请求、promise)......
  • Jenkins简介及安装配置详解:开启持续集成之旅
    Jenkins简介及安装配置详解:开启持续集成之旅一、Jenkins介绍Jenkins是一个开源的、用Java编写的持续集成和持续交付(CI/CD)工具。它提供了一种简单易用的方式来自动化构建、测试和部署软件。Jenkins的主要目标是帮助开发团队加快软件开发过程,提高软件质量,并通过自动化流程减......
  • 大话 JavaScript(Speaking JavaScript):第三十一章到第三十三章
    第三十一章:模块系统和包管理器原文:31.ModuleSystemsandPackageManagers译者:飞龙协议:CCBY-NC-SA4.0JavaScript没有内置模块支持,但社区已经创建了令人印象深刻的解决方法。要管理模块,可以使用所谓的包管理器,它们处理发现、安装、依赖管理等。模块系统JavaScript模......
  • 大话 JavaScript(Speaking JavaScript):第二十一章到第二十五章
    第二十一章:数学原文:21.Math译者:飞龙协议:CCBY-NC-SA4.0Math对象用作多个数学函数的命名空间。本章提供了一个概述。数学属性Math的属性如下:Math.E欧拉常数(e)Math.LN22的自然对数Math.LN1010的自然对数Math.LOG2Ee的底数2对数Math.LOG10Ee的十进制对数Ma......
  • 大话 JavaScript(Speaking JavaScript):第二十六章到第三十章
    第四部分:提示,工具和库原文:IV.Tips,Tools,andLibraries译者:飞龙协议:CCBY-NC-SA4.0本部分提供了使用JavaScript的技巧(最佳实践,高级技术和学习资源),并描述了一些重要的工具和库。第二十六章:元代码风格指南原文:26.AMetaCodeStyleGuide译者:飞龙协议:CCBY-NC-SA......
  • 大话 JavaScript(Speaking JavaScript):第十一章到第十五章
    第十一章:数字原文:11.Numbers译者:飞龙协议:CCBY-NC-SA4.0JavaScript对所有数字都使用单一类型:它将它们全部视为浮点数。但是,如果小数点后没有数字,则不显示小数点:>5.0005在内部,大多数JavaScript引擎都会优化并区分浮点数和整数(详情请参见JavaScript中的整数)。但这......