JavaScript学习【1】-输入输出、变量、数据类型

本文链接：https://blog.youkuaiyun.com/qq_48285331/article/details/144728147

初识JavaScript

视频、文档资料

vscode快捷键

tab键：输入了一部分代码，自动补全其余的代码

后面显示了可能需要的部分，如果符合个人需要，摁tab键，就可以补充完整。
ctrl+/：注释
1. 是 html注释，单行多行都可以
2. // 是js单行注释 ctrl+/，js双行注释 /* */：ctrl+/+shift

初识JavaScript

JavaScript是脚本语言，运行在客户端。

html、css、js

html/css标记语言——描述类语言

html决定网页结构和内容，决定看到什么，相当于人的身体
css决定网页呈现给用户的摸样，决定好不好看，相当于给人穿衣服、化妆

js脚本语言——编程类语言

实现业务逻辑和页面控制，决定功能，相当于人的各种动作

浏览器执行js简介

浏览器分成两部分：渲染引擎和js引擎

渲染引擎：用来解析html和css，俗称内核，比如Chrome浏览器的blink
js引擎：也成为js解释器，用来读取网页中的js代码，对其处理后运行，比如Chrome的vb

浏览器本身不会执行js代码，而是通过js引擎来执行。js引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所以js语言归为脚本语言，会逐行解释执行。

js的组成

js=ECMAScript（js语法）+DOM（页面文档对象模型）+BOM（浏览器对象模型）

ECMAScript：被称为JavaScript或JScript

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

BOM浏览器对象模型：提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过bom可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。

js三种书写位置

1、行内式的js 直接写到元素内部：位于body部分

<!-- 行内式的js  直接写到元素内部 -->
    <!-- 原本的： -->
    <input type="button" value="唐伯虎">
    <br/>
    <!-- 使用了js的： 
    onclick:点击会激发的效果
    alert：网页弹出内容，内容为括号内的内容
    -->
    <input type="button" value="唐伯虎" onclick="alert('秋香姐')">

效果：

在这里插入图片描述

行内式可读性差，不建议使用。

2、内嵌式的js，位于head部分的script内

 <script>
        // 开始书写js代码，功能：一打开就弹出一个框
        alert('沙漠骆驼')

    </script>

效果
在这里插入图片描述

内嵌式是学习时常使用的方式。

3、外部js

创建一个my.js文件，在改文件里面直接写js代码

在这里插入图片描述

之后在html文件里面的head中引用

 <!-- 3、外部js -->
    <script src="my.js">  </script>

效果
在这里插入图片描述

引用外部js文件的script标签中间不可以写代码
适用于js代码量比较大的情况

完整的代码如下：

<!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>js first</title>
    <style>
        /* css代码 */
    </style>
    <!-- 2、内嵌式的js 位于head部分-->
    <script>
        // 开始书写js代码，功能：一打开就弹出一个框
        alert('沙漠骆驼')

    </script>

    <!-- 3、外部js -->
    <script src="my.js">  </script>
</head>
<body>
    <!-- 1、行内式的js  直接写到元素内部 -->
    <!-- 原本的： -->
    <input type="button" value="唐伯虎">
    <br/>
    <!-- 使用了js的： 
    onclick:点击会激发的效果
    alert：网页弹出内容，内容为括号内的内容
    -->
    <input type="button" value="唐伯虎" onclick="alert('秋香姐')"> 

    
</body>
</html>

在html中推荐使用双引号，在js中使用单引号。比如alert语句就是单引号

输入输出语句

1、prompt(info) 浏览器弹出输入框，用户可以输入

代码：（得到的数据类型都是字符串型）

<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>2_输入输出</title>
    <script>
        // 这是一个输入框
        prompt('请输入你的年龄')
        // alert 弹出警示框 输出的 展示给用户的
        alert('计算的结果是：')
        // console 控制台输出 给程序员测试用的
        console.log('我是程序员能看到的')
    </script>
</head>

（注意，js代码使用的都是单引号）

效果：
在这里插入图片描述

2、console.log(msg) 浏览器控制台打印输出信息给程序员测试用的

效果：单击右键，点击检查选项查看网页，下面的控制台部分中有结果显示。

console.log(num1, num2)；//可以输出一个，也可以输出多个
在这里插入图片描述

3、alert(msg) 浏览器弹出警示框输出的展示给用户

变量

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

变量的使用：1、声明变量 2、赋值

1、声明变量: var 变量名

var age；

var：js的一个关键字，用来声明变量。使用该关键字声明变量后，计算机会自动为变量分配内存空间，不需要程序员管理

age：变量名，通过变量名访问内存中分配的空间。

标签后面不需要跟分号，但是这种类似于其他语言的写法是需要跟上分号的，人为的帮助计算机判断到哪里是一句话，但是标签可以自己就能做到。

不声明直接赋值使用，和正常情况下的结果是一样的，依然是全局变量（无论是不是在函数内部使用）
变量名可以重复，但是变量值不能重复。重复了，就相当于这两个是全等的

		var myname  = 'shiijia';
		var myname = '秋香姐'; // 变量名可以重复，但是变量值不能重复

		var na = 'love';
        var same = 'love';
        console.log(na === same); // true

2、赋值

age = 10;

3、变量的初始化=声明变量+赋值

 <script>
        // 1、声明变量
        var age;
        // 2、赋值
       age = 10;
        // 3、输出结果， alert或者console
        console.log(age);
        // 4、变量的初始化  name在浏览器里面是有关键字的，所以不能作为变量名
        var myname = '王鑫鑫';
        console.log(myname);
    </script>

4、变量的实际使用

输入用户名，并显示出用户名

  // 用户输入姓名 存储到变量里面
      var n =  prompt('请输入你的姓名');
    //    输出结果
        alert(n);

5、变量的更新和其他的语言一样

6、同时声明多个变量【逗号隔开】

// 同时声明
var a = 9, b = 9, c= 9;//相当于var a = 9; var b= 9; var c=9;
// 下面这种不是
var a = b = c = 9; 
// 很显然从颜色上就看出来了。var a; a= b= c =9;  
// 相当于 var  a = 9; 
// b = 9; 
// c = 9;

7、声明变量的特殊情况

只声明不赋值，输出结果是undefined
不声明不赋值直接使用会报错
不声明直接赋值使用，和正常情况下的结果是一样的，依然是全局变量（无论是不是在函数内部使用）
```
aa = 123;
console.log(aa);
```

8、变量命名规范

字母、数字、下划线、美元符号组成
严格区分大小写
不能以数字开头
不能是关键字、保留字（不要使用name作为变量名）
变量名必须有意义
遵从驼峰命名法首字母小写，后面单词的首字母要大写

数据类型

变量的数据类型

JavaScript是一种弱类型或者说动态语言，这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。

var num;//这里的num不确定是属于哪一种数据类型
var num = 10; // 到了这里才确定num属于数字型

js的变量数据类型只有程序在运行过程中，根据等号右边的值来确定。

js拥有动态类型，也意味着相同的变量可用作不同的类型。

var x= 8;
x = 'bill';

简单数据类型

Number

数字型包含整型和浮点型值默认值 0

常见的进制有二进制、八进制（开头是0）、十进制、十六进制（开头是0x 0~9 a~f)。

var num = 010; //八进制

var num2 = 0x9; // 十六进制

数字型范围

Number.MAX_VALUE Number.MIN_VALUE

数字型三个特殊值

Infinity（无穷大） -Infinity（无穷小） NaN （非数字）

console.log(‘pink’ - 100);就是NaN

isNaN()

这个方法用来判断非数字，如果是数字的话返回的是false，如果不是的话，返回的是true

Boolean 布尔值默认值false

参与加法运算的时候，true当做1来看。

String 字符串类型 ""或者’’

1、单引号或者双引号里面的内容，更推荐使用的是单引号。

2、多层嵌套

需要使用外双内单，或者外单内双。(和最近的匹配)

var sstr = "你好啊，我是'王鑫鑫'";
var str = '你现在在做什么？"在吃饭"';

3、字符串转义符

在这里插入图片描述

4、字符串长度str.length

5、字符串拼接

字符串+任何类型 = 拼接后的新字符串

console.log('time' + 15498);// time15498
var age = 25; // 变量和字符串相连接
console.log('pink老师'+age+'岁');

Underfined

var a 声明了变量a但是没有给值 a = underfined

undefined和数字相加，最后的结果是NaN。

Null var a = null null

var a = 12;// 还是用var直接声明
var  time = undefined;
console.log(time + 'booking'); // undefinedbookin
console.log(time + 1);// undefined和数字相加，最后的结果是NaN
console.log(null+'nice'); // nullnice
console.log(null+25); // 25

获取数据类型

typeof + 变量：就可以得到数据类型

字面量

字面量表示如何表达这个值

比如：数字的字面量： 8,9,10

数据类型转换

转换为字符串类型

变量.toString()
Stirng(变量)
加号拼接字符串——更常用

转换为数字型

parseInt(string) string转换成整数（无四舍五入、去掉单位）

console.log(parseInt('120cm')); //120
console.log( parseInt('sd123vf'));// NaN
console.log( parseInt('123vf')); // 123
console.log(parseInt('3.85')); //3