当前位置: 首页 > news >正文

JavaScript学习之旅——初识

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 (自认为) 的arkts(android runtime kit type script) 所以去了解下对应的知识,发现还得是JavaScript,所以在此记录,把对应的知识重新再梳理一遍,书中多有错误,烦请诸君斧正,感谢~


一、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有一个基础的认知和运行时的学习,诸君大可一眼扫过,不必过于纠结,都是一些很基础的东西~
再会~

相关文章:

  • linux下超级程序!在linux界面实现类图像化界面的操作体验!
  • Zookeeper实现分布式锁和注册中心
  • 基于SpringBoot的图书电子商务网站的设计与实现
  • thinkphp6入门(14)-- 多关联模型查询
  • 项目经验简单总结
  • SpringValidation自定义注解以及分组校验
  • 第6章-第1节-Java中基本数据类型的包装类
  • 松松2023年工作汇报
  • 通过data恢复postgresql
  • 【蓝桥杯】比赛大纲整理
  • RK3568驱动指南|第九篇 设备模型-第95章 创建属性文件并实现读写功能实验1
  • 详解卡尔曼滤波(Kalman Filter)
  • vue常见面试题
  • C++:第十一讲DFS深搜
  • 后端开发——jdbc的学习(一)
  • 10个最佳ES6特性 ES7与ES8的特性
  • Akka系列(七):Actor持久化之Akka persistence
  • css布局,左右固定中间自适应实现
  • Docker 笔记(2):Dockerfile
  • Facebook AccountKit 接入的坑点
  • iOS编译提示和导航提示
  • java中的hashCode
  • linux安装openssl、swoole等扩展的具体步骤
  • October CMS - 快速入门 9 Images And Galleries
  • SegmentFault 社区上线小程序开发频道,助力小程序开发者生态
  • 算法-图和图算法
  • 译有关态射的一切
  • 最近的计划
  • ​ 无限可能性的探索:Amazon Lightsail轻量应用服务器引领数字化时代创新发展
  • # 透过事物看本质的能力怎么培养?
  • #{}和${}的区别?
  • #define与typedef区别
  • #设计模式#4.6 Flyweight(享元) 对象结构型模式
  • (初研) Sentence-embedding fine-tune notebook
  • (每日持续更新)信息系统项目管理(第四版)(高级项目管理)考试重点整理第3章 信息系统治理(一)
  • (切换多语言)vantUI+vue-i18n进行国际化配置及新增没有的语言包
  • (十八)用JAVA编写MP3解码器——迷你播放器
  • (十三)Java springcloud B2B2C o2o多用户商城 springcloud架构 - SSO单点登录之OAuth2.0 根据token获取用户信息(4)...
  • (续)使用Django搭建一个完整的项目(Centos7+Nginx)
  • (终章)[图像识别]13.OpenCV案例 自定义训练集分类器物体检测
  • ../depcomp: line 571: exec: g++: not found
  • .NET CF命令行调试器MDbg入门(三) 进程控制
  • .net Signalr 使用笔记
  • .NET 材料检测系统崩溃分析
  • .so文件(linux系统)
  • /3GB和/USERVA开关
  • @NestedConfigurationProperty 注解用法
  • @transactional 方法执行完再commit_当@Transactional遇到@CacheEvict,你的代码是不是有bug!...
  • @Transient注解
  • @在php中起什么作用?
  • [ C++ ] STL_list 使用及其模拟实现
  • [2013AAA]On a fractional nonlinear hyperbolic equation arising from relative theory
  • [20150707]外部表与rowid.txt
  • [20160902]rm -rf的惨案.txt
  • [30期] 我的学习方法