入门学习JavaScript_初识JavaScript_不声明变量,直接输出变量的值,则程序会出错。-程序员宅基地

技术标签： css  1024程序员节  JavaScript  html  javascript  

感激相遇
你好
我是阿Ken

于2020年10月24日特此创建 JavaScript 专栏以庆祝10.24程序员节
之后将会持续更新
期待与您再次相逢

在这里插入图片描述
以学校相关教材为主整理，帮助 CSDN 小伙伴入门及复习

_

在这里插入图片描述
每个人都是一座孤岛
而弱者扎堆
强者自强

1.1_什么是JavaScript

1.1.1_JavaScript概述

JavaScript是Web开发领域中的一种功能强大的编程语言，主要用于开发交互式的Web页面。在计算机、手机等设备上浏览的网页上，大多数的交互逻辑几乎都是由JavaScript实现的。

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

JavaScript内嵌于HTML网页中，通过浏览器内置的JavaScript引擎进行解释执行，把一个原本只用来显示的页面转变成支持用户交互的页面程序。

1.1.2_JavaScript的诞生与发展

1995年，Netscape（网景）公司（现在的Mozilla公司）的布兰登·艾奇在网景导航者浏览器上首次设计出了JavaScript。
_
Netscape 最初将这个脚本语言命名为LiveScript，后来Netscape公司与Sun公司（2009年被Oracle公司收购）合作之后将其改名为JavaScript。
_
这是由于当时Sun公司推出的Java语言备受关注，Netscape 公司为了营销借用了 Java 这个名称。实际上，JavaScript 与 Java 的关系就像雷峰塔与雷锋。它们本质上是两种不同的编程语言。

1.1.3_JavaScript 的特点

  1. JavaScript 是一种脚本语言
    脚本(Script）简单地说就是一条条的文本命令，这些命令按照程序流程逐条被执行。常见的脚本语言有 JavaScript，TypeScript，PHP，Python 等。非脚本语言(如C、C++）一般需要编译、链接，生成独立的可执行文件后才能运行，而脚本语言依赖于解释器，只在被调用时自动进行解释或编译。脚本语言通常都有简单、易学、易用特点。语法规则比较松散，使开发人员能够快速完成程序的编写工作。
  2. JavaScript 可以跨平台
    JavaScript 语言不依赖操作系统，仅需要浏览器的支持。
  3. JavaScript 支持面向对象

1.1.4_JavaScript的组成

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

在这里插入图片描述

接下来我们对 JavaScript 的组成进行简单的介绍。

(1 ) ECMAScript : 是 JavaScript 的核心。ECMAScript 规定了JavaScript 的编程语法和基础核心内容，是所有浏览器厂商共同遵守的一套 JavaScript 语法工业标准。

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

(3) BOM : 浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过 BOM，可以对浏览器窗口进行操作 (如弹出框、控制浏览器导航跳转等)。

1.2_常用的开发工具

工欲善其事，必先利其器，一款优秀的开发工具能够极大提高程序开发效率与体验。在 Web 前端开发中，常用的开发工具有 Visual Studio Code、Sublime Text、HBuilder 等，接下来我们就来介绍这些开发工具的特点。

  1. Visual Studio Code

Visual Studio Code (简称VS Code) 是一款由微软公司开发的，功能十分强大的轻量级编辑器。该编辑器提供了丰富的快捷键，集成了语法高亮、可定制热键绑定、括号匹配以及代码片段收集的特性，并且支持多种语法和文件格式的编写。

  1. Sublime Text

Sublime Text 是一个轻量级的代码编辑器，具有友好的用户界面，支持拼写检查、书签、自定义按键绑定等功能，还可以通过灵活的插件机制扩展编辑器的功能，其插件可以利用 Python 语言开发。Sublime Text 是一个跨平 台的编辑器，支持 Windows、Linux、macOS 等操作系统。

  1. HBuilder

HBuider 是由 DCloud (数字天堂) 公司推出的一款支持 HTML5 的 Web 开发编辑器，在前端开发、移动开发方面提供了丰富的功能和贴心的用户体验，还为基于 HTML5 的移动端 App 开发提供了良好的支持。

  1. Adobe Dreamweaver

Adobe Dreamweaver 是一个集网页制作 和网站管理于一身的所见即所得的网页编辑器，用于帮助网页设计师提高网页制作效率，简化网页开发的难度和学习HTML5 、CSS 的门槛。但缺点是可视化编辑功能会产生大量冗余代码，而且不适合开发结构复杂、需要大量动态交互的网页。

  1. WebStorm

WebStorm 是 JetBrains 公司推出的一款 Web 前端开发工具，JavaScript、HTML5 开发是其强项，支持许多流行的前端技术，如 jQuery、Prototype、Less 、Sass、AngularJS、 ESLint、webpack等。

1.3_JavaScript 入门

1.3.1_代码书写位置

1. 行内式

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

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>DOCUMENT</title>
<body>
<input type="button" value="点我" οnclick="alert('行内式')“>
</body>
</head>
</html>

使用行内式编写 JavaScript 代码。实现：单击一个按钮后，弹出一个警告框，显示一些提示信息

第四行声明了网页的编码为 UTF-8，帮助浏览器正确识别网页的编码。在声明编码后，还需要确保文件本身的编码也是 UTF-8。目前大多数代码编辑器新建的文件，编码默认都是UTF-8。另外 Windows 记事本默认的编码是ANSI，在记事本中编写的网页容易出现乱码，因此读者应杜绝使用记事本编写代码文件。

使用行内式需要注意：

  • 注意注意单引号和双引号的使用。在 HTML 中使用双引号，而 Javascript 推荐使用单引号。
  • 行内式可读性较差，尤其是在 HTML 中编写大量的 JavaScript 代码时。不方便阅读。
  • 在遇到多层引号镶嵌的情况时非常容易混淆，导致代码出错。
  • 只有临时测试或者特殊情况下再使用行内式，一般情况下不推荐使用行内式

2. 内嵌式（嵌入式）

内嵌式是只使用 < script > 标签包裹 JavaScript 代码，< script > 标签可以把标签可以写在 < head > 或 < body > 标签中。通过内嵌式，可以将多行 JavaScript 代码写在 < script > 标签中。内嵌式是学习 JavaScript 最常使用的方式。

<head>
......
<script>
alert('内嵌式');
</script>
</head>

第四行是一条 JavaScript 语句，其末尾的分号表示该语句结束，后面可以编写下一条语句。< script > 标签还有一个 type 属性，在HTML5 中，该属性的默认值为 " text / JavaScript "，因此在编写时可以省略 type 属性。

3. 外部式（外链式）

外部式是将 JavaScript 代码写在一个单独的文件中，一般使用 ” js “ 作为文件的扩展名。在 html 页面中使用 < script > 标签进行引入，适合 JavaScript 代码量比较多的情况。
外部式的是 < script > 标签内不可以编写 JavaScript 代码

<head>
......
<script src="test.js"></script>
</head>

和

alert('外部式');

在 html 中还有一种嵌入 JavaScript 代码的方法，就是使用伪协议。

<a href="javascript:alert('伪协议')">点我</a>

在代码中，href 属性中的 “ JavaScript ” 就表示伪协议，后面一段 JavaScript 代码，当单击这个超链接后就会弹出 alert 警告框。在实际开发中不推荐使用这种方式。

在编写JavaScript代码时，应注意基本的语法规则，避免程序出错，具体如下：

  1. JavaScript 严格区分大小写，在编写代码时一定注意大小写的正确性。例如：将案例代码中的 alert 改成大写的 ALERT，则警告框无法弹出。
  2. JavaScript 代码对空格、换行、缩进不敏感，一条语句可以分成。能多行书写。例如，将 alert 后面的 “（ ” 换到下一行，程序依然正确执行。
  3. 如果一条语句书写结束后，换行书写下一条语句，前一行语句后面的分号可以省略。

1.3.2_注释

1. 单行注释 “ // ”

<script>
alert('Hello,JavaScript'); // 输出Hello,JavaScript
</script>

2. 多行注释 “ /* */ ”

<script>
alert('Hello,JavaScript'); 
/* 输出
Hello,JavaScript
*/
</script>

1.3.3_输入和输出语句

语句 说明
alert（’msg‘） 浏览器弹出警告框
console.log（’msg‘） 浏览器控制台输出信息
prompt (‘msg’) 浏览器弹出输出框，用户可以输入内容 
<script>
alert("这是一个警告框"); 
console.log ('在控制台输出信息');
prompt ('这是一个输入框');
document.write("输出语句");
</script>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

1.3.4_控制台的使用

在浏览器的控制台中可以直接输入 JavaScript 代码来执行。

在这里插入图片描述

1.4_JavaScript变量

1.4.1_什么是变量

变量是程序在内存中申请的一块用来存放数据的空间

1.4.2_变量的使用

1. 声明变量

var age;   // 声明变量

2. 变量赋值

age = 10;   // 为变量赋值

alert(age);        // 使用alert()警告框输出age的值
console.log(age);  // 将age的值输出到控制台中
  1. 变量初始化
var age = 10;   //声明变量同时赋值

1.4.3_变量的应用案例

  1. 使用变量保存个人信息
<script>
var myName = '小明';  //名称
var address = 'xx市xx区';  //地址
var age = 18;  //年龄
var email = 'xiaoming@localhost';  //电子邮箱
console.log(myName);
console.log(address);
console.log(age);
console.log(email);  //输出相应的值
</script>

在这里插入图片描述

  1. 使用变量保存用户输入的值
<script>
var myName = prompt('请输入您的名字');
alert(myName);
</script>

1.4.4_变量的语法细节

1. 更新变量的值

var myName = '小明';   //变量赋初值
console.log (myName);  //输出结果：小明
var myName = '李华';  //更新变量的值
console.log (myName)  //输出结果：小红

2. 同时声明多个变量

var myName,age,email;  //同时声明多个变量，不赋值
var myName = '小明'，
    age = 18,
    email = 'xiaoming@localhost';

3. 声明变量的特殊情况

（1）只声明变量，但不赋值，则输出变量时，结果为 undefined

var age;
console.log (age);  //输出结果：undefined

(2) 不声明变量，直接输出变量的值，则程序会出错

console.log (age);

如果前一行代码出错，则后面的代码不会执行。因此，在开发中，如果代码没有按照期望的执行，可以打开控制台看一下是否有错误提示，找到具体是哪一行出错了

（3）不声明变量，只进行赋值

age1 = 10;       //变量age1没有使用var进行声明
console.log (age1);  //输出结果：10

从输出结果可以看出，直接赋值一个未声明的变量，也可以正确输出变量的值。这个情况是 JavaScript 语言的特性，学到全局作用域、window 对象的时候就理解了

1.4.5_变量的命名规范

在对变最进行命名时，需要遵循变量的命名规范，从而避免代码出错，以及提高代码的可读性

①由字母、数字、下划线和美元符号($)组成，如age、num。

②严格区分大小写，如app和App是两个变量。

③不能以数字开头，如18age是错误的变量名。

④不能是关键字、保留字，如var、for、 while 等是错误的变量名。

⑤要尽量做到“见其名知其意”，如age表示年龄，num表示数字。

⑥建议遵循驼峰命名法，首字母小写，后面的单词首字母大写，如myFirsName。

在 JavaScript 中，关键字分为“保留关键字”和“未来保留关键字”。保留关键字是指在 JavaScript 语言中被事先定义好并赋予特殊含义的单词， 不能作为变量名使用。

未来保留关键字是指 ECMAScript 规范中预留的关键字，目前它们没有特殊功能，但是在未来的某个时间可能会加上。
未来保留关键字建议不要当作变量名来使用，以避免未来它们转换成关键字时出错。

标识符
在 JavaScript 中还有一个标识符的概念。标识符是指开发人员为变量、函数取的名字。例如，变量名 age 就是一个标识符。从语法上来说，不能使用关键字作为标识符，否则会出现语法错误。

在这里插入图片描述

  • 要将脸朝向有光的地方
    时间长了
    你自然学会了和自己相处的诀窍

在这里插入图片描述

  • 愿这一遭走过
    仍能心怀梦想
    不丢信仰
    _
    你好，我是阿Ken
    感谢来访
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kenken_/article/details/108333043

智能推荐

Eclipse中配置WebMagic(已配置好Maven)_使用eclipse搭建webmagic工程-程序员宅基地

文章浏览阅读364次。1.WebMagicWebMagic是一个简单灵活的Java爬虫框架。基于WebMagic，你可以快速开发出一个高效、易维护的爬虫。2.在Eclipse中配置WebMagic1.首先需要下载WebMagic的压缩包官网地址为：WebMagic官网最新版本为：WebMagic-0.7.3，找到对应版本，打开下载界面，注意，下载要选择Source code(zip)版本，随便下载到哪里都可以；2.下载好的压缩包需要解压，此时解压到的位置即为后续新建的Eclipse的project位置，比如我的Ecli_使用eclipse搭建webmagic工程

linux启动mysql_linux如何启动mysql服务_linux启动mysql服务命令是什么－系统城-程序员宅基地

文章浏览阅读1.9k次。mysql数据库是一种开放源代码的关系型数据库管理系统，有很多朋友都在使用。一些在linux系统上安装了mysql数据库的朋友，却不知道该如何对mysql数据库进行配置。那么linux该如何启动mysql服务呢？接下来小编就给大家带来linux启动mysql服务的命令教程。具体步骤如下：1、首先，我们需要修改mysql的配置文件，一般文件存放在/etc下面，文件名为my.cnf。2、对于mysql..._linux中 mysql 启动服务命令

php实现在线oj,详解OJ(Online Judge)中PHP代码的提交方法及要点-程序员宅基地

文章浏览阅读537次。详解OJ(Online Judge)中PHP代码的提交方法及要点Introduction of How to submit PHP code to Online Judge SystemsIntroduction of How to commit submission in PHP to Online Judge Systems在目前常用的在线oj中，codeforces、spoj、uva、zoj..._while(fscanf(stdin, "%d %d", $a, $b) == 2)

java快捷键调字体_设置MyEclipse编码、补全快捷键、字体大小-程序员宅基地

文章浏览阅读534次。一、设置MyEclipse编码(1)修改工作空间的编码方式：Window-->Preferences-->General-->Workspace-->Text file encoding(2)修改一类文件的编码方式：Window-->Preferences-->General-->content Types-->修改default Encoding(..._java修改快捷缩写内容

解析蓝牙原理_蓝牙原理图详解-程序员宅基地

文章浏览阅读1.4w次，点赞19次，收藏76次。1.前言市面上关于Android的技术书籍很多，几乎每本书也都会涉及到蓝牙开发，但均是上层应用级别的，而且篇幅也普遍短小。对于手机行业的开发者，要进行蓝牙模块的维护，就必须从Android系统底层，至少框架层开始，了解蓝牙的结构和代码实现原理。这方面的文档、网上的各个论坛的相关资料却少之又少。分析原因，大概因为虽然蓝牙协议是完整的，但是并没有具体的实现。蓝牙芯片公司只负责提供最底层的API_蓝牙原理图详解

从未在一起更让人遗憾_“从未在一起和最终没有在一起哪个更遗憾”-程序员宅基地

文章浏览阅读7.7k次。图/源于网络文/曲尚菇凉1.今天早上出门去逛街，在那家冰雪融城店里等待冰淇淋的时候，听到旁边两个女生在讨论很久之前的一期《奇葩说》。那期节目主持人给的辩论题是“从未在一起和最终没有在一起哪个更遗憾”，旁边其中一个女生说，她记得当时印象最深的是有个女孩子说了这样一句话。她说:“如果我喜欢一个人呢，我就从第一眼到最后一眼，把这个人爱够，把我的感觉用光，我只希望那些年让我成长的人是他，之后的那些年他喝过..._从未在一起更遗憾

随便推点

Spring Cloud Alibaba 介绍_sprngcloud alba-程序员宅基地

文章浏览阅读175次。Spring Cloud Alibaba 介绍Sping体系Spring 以 Bean（对象） 为中心，提供 IOC、AOP 等功能。Spring Boot 以 Application（应用） 为中心，提供自动配置、监控等功能。Spring Cloud 以 Service（服务） 为中心，提供服务的注册与发现、服务的调用与负载均衡等功能。Sping Cloud介绍官方介绍​ Tools for building common patterns in distributed systems_sprngcloud alba

测试 数据类型的一些测试点和经验_基础字段的测试点-程序员宅基地

文章浏览阅读3.2k次，点赞4次，收藏21次。我这里是根据之前在测试数据类项目过程中的一些总结经验和掉过个坑，记录一下，可以给其他人做个参考，没什么高深的东西，但是如果不注意这些细节点，后期也许会陷入无尽的扯皮当中。1 需求实现的准确度根据产品需求文档描述发现不明确不详细的或者存在歧义的地方一定要确认，例如数据表中的一些字段，与开发和产品确认一遍，如有第三方相关的，要和第三方确认，数据类项目需要的是细心，哪怕数据库中的一个字段如果没有提前对清楚，后期再重新补充，会投入更大的精力。2 数据的合理性根据业务场景/常识推理，提..._基础字段的测试点

一文看懂：行业分析怎么做？_码工小熊-程序员宅基地

文章浏览阅读491次。大家好，我是爱学习的小xiong熊妹。在工作和面试中，很多小伙伴会遇到“对XX行业进行分析”的要求。一听“行业分析”四个字，好多人会觉得特别高大上，不知道该怎么做。今天给大家一个懒人攻略，小伙伴们可以快速上手哦。一、什么是行业？在做数据分析的时候，“行业”两个字，一般指的是：围绕一个商品，从生产到销售相关的全部企业。以化妆品为例，站在消费者角度，就是简简单单的从商店里买了一支唇膏回去。可站在行业角度，从生产到销售，有相当多的企业在参与工作（如下图）在行业中，每个企业常常扮._码工小熊

LLaMA 简介：一个基础的、650 亿参数的大型语言模型_llma-程序员宅基地

文章浏览阅读1.6w次，点赞2次，收藏2次。还需要做更多的研究来解决大型语言模型中的偏见、有毒评论和幻觉的风险。我们在数万亿个令牌上训练我们的模型，并表明可以仅使用公开可用的数据集来训练最先进的模型，而无需诉诸专有和不可访问的数据集。在大型语言模型空间中训练像 LLaMA 这样的小型基础模型是可取的，因为它需要更少的计算能力和资源来测试新方法、验证他人的工作和探索新的用例。作为 Meta 对开放科学承诺的一部分，今天我们公开发布 LLaMA（大型语言模型元 AI），这是一种最先进的基础大型语言模型，旨在帮助研究人员推进他们在 AI 子领域的工作。_llma

强化学习在制造业领域的应用：智能制造的未来-程序员宅基地

文章浏览阅读223次，点赞3次，收藏5次。1.背景介绍制造业是国家经济发展的重要引擎，其产能和质量对于国家经济的稳定和发展具有重要意义。随着工业技术的不断发展，制造业的生产方式也不断发生变化。传统的制造业通常依赖于人工操作和手工艺，这种方式的缺点是低效率、低产量和不稳定的质量。随着信息化、智能化和网络化等新技术的出现，制造业开始向智能制造迈出了第一步。智能制造的核心是通过大数据、人工智能、计算机视觉等技术，实现制造过程的智能化、自动化...

ansible--安装与使用_pip安装ansible-程序员宅基地

文章浏览阅读938次。系列文章目录文章目录系列文章目录 前言 一、ansible是什么？ 二、使用步骤 1.引入库 2.读入数据 总结前言菜鸟一只，刚开始使用，仅作以后参考使用。边学习，边记录，介绍一下最基础的使用，可能会有理解不到位的地方，可以共同交流，废话不多说，走起。一、ansible 简介？ansible是自动化运维工具的一种，基于Python开发，可以实现批量系统配置，批量程序部署，批量运行命令，ansible是基于模块工作的，它本身没有批量部署的能力，真正.._pip安装ansible

推荐文章

热门文章

相关标签