【JavaScript速成之路】一文带你初识JavaScript

这篇具有很好参考价值的文章主要介绍了【JavaScript速成之路】一文带你初识JavaScript。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

javascript速成,JavaScript,javascript,前端,开发语言

📃个人主页:「小杨」的csdn博客
🔥系列专栏:【JavaScript速成之路】

🐳希望大家多多支持🥰一起进步呀!



前言

📜前言:从今天开始,小杨就开始了一个新的专栏【JavaScript速成之路】,该专栏主要向大家介绍一些JavaScript的基础语法,适合初学者阅读,希望大家能够通过该专栏的学习,快速掌握JavaScript的基本语法!


1,JavaScript

1.1,JavaScript概述

JavaScript是Web开发领域中一种强大的编程语言,主要用于开发交互式的Web页面。

对于制作一个网页而言,HTML,CSS,JavaScript分别代表了结构,样式和行为。

结构是网页的骨架,样式是网页的外观,行为是网页的交互逻辑。

HTML,CSS,JavaScript的比较:

语言 作用 说明
HTML 结构 决定网页的结构和内容,相当于人的身体
CSS 样式 决定网页呈现给用户的模样,相当于人的衣服
JavaScript 行为 实现业务逻辑和页面控制,相当于人的各种动作

知识点:

  • JavaScript内嵌于HTML网页中,通过浏览器内置的JavaScript引擎进行解释执行,把一个原本只用来显示的页面转变为支持用户交互的页面程序。
  • 浏览器是访问互联网中各种网站所必备的工具,JavaScript主要就是运行在浏览器中的。
  • 浏览器内核分为渲染引擎(也称排版引擎)和JavaScript引擎两种,渲染引擎(如chrome浏览器的Blink)主要负责解析HTML与CSS,而JavaScript引擎(如chrome浏览器的V8引擎)是JavaScript语言的解释器,用于网页中JavaScript代码的读取并对其处理执行。

1.2,JavaScript历史

创造者:布尔登-艾奇(Brendan Eich,1961年~至今)。

于1995年,布尔登-艾奇在网景导航者浏览器上首次设计出了JavaScript。

网景公司最初将其命名为LiveScript,后来与Sum公司合作之后将其改名为JavaScript。

在JavaScript设计之初,JavaScript是用来控制浏览器的行为。

例如,在浏览器中进行表单验证,用户只有输入正确的格式内容后才能进行表单提交操作,这样避免用户因表单信息填写错误导致的反复提交问题,节省了时间和网络资源。

而现在,JavaScript的作用不仅仅局限于浏览器了,出现了很多其他的作用,如:

  • 网页特效(监听用户的一些行为让网页作出对应的反馈)
  • 表单验证(针对表单数据的合法性进行判断)
  • 数据交互(获取后台的数据,渲染到前端)
  • 服务端编程(node.js)

javascript速成,JavaScript,javascript,前端,开发语言


1.3,JavaScript特点

  1. JavaScript是一种脚本语言。
  2. JavaScript可以跨平台。
  3. JavaScript支持面向对象。

知识点:

  • 脚本简单来说就是一条条的文本命令,这些文本命令按照代码流程逐条被执行。
  • 常见的脚本语言有JavaScript,TypeScript,PhP,Python等,依赖于解释器,只在被调用时自动进行解释或编译。
  • 常见的非脚本语言有Java,C,C++等,一般需要编译,链接,生成独立可执行文件后才能运行。

1.4,JavaScript组成

JavaScript是由ECMAScript,DOM,BOM三部分组成的。

JavaScript的组成示意图:

javascript速成,JavaScript,javascript,前端,开发语言


1)ECMAScript

ECMAScript是由ECMA国际(原欧洲计算机制造商协会)进行标准化的一门编程语言,这种语言在万维网上应用广泛,它往往被称为JavaScript或 JScript,但实际上后两者是ECMAScript语言的实现和扩展。

javascript速成,JavaScript,javascript,前端,开发语言

ECMAScript : ECMAScript规定了JS的编程语法和基础核心知识,是所有浏览器厂商共同遵守的一套JS语法工业标准。

2)DOM–文档对象模型

文档对象模型( Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过DOM提供的接口可以对页面上的各种元素进行操作(大小、位置、颜色等)。

3)BOM–浏览器对象模型

BOM(Browser Object Model,简称BOM)是指浏览器对象模型,它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口,比如弹出框、控制汶览器跳转、获取分辨率等。


2,JavaScript入门

2.1,书写模式

1)行内式

行内式是指将单行或者少量的JavaScript代码写在HTML标签的事件属性中,也就是以on开头的属性,如onclick。

为了更好地理解什么是行内式的写法,示例如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>
<body>
    <!--1.行内式的js  直接写到元素的内部-->
    <input type="button" value="点我" onclick="alert('行内式')">
</body>
</html>

知识点:

  • 可以将单行或少量JavaScript代码写在HTML标签的事件属性中(以on开头的属性),如: onclick。

  • 注意单双引号的使用:在HTML中我们推荐使用双引号,JavaScript中我们推荐使用单引号。

  • 可读性差,在HTML中编写大量的JavaScript代码时,不利于阅读。

  • 引号易错,引号多层嵌套匹配时,非常容易弄混,进而出错。


2)内嵌式

内嵌式是将多行的JavaScript代码统一写到<script>标签中,该方式是JavaScript学习中最常用的写法。

为了更好地理解什么是内嵌式的写法,示例如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--2.内嵌式的js -->
    <script>
        alert('内嵌式');
    </script>
</head>
<body>
        
</body>
</html>


3)外部式

外部式是指将JavaScript代码专门写到一个文件里,然后在HTML文件中使用,适用于JavaScript代码量比较多的情况。

为了更好地理解什么是外部式的写法,示例如下:

1,JavaScript文件代码

alert('外部式');

2,HTML文件直接使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--外部式的js  -->
    <script src="index.js"></script>
</head>
<body>
</body>
</html>

知识点:

  • 利于HTML页面代码结构化,把大段JS代码独立到HTML页面之外,既美观,又能方便文件级别的复用。

  • 引用外部JavaScript文件的script标签中间不可以写代码。


2.2,代码注释

通过注释可以屏蔽代码被执行或者添加备注信息,JavaScript 支持两种形式注释语法:

1)单行注释

使用 // 注释单行代码,一次只能注释一行,但可以重复注释,适用于注释少量信息的情况。

为了更直观地理解单行注释的语法,示例如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 单行注释</title>
</head>
<body>
  <script>
    // 这种是单行注释的语法
    document.write('你好!');
  </script>
</body>
</html>

2)多行注释

使用 /* */ 注释多行代码,适用于注释大量的信息的情况。

为了更直观地理解多行注释的语法,示例如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 多行注释</title>
</head>
<body>
  
  <script>
    /* 这种的是多行注释的语法 */
    /*
    	更常见的多行注释是这种写法
    	可以任意换行,多少行都可以
      */
    document.write('你好!');
  </script>
</body>
</html>

注意:编辑器中单行注释的快捷键为 ctrl + /


2.3,输入输出语句

JavaScript是一门可以在网页中实现用户交互效果的编程语言。

当我们打开网页后,网页自动弹出输入框,用户按照提示进行输入操作,输入操作完成后,输入的信息传入程序内部进行处理,处理完成后,程序再把结果通过警示框来告诉用户。

在JavaScript中,输入输出语句有以下3种,分别为:

方法 说明 归属
alert(msg) 浏览器弹出警示框 浏览器
prompt(info) 浏览器弹出输入框,用户可以输入 浏览器
console.log(msg) 浏览器控制台打印输出信息 浏览器

为了更直观地理解输入输出语句的用法,示例如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 输入输出</title>
</head>
<body>
  <script> 
    // 1. 浏览器弹出警示框      
    alert('这是一个警示框');

    // 2. 浏览器弹出输入框,用户可以输入内容
    prompt('这是一个输入框');

    //3.浏览器控制台输出信息
    console.log('在控制台打印输出的信息');
  </script>
</body>
</html>

1,alert使用效果

javascript速成,JavaScript,javascript,前端,开发语言

2,prompt使用效果

javascript速成,JavaScript,javascript,前端,开发语言

3,console.log使用效果

javascript速成,JavaScript,javascript,前端,开发语言


结语

这就是本期博客的全部内容啦,想必大家已经对JavaScript这门编程语言已经有了初步地认识吧,后续将对JavaScript中的各部分语法进行逐一介绍,如果有什么其他的问题无法自己解决,可以在评论区留言哦!

最后,如果你觉得这篇文章写的还不错的话或者有所收获的话,麻烦小伙伴们动动你们的小手,给个三连呗(点赞👍,评论✍,收藏📖),多多支持一下!各位的支持是我最大的动力,后期不断更新优质的内容来帮助大家,一起进步。那我们下期见!

javascript速成,JavaScript,javascript,前端,开发语言文章来源地址https://www.toymoban.com/news/detail-788696.html


到了这里,关于【JavaScript速成之路】一文带你初识JavaScript的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【后端速成 Vue】初识指令(上)

    前言: Vue 会根据不同的指令,针对标签实现不同的功能。 在 Vue 中,指定就是带有 v- 前缀  的特殊  标签属性 ,比如: 这里问题就来了,既然 Vue 会更具不同的指令,实现不同的功能,那么这个 v-html 是实现什么功能的呢? v-html:设置元素的 innerHTML 如何不知道元素的 in

    2024年02月07日
    浏览(28)
  • 【零基础??天速成 Java】Day2 - 初识面向对象

    目录 前言 1. 可变参数的使用 2. 构造器 3. 包 1、包的创建 2、包的使用 3、包的命名规范 4、常用的包 5. 访问修饰符 6. 继承  7. super 8. 方法重写 Override 写在最后: 我的 java 基础学习,跟的是韩顺平的 java 课程~ 本篇文章涵盖视频 216 ~ 305 集里面 java 与 C++ 不同的知识

    2024年02月12日
    浏览(37)
  • 【SQL server速成之路】——身份验证及建立和管理用户账户

    🎉个人主页:这个昵称我想了20分钟 ✨往期专栏:【速成之路】jQuery        【速成之路】Ajax        【速成之路】SQL server 🎖️系列专栏:【初学者】刷题学习Java 🔥推荐一款模拟面试,刷题神器👉 点击跳转到网站   ❤️欢迎各位小伙伴们!强烈推荐一款

    2024年01月25日
    浏览(47)
  • JavaScript速成课—事件处理

    目录 一.事件类型 1.窗口事件 2.表单元素事件 3.图像事件 4.键盘事件 5.鼠标事件 二.JavaScript事件处理的基本机制 三.绑定事件的方法 1.DOM元素绑定 2.JavaScript代码绑定事件 3.监听事件函数绑定 四.JavaScript事件的event对象 1.获取event对象 2.鼠标坐标获取 3.获取事件源 一.事件类型  

    2024年02月07日
    浏览(31)
  • AI人工智能(调包侠)速成之路十五(中国象棋AI网络机器人:AI模型部署)

    神经网络模型动态加解密的技术这个以后再写吧  书接上文: AI人工智能(调包侠)速成之路十四(中国象棋AI网络机器人:AI技术综合应用实现) 神经网络模型的存储格式         我们训练的神经网络就是一堆模拟神经元的参数集合,给(他/她/它)一个输入信息就会得到

    2024年01月23日
    浏览(47)
  • Python学习之路-初识面向对象

    面向对象编程(英语:Object-oriented programming,缩写:OOP)是种具有对象概念的编程典范,同时也是一种程序开发的抽象方针。它将对象作为程序的基本单元,将程序和数据封装其中,以提高软件的重用性、灵活性和扩展性,对象里的程序可以访问及经常修改对象相关连的数据。

    2024年01月21日
    浏览(53)
  • java之路——带你了解Hibernate与基本过程

    Hibernate框架的发展可以追溯到2001年,它在过去的几年里获得了广泛的应用和持续的发展。 其中的发展演变: 初期版本(2001-2006年): Hibernate框架最早由Gavin King创建,目的是为了简化Java应用程序与关系数据库之间的数据交互。在这个阶段,Hibernate开始以一种简单但强大的方

    2024年02月12日
    浏览(42)
  • 带你一文吃透Git

    你是否也想要一片绿呢?让我们一起往下看吧 Git 是一个分布式版本控制工具,通常用来对软件开发过程中的源代码文件进行管理。通过Git 仓库来存储和管理这些文件,Git 仓库分为两种: 本地仓库:开发人员自己电脑上的 Git 仓库 远程仓库:远程服务器上的 Git 仓库 commit:

    2024年02月16日
    浏览(126)
  • JS基础-初识JavaScript

    前面讲了前端开发必备的三种语言。其中的HTML、CSS我们基本上有了比较正确的认识。这里讲一下JavaScript。 语言 功能 结构层 HTML 搭建结构、放置部件、描述定义 样式层 CSS 美化页面、实现布局 行为层 JavaScript 实现交互效果、数据收发、表单验证 HTML构成了基础的骨架。 CSS

    2024年02月10日
    浏览(41)
  • 续-初识JAVaScript---(2)

    虽然在JS中的变量在声明的时候不需要指定数据类型,但是在赋值的时候,每一个数据还是有类型的,所以还是需要学习JS中的数据类型。 JS的数据类型遵循ES规范(ECMAScipt规范),在ES6之后,又基于以下的六种类型之外添加了一种新的类型:Symbol 1.数据类型的分类 (1)原始

    2024年02月11日
    浏览(24)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包