【64】JS(1)——语法简介

本篇学习目标:了解JavaScript



一、前置知识

1.前言

(1)网页

单独的页面;

(2)网站

一系列相关的网页组合在一起;

(3)应用程序

可以和用户产生交互,并且实现某种功能。(常见的三类:比如淘宝,Photoshop,百度脑图)(要有图形交互、接口、引擎等)

(4)前端三层

HTML(结构层,语义,页面结构),CSS(样式层,美观,页面样式),JavaScript(行为层,交互,页面行为);

(5)JavaScript 应用场景

JavaScript 发展到࣫现在几乎无所不能,常见的应用场景有:

  1. 网页特效
  2. 服务端开发(Node.js)
  3. 命令行工具(Node.js)
  4. 桌面程序(Electron)
  5. App(Cordova)
  6. 控制硬件-物联网(Ruff)
  7. 游戏开发(cocos2d-js)…

2.JavaScript介绍

(1)是什么

运行在客户端的脚本语言,最早实在HTML网页上使用,为网页带来动态功能。

浏览器就是一种运行JS脚本语言的客户端,JS解释器被称为浏览器的一部分

(2)发展简史
  • 在 WEB 日益发展的同时,网页的大小和复杂性不断增加,受制于网速的限制,为完成简单的表单验证而频繁地与服务器交换数据只会加重用户的负担,当时走在技术革新最前沿的 Netscape (网景)公司,决定着手开发一种客户端语言,用来处理这种简单的验证。
  • 1995 年,就职于 Netscape 公司的 Brendan Eich,开始着手为即将于 1996 年 2 月发布的 Netscape Navigator 2 浏览器开发一种名为 LiveScript 的脚本语言。为了尽快完成 LiveScript 的开发,Netscape与 Sun公司建立了一个开发联盟。在 Netscape Navigator 2 正式发布前夕,Netscape 为了搭上媒体热炒 Java 的顺风车,临时把 LiveScript 改名为 JavaScript。
  • 由于 JavaScript 1.0 获得的关注度越来越高,1996 年,微软就在其 Internet Explorer 3 中加入了名为 JScript 的 JavaScript 实现,这意味着有了两个不同的 JavaScript 版本,导致 JavaScript 没有一个标准化的语法和特性。
  • 1997 年,以 JavaScript 1.1 为蓝本的建议被提交给了欧洲计算机制造商协会(ECMA,European Computer Manufacturers Association)。该协会指定 39 号技术委员会(TC39,Technical Committee #39)负责“ 标准化一种通用、跨平台、供应商中立的脚本语言的语法和语义”。
  • TC39 由来自 Netscape、Sun、微软、Borland 及其他关注脚本语言发展的公司的程序员组成,他们经过数月的努力完成了 ECMA-262 标准,定义一种名为 ECMAScript 的新脚本语言。
版本发布时间意义
ECMAScript 11997.06
ECMAScript 21998.06
ECMAScript 31999.12成为 JavaScript 的通行标准,得到了广泛支持。
ECMAScript 42007.10ECMAScript 4.0 版草案发布,对 3.0 版做了大幅升级。草案发布后,由于 4.0 版的目标过于激进,各方对于是否通过这个标准,发生了严重分歧。以 YahooMicrosoft、Google 为首的大公司,反对 JavaScript 的大幅升级,主张小幅改动;以 JavaScript 创造者 Brendan Eich 为首的 Mozilla 公司,则坚持当前的草案。
2008.07由于各方分歧太大,争论过于激进,ECMA 开会决定,中止 ECMAScript 4.0 的开发,将其中涉及现有功能改善的一小部分,发布为 ECMAScript 3.1,而将其他激进的设想扩大范围,放入以后的版本,由于会议的气氛,该版本的项目代号起名为Harmony(和谐)。会后不久,ECMAScript 3.1 就改名为 ECMAScript 5。
ECMAScript 52009.12ECMAScript 5.0 版正式发布。Harmony 项目则一分为二,一些较为可行的设想定名为 JavaScript.next 继续开发,后来演变成 ECMAScript 6;一些不是很成熟的设想,则被视为 JavaScript.next.next,在更远的将来再考虑推出。
ECMAScript 5.12011.06成为ISO国际标准(ISO/IEC 16262:2011)
ECMAScript 6/ECMAScript 20152015.06.17ECMAScript 6 发布正式版本,并且更名为“ECMAScript 2015”。
  • ECMAScript 的应用:
    ①Javscript,JScript,ActionScript 等脚本语言都是基于 ECMAScript 标准实现的;
    ②在 JavaScript,JScript 和 ActionScript 中声明变量,操作数组等语法完全一样,因为它们都是ECMAScript。但是在操作浏览器对象等方面又有各自独特的方法,这些都是各自语言的扩展。
(3)JS组成
  • JavaScript 是由 ECMAScriptDOMBOM 三者组成的。
  • ECMAScript是语言核心;
  • DOM:文档对象模型;
  • BOM :浏览器对象模型。

3.计算机组成

(1)示意图

在这里插入图片描述

(2)软件
  • 应用软件:浏览器(Chrome/IE/Firefox)、QQ、Sublime、Word
  • 系统软件:Windows、Linux、mac OS
(3)硬件
  • 三大件:CPU(中央处理器)、内存(缓存,关机时会释放)、硬盘(永久保存);
  • 输入设备:鼠标、键盘、手写板、摄像头等;
  • 输出设备:显示器、打印机、投影仪等。

二、基本语法

1.书写位置

(1)行内
  • 但一般不用:
<input type="button" value="按钮" onclick="alert('hello word')">
(2)HTML的script标签中
  • <script>标签比较灵活,也可以写在<body>标签中;
  • 但是一般建议写在<head>标签中,如下示例:
<head>
   <script type="text/javascript"> /*其中type="text/javascript"可以省略不写,写了的话要写对*/
       alert("hello world");
   </script>
</head>
(3)外部JS文件
  • 引入外部JS文件
<script src="main.js"></script>
  • 引用外部JS 文件的 <script> 标签中不可以写 JavaScript 的代码(不能再像(2)中举例所示);
  • 自定义的JavaScript 代码,需要书写在另一个新的 <script> 标签中。

2.注释

(1)多行注释(块级注释)
  • 块级注释:又叫做多行注释,作用范围是选中的多行,写作 /**/
<head>
   <script>
   /*这是一个多行注释这是一个多行注释
   这是一个多行注释
   这是一个多行注释这是一个多行注释*/
   </script>
</head>
(2)单行注释
  • 单行注释:作用范围只有符号后面的一行,写作 //
<head>
   <script>
   //单行注释
   换行就不能发生作用了
   //每行都要写
   </script>
</head>
(3)VScode快捷键
  • 单行注释:注释和解开注释都是 ctrl+/
  • 多行注释:ctrl+shift+/

3.alert()语句

(1)含义
  • alert:警示、警告。
(2)作用
  • 作用:在浏览器中弹出一个警示框,警示框的警示内容自定义
(3)注意事项
  • alert 语句是一个JS 内置好的功能(函数、方法),要想实现功能必须在 alert 关键字后面加小括号执行,自定义的内容需要传递给小括号内的参数,输出时参数位置的内容会出现在弹框位置。
(4)语法
  • alert 语句作为一个函数,如果要执行,必须在后面紧跟着添加小括号
  • alert 语句作为一个函数,小括号内部可以传递参数,根据数据类型不同,有不同的语法要求,例如文字内容(字符串)必须写在一对引号内部。
  • 如果需要添加一对引号,要么是单引号,要么是双引号,不能一单一双
  • 所有的有特殊功能的符号必须是英文字符
  • 语句后面的分号必要性。
  • js 对换行、缩进、空格也不敏感
  • 如果 js 中没有特殊控制结构,代码都是从上往下、从左往右进行加载
(5)示例
<head>
    <script>
        alert("这是一个警示框!");
   </script>
</head>

在这里插入图片描述


4.prompt()语句

(1)含义
  • prompt:提示
(2)作用
  • 作用:弹出一个对话框,内部有一个提示语句以及一个输入框,可以在输入框中根据提示任意输入内容。
(3)注意事项
  • prompt 语句也是JS 内置 的一个功能,必须加小括号执行,有两个参数可以进行传递,每个参数一般都是字符串类型,必须加引号,两个参数中间用逗号分隔,引号和逗号都必须是英文输入法状态。
(4)语法及示例
<head>
    <script>
      prompt("请输入您的年龄","18");
    </script>
<head>

在这里插入图片描述

  • 第二个参数位置的值,可以删除并重新输入新的内容,甚至代码中可以不写第二个参数。
<head>
    <script>
      prompt("请输入您的年龄");
    </script>
<head>

在这里插入图片描述


5.console控制台

(1) 介绍
  • 在大部分浏览器中,都有一个控制台,内部可以查看 HTML、CSS 代码,甚至调试代码错误;
  • 浏览器中右键点击审查元素(检查),都可以打开控制台;
  • 快捷键: F12;
  • 控制台中有一个 console(控制台) 的选项面板,在 JS 中有非常重要的作用。
  • chrome 浏览器的控制台
    在这里插入图片描述
  • IE 浏览器的控制台
    在这里插入图片描述
(2) 功能
  • **帮助程序员调试程序中出现的 bug。**可以提示错误的个数、错误所在的行数、错误类型:
    在这里插入图片描述
  • 可以在控制台中直接书写一些语句,进行执行在这里插入图片描述

在这里插入图片描述

(3) 对比alert语句效果
  • alert()是从上往下执行,必须点击确定才能执行下条语句,上条没有执行完毕,后条无法呈现,会出现阻塞效果;但是console.log()没有阻塞效果,是自动执行的。
  • 程序员知道控制台,但是用户看不到,想要展示给用户看,就要用alert;想要自己开发时候看,用console.log()

下篇继续:【65】JS(2)——字面量/变量/数据类型

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

倏存

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

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

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

打赏作者

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

抵扣说明:

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

余额充值