编程技术

Document

JavaScript零基础入门day01

零基础入门day01

一、JavaScript基础知识（欢迎学习）

1995年2月发布的，Netscape Navigator 2浏览器开发一种名为 LiveScript 的脚本语言。为了赶在发布日期前完成 LiveScript的开发，Netscape 与 Sun 公司建立了一个开发联盟，共同开发 LiveScript。在 NetScape Navigator 2 发布前夕，网景为了更好地推广这个脚本语言（利用 Java语言的知名度），临时把 LiveScript 改名为 JavaScript，实际上两者没有任何关系。

JavaScript和HTML、CSS的区别

关于JavaScript与HTML和CSS的区别：

  1. Html：结构层，提供网页的结构，提供网页中的内容；
  2. CSS: 表示层，用来美化网页；
  3. JavaScript：行为层，可以用来控制网页内容，给网页增加动态的效果，用于跟用户的交互；

JavaScript可以做什么

JavaScript的用途已经不仅局限于浏览器了，Node.js的出现使得开发人员能够在服务器端编写JavaScript代码，使得JavaScript的应用更加广泛。

Javascript的特点

  • Javascript是一个脚本语言，可跨平台，支持面向对象。
  • 脚本（Script）简单地说就是一条条的文本命令，按照程序流程执行。
    常见的脚本语言：JavaScript、VBScript、Perl、PHP、Python等。
    非脚本语言：C、C++、Java、C#等。
  • 脚本语言与非脚本语言的区别：
    非脚本语言一般需要编译、链接，生成独立的可执行文件后才能运行。
    脚本语言依赖于解释器，只在被调用时自动进行解释或编译。
  • 几乎所有的浏览器，包括手机等各类移动设备。
    特点：JavaScript语言不依赖操作系统，仅需要浏览器的支持。

Javascript的组成

JavaScript由三部分组成：

  • ECMAScript - JavaScript的核心
    • ECMA 欧洲计算机制造联合会
    • JavaScript的核心，描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了一种语言的标准与具体实现无关
  • DOM(Document Object Model) - 文档对象模型
    • 一套操作页面元素的API（API（Application Programming Interface，应用程序接口））DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作。
  • BOM(Browser Object Model) - 浏览器对象模型
    • 一套操作浏览器功能的API（接口-类库-方法）,通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等。

如何使用JavaScript（重点）

标题使用 javascript: 前缀构建执行 JavaScript 代码的 URL。

<a href="javascript:alert('Hello JavaScript')">点我</a>

使用 javascript:

将 JS 代码写到元素的事件属性值中

<div onclick="window.alert('Hello JavaScript!')"></div>

将 JS 代码写到元素的事件属性值中

内部代码（内嵌式/与css内嵌式相同原理）

如果页面需要中包含大量的 JavaScript 代码，则建议将这些JavaScript脚本放在<script> 标签中。<script> 元素即可作为 <head> 的子元素，也可作为 <body>的子元素，通常位于<body>元素闭合标签的前面。

<script type="text/javascript">
	alert('Hello JavaScript')
</script>

外部代码（外链式/与css外链式相同原理）

为了让 HTML 页面和 JavaScript 脚本更好地分离，我们可以将 JavaScript脚本单独保存在一个 .js 文件中，HTML 页面导入该 .js 文件即可。

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

理解Window对象

Window 对象表示浏览器中打开的窗口。

在页签浏览器（比如 Chrome）中，浏览器会为 HTML 文档创建一个 window 对象，每个页签具有自己的 window对象。也就是说，同一个窗口的页签之间不会共享一个 window 对象。window对象给我们提供了一些方法、属性和事件.

<script type="text/javascript">
// 警告框
window.alert('哈哈');

// 确认框
window.confirm('确认退出该应用吗？');

// 输入框
window.prompt('请输入密码？');
</script>

window对象的属性

<script>
// 控制台打印 日志 （常用）
window.console.log('日志信息');

// 显示一个对象的所有属性和方法
window.console.dir(window);

//document对象输出的方法，使用该方在文档中输出 HTML
window.document.write("输出到文档");

</script>

控制台输出

window对象的一些补充

window对象的属性和方法 可以不写前缀 window. 可以直接写 console.log(“你好”)

关键字和保留字

关键字

这些标识符已经被 ECMAScript收录（使用）了，它们被赋予特殊的意义（功能）了，所有我们不能使用它们作为标识符。
javascript关键字

保留字

虽然这些标识符并没有被 ECMAScript 收录，但是将来的某个时候，可能会被ECMAScript收录，变成关键字，也就是说，这些标识符已经被预定了，因此我们也不能使用它们。
javascript保留字

代码写作规范要求

JavaScript对换行、缩进、空格不敏感。也就是说代码只要写出来写的对就可以正常运行。但是在写的时候建议每一句代码都用分号结束，虽然分号不是必须加的，但是如果代码写在一行的时候没有分好结束会报错，包括后期压缩js文件是会把代码压缩成为一行，这时候如果没有分号结束那么代码肯定报错。

二、变量（重点）

定义变量

  • 变量是一种使用方便的占位符，用于引用计算机内存地址，该地址可以存储Script运行时可更改的程序信息，存放数据的容器。
  • 语法：JavaScript中变量通常利用var关键字声明，并且变量名的命名规则与标识符相同。

要声明一个变量你需要首先使用关键字 var，然后输入任何你想要的名称，但是要符合标识符的命名规则：

  • 命名规则：当标识符中需要多个单词进行表示时，常见的表示方式有下划线法(user_name)、驼峰法（如userName）和帕斯卡法（如UserName）。读者可根据开发需求统一规范命名的方式，如下划线方式通常应用于变量的命名，驼峰法通常应用于函数名的命名等。

如何定义变量

  • 变量的声明
var age;
  • 变量的赋值
var age;
age = 18;

变量的声明和变量的赋值都有那么就是变量初始化。

  • 简单写法
var fname = 'Bob';
//省略var
name = 'Lily';
  • 同时声明多个变量
var name,age;
name = '张三';
age = 18;

-同时声明多个变量并赋值

var name = '李四',age = 20;

注意点：

  • 不声明，直接省略var关键字为变量赋值不会发生错误，但是在函数内部不用var的变量是全局变量。

变量在内存中的存储

变量的本质是在内存中申请的一块用来存放数据的空间。

var age = 18;
var uname='张美丽';

变量在内存中

变量的声明提升

变量被定义之后，你可以通过变量名称读取变量的值：

var userName = '张三';
console.log(userName);

但是，在变量定义代码之前，通过变量名称读取变量的值，会出现什么情况呢：

console.log(userName);
var userName = '张三';

![在这里插入图片描述](https://img-blog.csdnimg.cn/0d91e8ac74334d25b575b7b1a4d0e289.png
由于变量的声明会被提升到当前作用域的最顶端，而赋值并不会被提升，因此上面的代码输出
undefined（当变量未被初始化(定义)时变量的值默认为undefined）。可以使用下面的代码解释：

var userName; // 声明变量
console.log(userName); // undefined
userName = '张三'; // 变量赋值 并且初始化完成

三、数据类型

  • 为什么需要数据类型?

    在计算机中，不同的数据所需占用的存储空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型。
    简单来说，数据类型就是数据的类别型号。比如姓名“张三”，年龄18，这些数据的类型是不一样的。

  • 变量的数据类型
    变量是用来存储值的所在处，它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。

  • JavaScript是一种弱类型或者说动态类型的语言。在声明变量时，我们不要指定变量的类型，在程序运行过程中，类型会被自动确定。这意味着JS变量的内存空间中可以存放任意类型的数据。

数据类型分类

  • 基础数据类型
    • Boolean(布尔)
    • Number(数值)
    • String(字符串)
    • Null(空)
    • Undefined(未定义)
  • 复合数据类型
    • Object(对象)

JavaScript定义不同变量方法

在其他强类型编程语言中，变量的空间所能存放的数据类型是事先规定好的,JS确不一样:

var num = 42; // 数字
var str = "bar"; // 字符串
var bool = true; // 布尔

原始类型

// Boolean 类型
var gender = false;// 逻辑假
var gender = true;// 逻辑真

// Number类型
var num = 26;// 十进制的26
var num = 032;// 八进制的26
var num = 0.5;// 小数

// String 类型
var str = 'Knowledge';// 单引号，存放一个单词
var str = "the sky is blue.";// 双引号，存放一个句子
var str = '"red"blue'; // 单引号中包含双引号
var str = "'pizza'bread";// 双引号中包含单引号
var str = '';// 定义空字符串

// Undefined类型
var und = undefined;// undefined

// Null类型
var n = null;// 未指向任何对象的变量

复杂数据类型(引用类型)

在计算机科学中, 对象是指内存中的可以被 [标识符] 引用的一块区域。在 Javascript里，引用类型的数据指的是各种对象，他们在内存中的存储方式与原始类型的数据不同。以Object对象为例，Object对象是一组属性的集合。属性包含一个属性名和一个属性值，如下所示：

var user = {
    uname: "张美丽",
    age: 18,
    sex:false
};

字面量

在源代码中一个固定值的表示法。

数值字面量：8, 9, 10

字符串字面量：‘软件开发程序员’, “web前端”

布尔字面量：true，false

检测数据类型

JavaScript中对于数据类型的检测提供了多种方式，现阶段我们需要了解以下这种：

  • typeof 操作符
// 基本类型或原始类型
var myName = '张三';
var age = 18;
var gender = false;
var weight = undefined;
var phone = null;
// 检查原始数据的类型
console.log(typeof myName); // 'string'
console.log(typeof age); // 'number'
console.log(typeof gender); // 'boolean'
console.log(typeof weight); // 'undefined'
console.log(typeof phone); // 'object' 
// 这是由于上古原因而遗留下的问题  Null在typeof返回的是 object


// 引用类型
var car = {
color: '蓝色',
brand: '哈喽单车'
};
// 检查引用数据的类型
console.log(typeof car); // 'object'

数据类型转换

数据类型转换分为两类：

  • 强制转换：编程人员编写代码强制对数据进行转换。

  • 隐式转换：不是编程人员刻意去转换的，而是浏览器（JS 解析引擎）帮我们自动转换的。

其他类型转成Boolean

使用 Boolean( ) 方法将其他类型的数据转换成 Boolean 类型。

  • 这些值将被转换成 false
    • undefined
    • null
    • 0
    • NaN(不是一个数值)
    • ‘ ’
console.log(Boolean(undefined)); // false
console.log(Boolean(null)); // false
console.log(Boolean(0)); // false
console.log(Boolean(NaN)); // false
console.log(Boolean('')); // false
  • 下面这些值将被转换成 true。
    • 非空字符串
    • 非零数字
    • 对象
console.log(Boolean(9527)); // true
console.log(Boolean({myname: 'Bob'})); // true
console.log(Boolean('abcd')); // true

其他类型转成Number

在这里插入图片描述

使用 Number()、parseInt()、 parseFloat() 方法将其他类型的数据转换成 Number 类型

// 使用 Number()  方法将数字类型的字符串，最后的结果保留原数据。
console.log(Number('123.456')); // 123.456

// 使用 parseInt() 方法将将数字类型的字符串通过该方法转换后,
// 只保留数字的整数部分，不会进行四舍五入运算。
// 以数字开始的字符串，保留数字部分忽略其他内容
console.log(parseInt('123.456')); // 123
console.log(parseInt('789abc')); // 789
console.log(parseFloat('abc789')); // NaN

// 使用 parseFloat() 方法将将数据转换成Number类型结果保留原数据，不会对数字进行四舍五入运算。
// 如果在数字后加上非数字的字符，也可以转换成功
console.log(parseFloat('123.456')); // 123.456
console.log(parseFloat('789abc')); // 789
console.log(parseFloat('abc789')); // NaN

其他类型转成String

  • 使用 String() 方法将其他类型的数据转换成 String 类型。
  • String()函数可以将任意类型转换为字符型；
// 转换完成后在结果上加上引号
console.log(String(123.456)); // '123.456'
console.log(String(null)); // 'null'
console.log(String(true)); // 'true'
console.log(String({myName: '李四'})); // '[object Object]'

隐式类型转换（特殊）

  • 利用隐式转换将字符串类型的数据转换成 Number 类型
// 当非数字类型的字符串相减时，结果都等于NaN
console.log('abc' - '18'); // NaN

// 当数字类型的字符串进行
// 减、乘、除、取余运算时，首先会将字符串转换成数字，然后再进行运算，最终的结果返回的是数值型。
console.log('28' - '18'); // 10 
console.log('3' * '4'); // 12 
console.log('32' / '4'); // 8 
console.log('12' % '5'); // 2
  • 利用隐式转换将其他类型的数据转换成 String类型。
// 最终的结果返回的是字符型
console.log(12 + ''); // '12' 
console.log(12 + 3 + '4'); // '154'
console.log( '4'+ 12 + 3); // '4123'