本文主要是介绍day01初始JavaScript，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

js核心语法 day01

目标：

• 什么是JavaScript？

• JavaScript由什么组成？

• JavaScript的特点

• 怎么样声明并使用一个变量

• 数据类型

一、什么是JavaScript

JavaScript 是面向 Web 的编程语言，绝大多数现代网站都使用了 JavaScript，并且所有的现代 Web 浏览器（电脑，手机，平板）均包含了 JavaScript 解释器。 这使得 JavaScript 能够称得上史上使用最广泛的编程语言。 JavaScript 也是前端开发工程师必须掌握的三种技能之一：描述网页内容的 HTML、描述网页样式的 CSS、以及描述网页行为的 JavaScript。

JavaScript 起源

时间：1995年

人物：Brendan Eich（布兰登·艾奇10天）

背景：那个时候，绝大多数因特网用户都是用速度仅为28.8kbit/s的「猫」上网，为了完成简单的表单验证，必须把表单数据发送到服务器端才能确定用户是否没有填写某个必填域、是否输入了无效的值，每次操作需等待30秒以上才会有结果，这无疑是在慢性自杀。

事件：当时走在技术革新最前沿的 Netscape 公司指派 Brendan Eich 开发一种客户端语言，用来处理这种简单的验证，它就是 JavaScript。JavaScript 原名 LiveScript，Netscape 为了搭上媒体热炒 Java 的顺风车，才把 LiveScript 改名为 JavaScript。（所以 Java 和 JavaScript 的关系，就相当于雷锋和雷峰塔的关系。）

自此以后，JavaScript 逐渐成为市面上常见浏览器必备的一项特色功能。如今，JavaScript 的用途早已不再局限于简单的数据验证，而是具备了与浏览器窗口及其内容等几乎所有方面交互的能力。今天的 JavaScript 已经成为一门功能全面的编程语言，能够处理复杂的计算和交互，拥有了闭包、匿名（lambda）函数，甚至元编程等特性。

JavaScript 从一个简单的输入验证器发展成为一门强大的编程语言，完全出乎人们的意料。应该说，它既是一门非常简单的语言，又是一门非常复杂的语言。说它简单，是因为学会使用它只需片刻功夫；而说它复杂，是因为要真正掌握它则需要数年时间。

前端开发三大基础知识

• html （专门编写网页内容）

• Css （专门设计网页的样式）

• JavaScript（js）专门设计网页的交互效果的

• 交互：输入数据 =》程序处理数据 =》返回结果 =》“解释执行”:和读书一样的 一行一行的往下读 专门在js的解释器中运行（浏览器自带的解释器）

二、JavaScript的组成

• Js由三部分组成

• ECMASCRIPT(js语法) es5 es6 typescript（ECMAScript 标准由 语法、数据类型、语句、关键字、保留字、运算符、对象 组成。它与 Web 浏览器没有任何依赖关系，并且这门语言本身并不包含输入和输出定义。ECMAScript 定义的只是这门语言的基础，而在此基础之上可以构建更完善的脚本语言。）

• DOM(文档对象模型,DocumentObject Model，简称DOM) 提供访问和操作网页内容的方法和接口，将js嵌套到网页中操作html标签,通过 DOM 提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）

• BOM(浏览器对象模型,Browser Object Model，简称BOM,专门操作浏览器窗口的工具 浏览器自行规定的 所以它没有标准) 提供与浏览器交互的方法和接口,通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。

三、JavaScript的特点

• 脚本语言。JavaScript是一种解释型的脚本语言，C、C++等语言先编译后执行，而JavaScript是在程序的运行过程中逐行进行解释。（边解释边执行）

• 基于对象。JavaScript是一种基于对象的脚本语言，它不仅可以创建对象，也能使用现有的对象。

• 动态性。JavaScript是一种采用事件驱动的脚本语言，它不需要经过Web服务器就可以对用户的输入做出响应。在访问一个网页时，鼠标在网页中进行鼠标点击或上下移、窗口移动等操作JavaScript都可直接对这些事件给出相应的响应。

• 跨平台性。JavaScript脚本语言不依赖于操作系统，仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用，前提上机器上的浏览器支持JavaScript脚本语言，目前JavaScript已被大多数的浏览器所支持。

• 弱类型（重点）。JavaScript语言中采用的是弱类型的变量类型，对使用的数据类型未做出严格的要求，是基于Java基本语句和控制的脚本语言，其设计简单紧凑

Java定义一个变量
Int a=123；// int：数据类型是整形   a：表示变量名  123 值
Js定义一个变量
var a=123 // var表示声明的意思  a:表示变量名   123值

四、JavaScript运行环境的搭建

1. 在html中运行

这种运行只需要一个文档编辑器+浏览器，就可以实现JS代码的运行。

1.1：<script></script>(js的语句嵌套到html里面，浏览器解释执行整个html文件) 最好是放到body里面 head里面

2.2 元素里面可以使用js代码

  <div onclick="get()">box</div>

这个是js的一个点击事件，但它也属于这个元素的特殊的属性

事件：元素可以根据鼠标或者键盘的不同操作响应不同的交互行为，事件就是特殊的属性。

2. 直接运行JS程序

需要下载安装node.js环境，类似于python、java一样，此时运行JS程序不需要html的协助，而可以直接运行。

例如，cmd中 node xxx.js 即可 ， 也需要配置环境变量。

五、JavaScript的三种使用方式

1、行内js

<input type="button" value="点击有惊喜" onclick="javascript:alert('哈哈哈哈')">
<!--onclick:点击触发一个事件，alert：弹出一个对话框-->

2、内部js：script里的程序整个页面都可以用

<script type="text/javascript">
//声明一个函数(整个文档都可以使用)
function surprise() {
alert('恭喜你中了一百万')/*弹出框*/
}
</script>

3、外部js：很多html页面都可以调用设定的js页面

<script src="./js/demo.js" type="text/javascript" >

六、JavaScript 输出

• 使用 window.alert() 弹出警告框。

• alert('hello world!')

• 使用 document.write() 方法将内容写到 HTML 文档中。

• document.write('hello world!')

• 使用 innerHTML 写入到 HTML 元素。

• document.getElementById("demo").innerHTML = d!";

• 使用 console.log() 写入到浏览器的控制台。

• console.log('hello world!')

七、JavaScript变量

1.字面量

在编程语言中，一般固定值称为字面量，如 3.14(用来为变量赋值时的常数量 )。

• 数字（Number）字面量 可以是整数或者是小数，或者是科学计数(e)。

• document.getElementById("demo").innerHTML = 123e5;
  document.getElementById("demo").innerHTML = 3.14;

• 字符串（String）字面量 可以使用单引号或双引号:

document.getElementById("demo").innerHTML = 'hello world';

注意：Js中区分大小写 字符串 “ ” 、‘ ’

• 表达式字面量 用于计算：

document.getElementById("demo").innerHTML = 5+6;
document.getElementById("demo").innerHTML = 5*6;

• 数组（Array）字面量 定义一个数组：

[1,2,3,4]

• 对象（Object）字面量 定义一个对象：

{
    name:'张三'，
    age:'20',
    hobby:['football','swim']
}

• 函数（Function）字面量 定义一个函数：

function myFunction(a, b) {
    return a * b;
}

2.JavaScript 变量

在编程语言中，变量用于存储数据值。

JavaScript 使用关键字 var 来定义变量， 使用等号来为变量赋值：

• 变量是一个名称。字面量是一个值。

常量：值固定不变，不能去更改

const a=3.1415926....

变量：值可以变化的量

var 变量名；//没有值的情况下（未定义）
//如果一个变量只声明，没有给值，那么它的值默认就是underfined（未定义）
//Var  变量名=值；
//“=”赋值：将等号右边的值，装入左边的变量中

思考：Var a=123；怎么在内存中解释这句话呢？

变量的命名规则：

• 变量不能使用关键字/保留字

  关键字可用于表示控制语句的开始或结束，或者用于执行特定操作等。关键字也是语言保留的，不能用作标识符。

  break | do | instanceof | type
  case | else | new | var
  catch | finally | return | void
  continue | for | switch | while
  debugger | function | this | with
  default | if | throw
  delete | in | try

  保留字也不能用作标识符，尽管保留字在这门语言中还没有任何特定的用途，但它们有可能在将来被用作关键字

  abstract | enum | int | short
  boolean | export | interface | static
  byte | extends | long | super
  char | final | native | synchronized
  class | float | package | throws
  const | goto | private | transient
  debugger | implements | protected | volatile
  double | import | public

• 变量名中可以包含数字 字母 下划线 $ ( 不能以数字开头，不能已标点符号开头)

• 变量名最好见名知意

• 变量名推荐使用如下几种规则

  1.驼峰命名

  1) 小驼峰命名， userName

  2) 大驼峰命名 UserName

  2.下划线命名 user_name

3.如何使用变量？

//使用变量名等效于使用里面的值。
var name = '张三'
console.log(name)
//为什么要使用变量？因为值是变化的

八、JavaScript 运算符

算数运算符用于对数字执行算数运算：

赋值运算符向 JavaScript 变量赋值。

JavaScript 比较运算符

JavaScript 逻辑运算符

九、JavaScript 语句

在 HTML 中，JavaScript 语句向浏览器发出的命令。

语句是用分号分隔：

var x,y;
x = 5;
y = x + 10;
console.log(x+y)

十、数据类型

为什么要有数据类型？

因为现实生活中所有的数据类型根据用途的不同，都分为不同的数据类型

比如：手机号码是用数字,写作文用的文字 没有任何的意义

1.变量中存储的数据类型

• Js是弱类型

• 变量本身没有类型，只有变量的值才有类型

• 弱类形语言中的变量可以先后赋值为不同的类型的值

2.数据类型的分类：

1. 原始类型

数字 字符串 布尔 null underfined

1. 引用类型

Object function date error array math 正则表达式

1. 数字 字符串 布尔（包装类型）

   var str = 'hello'; //string 基本类型
   var s2 = str.charAt(0);
   在执行到这一句的时候 后台会自动完成以下动作 ：
   （ 
    var _str = new String('hello'); // 1 找到对应的包装对象类型，然后通过包装对象创建出一个和基本类型值相同的对象
    var s2 = _str.chaAt(0); // 2 然后这个对象就可以调用包装对象下的方法，并且返回结给s2.
    _str = null;  //    3 之后这个临时创建的对象就被销毁了， str =null; 
    ） 
   ​
   alert(s2); // h

   上面的string是一个基本类型，但是它却能召唤出一个 charAt() 的方法，主要是因为在基本类型中，有三个比较特殊的存在就是：String Number Boolean，这三个基本类型都有自己对应的包装对象。包装对象，其实就是对象，有相应的属性和方法。调用方法的过程，是在后台偷偷发生的。

原始类型：数据保存在变量的本地（栈区中）

原始类型和引用类型的区别？

原始类型存储在栈中，引用类型存储在堆中

你口袋里面的钱是存储在你口袋里面（存储在本地，属于原始类型）

手机存储的手机号码是指向某个人（指向的意思）

这篇关于day01初始JavaScript的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！