JavaScript基础

目录

1、初识 JavaScript

1.1、JS的组成

1.2、JS的书写位置

2、JavaScript 注释

2.1、单行注释

2.2、多行注释

3、JavaScript输入输出语句

4、变量

4.1、变量概述

4.2、变量的使用

4.3、变量语法扩展

4.4、变量命名规范 

4.5  交换变量案例

5、数据类型

5.1、数据类型简介

5.2、简单数据类型

6、获取变量数据类型

6.1、获取检测变量的数据类型

6.2、字面量

7、数据类型转换

7.1、什么是数据类型转换

7.2、转换为字符串

7.3、转换为字符型

8、案例

---

1、初识 JavaScript

1.1、JS的组成

JavaScript包括 ECMAScript(JavaScript语法)、DOM(页面文档对象模型)、BOM(浏览器对象模型)

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

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

• 文档对象模型 （Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的 标准编程接口 。通过 DOM 提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）。
• BOM (Browser Object Model，简称BOM) 是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行 互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。

1.2、JS的书写位置

JS 有3种书写位置，分别为行内、内嵌和外部。

1、行内式JS

<input type="button" value="点我式试" οnclick="alert ( ' Hello world' )" />

• 可以将单行或少量JS代码写在HTML标签的事件属性中(以on开头的属性），如: onclick
• 注意单双引号的使用:在HTML中我们推荐使用双引号,JS中我们推荐使用单引号
• 可读性差，在html中编写JS大量代码时不方便阅读;
• 引号易错，引号多层嵌套匹配时，非常容易弄混;
• 特殊情况下使用

2、内嵌式JS

<script>

        alert('Hello   World~!');

</script>

• 可以将多行JS代码写到 <script> 标签中
• 内嵌 JS 是学习时常用的方式

3、外部式JS

<script src="my.js"></ script>

• 利于HTML页面代码结构化，把大段JS代码独立到HTML页面之外，既美观，也方便文件级别的复用
• 引用外部JS文件的script标签中间不可以写代码
• 适合于JS代码量比较大的情况

2、JavaScript 注释

JS中的注释主要有两种，分别是单行注释和多行注释

2.1、单行注释

单行注释的注释方式如下：

// 我是一行文字，不想被 JS引擎 执行，所以 注释起来

// 用来注释单行文字（ 快捷键 ctrl + / ）

2.2、多行注释

多行注释的注释方式如下：

/*

        我是多行注释

        我是多行注释

*/

/**/用来注释多行文字( 快捷键Ctrl+shift+/ )

3、JavaScript输入输出语句

为了方便信息的输入输出，JS中提供了一些输入输出语句，其常用的语句如下:

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

<script>
        // 这是一个输入框
        prompt('请输入您的年龄');
        // alter弹出警示框 输出的展示给用户的
        alert('计算的结果是');
        // console 控制台输出 给程序员测试用的
         console.log('我是程序员能看到的');
    </script>

4、变量

4.1、变量概述

• 什么是变量？

白话：变量就是一个装东西的盒子。

通俗：变量是用于存放数据的容器。 我们通过 变量名 获取数据，甚至数据可以修改

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

类似我们酒店的房间，一个房间就可以看做是一个变量。

4.2、变量的使用

变量在使用时分为两步： 1. 声明变量    2. 赋值。

1、声明变量

var age;     //声明一个叫做age的变量

• var 是一个 JS关键字，用来声明变量( variable 变量的意思 )。使用该关键字声明变量后，计算机会自动为变量分配 内存空间，不需要程序员管
• age 是程序员定义的变量名，我们要通过变量名来访问内存中分配的空间

2、赋值

age  = 10;     // 给 age 这个变量赋值为 10

• = 用来把右边的值赋给左边的变量空间中 此处代表赋值的意思
• 变量值是程序员保存到变量空间里的值

3、变量的初始化

var age =18;     // 声明变量同时赋值为 18

声明一个变量并赋值， 我们称之为 变量的初始化。

 <script>
        // 1.声明了一个age的变量
        var age;
        // 2.赋值  把值存入这个变量中
        age = 18;
        // 3.输出结果
        console.log(age);
        // 变量的初始化
        var myname = '小明';
        console.log(myname);

        var name = '卡卡西';
        var address = '火影村';
        var ages = 30;
        var email = 'kakaxi@itcast.cn';
        var gz = 2000;

        console.log(name);
        console.log(address);
        console.log(ages);
        console.log(email);
        console.log(gz);

    </script>

4.3、变量语法扩展

1、更新变量

一个变量被重新复赋值后，它原有的值就会被覆盖，变量值将以最后一次赋的值为准。

var age = 18;

age = 81; //最后的结果就是81因为18被覆盖掉了

2、同时声明多个变量

同时声明多个变量时，只需要写一个var，多个变量名之间使用英文逗号隔开。

var age = 10,name = 'zs', sex = 2;

3、声明变量特殊情况

情况	说明	结果
var age ; console.log (age);	只声明不赋值	undefined
console.log(age)	不声明不赋值直接使用	报错
age = 10; console.log (age);	不声明只赋值	10

4.4、变量命名规范

•  由字母(A-Za-z)、数字(O-9)、下划线)、美元符号($ )组成，如: usrAge, num01,_name
• 严格区分大小写。var app;和var App;是两个变量
• 不能以数字开头。18age是错误的
• ·不能是关键字、保留字。例如:var、for、while
• 变量名必须有意义。MMD、BBD  nl→age
• 遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。myFirstName
• 推荐翻译网站:有道爱词霸

 4.5交换变量案例

 <script>
        /*      1.我们需要一个临时变量帮我们
                2.把apple1 给我们的临时变量 temp
                3.把Apple2里面的值给Apple1
                4.把临时变量里面的值给 apple2 */
                
        var temp;  //声明了一个临时变量为空
        var apple1 = '青苹果';
        var apple2 = '红苹果';
        temp = apple1;
        apple1 = apple2;
        apple2 = temp;
        console.log(apple1);
        console.log(apple2);
    </script>

5、数据类型

5.1、数据类型简介

• 为什么需要数据类型

在计算机中，不同的数据所需占用的存储空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型。

简单来说，数据类型就是数据的类别型号。比如姓名“张三”，年龄18，这些数据的类型是不一样的。

• 变量的数据类型

变量是用来存储值的所在处，它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。JavaScript是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。

var age  =  10;  //这是一个数字型

var areYouok ='是的';      //这是一个字符串

在代码运行时，变量的数据类型是由JS引擎根据=右边变量值的数据类型来判断的，运行完毕之后，变量就确定了数据类型。

var x= 6;    //x为数字

var ="Bill";     //x为字符串

• 数据类型的分类

简单数据类型(Number, string,Boolean, Undefined,Nul1)

复杂数据类型( object)

5.2、简单数据类型

• 基本数据类型

JavaScript中的简单数据类型及其说明如下:

简单数据类型	说明	默认值
Number	数字型，包含整型值和浮点型值，如21、0.21	0
Boolean	布尔值溪型，如true . false，等价于1和0	false
String	字符串类型，如"张三”注意咱们js里面，字符串都带引号	'' "
Undefined	var a;声明了变量a但是没有给值，此时a = undefined	undefined
Null	var a = null;声明了变量a为空值	null

• 数字型Number

1、数字型进制

最常见的进制有二进制、八进制、十进制、十六进制。

//1.八进制数字序列范围:0~7

var num1 = 07;ll对应十进制的7

var num2 = 019;l/对应十进制的19

var num3 = o8;l/对应十进制的8

//2.十六进制数字序列范围∶0~9以及A~F

var num = 0xA;

现阶段我们只需要记住，在JS中八进制前面加O，十六进制前面加Ox

2、数字型范围

JavaScript中数值的最大和最小值

alert (Number.MAx_VALUE); ll 1.7976931348623157e+308

alert (Number.MIN_VALUE); /5e-324

最大值:Number.MAX VALUE，这个值为∶1.7976931348623157e+308

最小值:Number.MIN_VALUE，这个值为:5e-32

3、数字型三个特殊值

alert (Infinity); ll Infinity

alert (-Infinity) ; ll -Infinity

alert(NaN);

lnfinity ，代表无穷大，大于任何数值

-Infinity，代表无穷小，小于任何数值

lnfinity ，代表无穷大，大于任何数值-Infinity，代表无穷小，小于任何数值

4、isNaN（）

用来判断一个变量是否为非数字的类型，返回true或者false

isNaN(x)     x是数字，返回false               x是一个非数字类型

                   x不是数字，返回true

var usrAge = 21;

var isok = isNaN (userAge) ;

console.log (isNum) ;                / / false , 21不是一个非数字

var usrName = "andy" ;

console.log (isNaN (userName)) ; ll true , "andy"是一个非数字

• 字符串型String

字符串型可以是引号中的任意文本，其语法为双引号""和单引号"

var strMsg ="我爱北京天安门~";       //使用双引号表示字符串

var strMsg2 ='我爱吃猪蹄~';            //使用单引号表示字符串//常见错误

var strMsg3 =我爱大肘子;               //报错，没使用引号，会被认为是js代码，但js没有这些语法

因为HTML标签里面的属性使用的是双引号，JS这里我们更推荐使用单引号。

1、字符串引号嵌套

JS可以用单引号嵌套双引号，或者用双引号嵌套单引号(外双内单，外单内双)

var strMsg ='我是"高帅富"程序猿';                        //可以用"'包含""

var strMsg2="我是′高帅富'程序猿";                     //也可以用""包含”/常见错误

var badQuotes = 'what on earth?";                        //报错，不能单双引号搭配

2、字符串转义符

类似HTML里面的特殊字符，字符串中也有特殊字符，我们称之为转义符。

转义符都是\开头的，常用的转义符及其说明如下:

转义符	解释说明
\n	换行符，n是newline的意思
\\	斜杠\
\'	'单引号
\"	”双引号
\t	tab 缩进
\b	空格，b是blank 的意思

3、字符串长度

字符串是由若干字符组成的，这些字符的数量就是字符串的长度。通过字符串的 length属性可以获取整个字符串的长度。

var strMsg ="我是帅气多金的程序猿! ";alert (strMsg . length) ; //显示11

4、字符串拼接

• 多个字符串之间可以使用＋进行拼接，其拼接方式为字符串＋任何类型=拼接之后的新字符串
• 拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串

//1.1字符串"相加"

alert ( ' hello' +' ' + 'world ' ); // hello world

/ /1.2数值字符串"相加"

alert ( '100'+ '100'); // 100100

//1.3数值字符串＋数值

alert ( '11'+ 12);//1112

+号总结口诀:数值相加，字符相连

5、字符串拼接加强

console.log ( '刘德华'+18);                 //只要有字符就会相连

var age = 18;

ll console.log ( '刘德华age岁啦');            //这样不行哦

console.log ( '刘德华'+ age) ;                        // 刘德华18

console.log ( '刘德华'+ age + '岁啦');                     // 刘德华18岁啦

我们经常会将字符串和变量来拼接，因为变量可以很方便地修改里面的值

变量是不能添加引号的，因为加引号的变量会变成字符串

如果变量两侧都有字符串拼接，口诀“引引加加”，删掉数字，变量写加中间

• 布尔型Boolen

布尔类型有两个值: true和false，其中true表示真(对)，而false表示假（错)。

布尔型和数字型相加的时候, true的值为1， false的值为0。

console.log (true + 1);              //2

console.log (false + 1);           // 1

• Undefined和Null

一个声明后没有被赋值的变量会有一个默认值undefined (如果进行相连或者相加时，注意结果)

var variable

console.log (variable) ;                                / / undefined

console.log( 你好'+ variable);                 //你好undefined

console.log (11 + variable);                // NaN

console.log (true + variable);                //NaN

一个声明变量给null值，里面存的值为空（学习对象时，我们继续研究null)

var vari = null;

console.log ( '你好'+ vari);                         //你好null

console.log (11 + vari) ;                          // 11

console.log (true + vari);                   //1

6、获取变量数据类型

6.1、获取检测变量的数据类型

typeof可用来获取检测变量的数据类型

var num = 18;

console.log (typeof num);                 //结果number

不同类型的返回值:

类型	例	结果
String	typeof"小白"	"string"
Number	typeof	"number"
Boolean	typeof true	"boolean"
Undefined	typeof undefined	"undefined"
Null	typeof null	"object"

6.2、字面量

字面量是在源代码中一个固定值的表示法，通俗来说，就是字面量表示如何表达这个值。

•  数字字面量:8,9,10
• 字符串字面量:'黑马程序员'，"大前端"
• 布尔字面量:true,false

7、数据类型转换

7.1、什么是数据类型转换

使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算，而需要转换变量的数据类型。通俗来说，就是把一种数据类型的变量转换成另外一种数据类型。

我们通常会实现3种方式的转换:

1. 转换为字符串类型
2. 转换为数字型
3. 转换为布尔型

7.2、转换为字符串

方式	说明	案例
toString()	转成字符串	var num= 1; alert(num.toString());
String()强制转换	转成字符串	var num= 1; alert(String(num));
加号拼接字符串	和字符串拼接的结果都是字符串	var num =1; alert(num+"我是字符串");

• toString()和String()使用方式不一样。
• 三种转换方式，我们更喜欢用第三种加号拼接字符串转换方式，这一种方式也称之为隐式转换。

7.3、转换为字符型

方式	说明	案例
parselnt(string)函数	将string类型转成整数数值型	parselnt(78')
parseFloat(string)函数	将string类型转成浮点数数值型	parseFloat(78.21')
Number()强制转换函数	将string类型转换为数值型	Number('12')
js隐式转换(- */)	利用算术运算隐式转换为数值型	'12'-0

• 注意parselnt和parseFloat单词的大小写，这2个是重点
• 隐式转换是我们在进行算数运算的时候，JS自动转换了数据类型

8、案例

计算年龄案例

<!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>计算年龄</title>
    <script>
        // 1.弹出输入框，输入出生年份，并存储在变量中
        var year = prompt('请输入您的出生年份：');    //用户输入
        // 2.用今年减去刚才输入的年份
        var result = 2021 - year;                   //程序内部处理
        // 3.弹出提示框
        alert('您的年龄是：' + result + '岁');       //输出结果


    </script>
</head>

<body>

</body>

</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>简单加法器</title>
    <script>
        // 1.先弹出第一个输入框，提示用户输入的第一个值
        var num1 = prompt('请输入第一个值：');
        // 2.再弹出第二个框，提示用户输入第二个值
        var num2 = prompt('请输入第二个值：');
        // 3.将输入的值转换为数字型后，再把这两个值相加，并将结果赋值给新的变量
        var result = parseFloat(num1) + parseFloat(num2);
        // 4.弹出结果
        alert('结果是：' + result);
    </script>
</head>

<body>

</body>

</html>