Java Script 初级（一）

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

目录

前言

一、js基本知识

1.js是什么？

2.书写位置：

1.内嵌式

2.外联式

3.行内式

3.js的基本组成

1.ECMAScript

2.Web APIS

4.js注释

5.结束符

6.js输入输出语法

7.js注意事项

8.字面量与变量

二、案例

---

前言

本篇文章是本人学习时所写，如有不严谨之处还请包涵。本篇包括基础知识与案例。

一、js基本知识

1.js是什么？

js是一种运行在客户端的编程语言，实现人机交互效果。

作用：

1.网页特效

2.表单验证

3.数据交互

4.服务端编程

2.书写位置：

1.内嵌式

 首先，将js代码嵌入到HTML文件中。然后在HTML文件中添加一个Script，script标签的代码就是js代码。script标签可以在文中任意地方。推荐在head或body标签中。

2.外联式

首先，创建一个js文件，使用script标签引入js文件。在js文件里面不能写script标签。推荐写在head或body标签中。注意，js中内嵌式写法，外联式写法不可以混着用。

3.行内式

前两种比较常用。第三种只需要了解。

3.js的基本组成

js由语法基础（ECMAScript）和WebAPIS组成。其中，WebAPI由DOM（页面文档对象模型）和BOM（浏览器对象模型）组成。

1.ECMAScript

变量 分支语句 循环语句 对象

2.Web APIS

DOM

BOM

4.js注释

单行注释 // 多行注释 /* */

5.结束符

js中的结束符号以 ; 结尾。结束符号可以省略。

6.js输入输出语法

输出信息的方式：

1. alert()

将信息在网页中以弹窗形式输出。

为了保证程序能够正常执行，推荐将所有的信息都＋引号。单双都可以。

2. console.log()

将信息在浏览器控制台输出。

3.document.write()

将信息在body标签中输出。

输入信息的方式：

prompt()

选择输入：confirm()

7.js注意事项

1. js中严格区分大小写。
2. 如果希望在网页中输出HTML标签，通过document.write()。

8.字面量，变量和常量

字面量：字面量是在计算机中描述事或物。单独的一个数字，或者是单独写到的字母或汉字。

变量：不断变化的一个值。在程序中的变量相当于一个容器，用来保存数据。

先定义变量，再给变量赋值，在页面中输出。

程序中变量不用加引号。如果加了引号，那么输出结果是变量本身的名字。

1. 变量使用过程中的注意事项。
2. 自定义的变量名哪些是不规范的？
3. 变量名不能以数字开头。变量中间不能实现空格。变量名可以使用特殊符号，但仅限于 _  。变量名不推荐使用汉字。变量名不能使用关键字。给变量赋值的时候，= 叫赋值运算符。遇到赋值运算符的时候，先执行右侧的代码再执行左侧。变量一次只能保存一个值，是最后一次的赋值结果。变量的定义和赋值可以直接写。let a = 123。如果定义多个变量可以直接设置，使用逗号隔开。let a = 123, b = 456;使用变量的时候，必须先定义后使用。

常量：数据不能发生改变。语法：const 自定义常量名；赋值：常量名 = 值；

const a = 123;
a = 456;
console.log(a);

const,let,var的区别：

1. 在程序中如果值不会发生改变或不能改变，推荐使用const。
2. 在程序中如果值不断发生变化，那么推荐使用let(var).
3. const定义的常量必须设置默认值。
4. const定义的常量名不能重复。
5. const定义的常量也必须先定义后使用。

let和var的区别

相同点：

1. le t和 var 都属于关键字。
2. let 和 var 都是迎来定义变量的。

不同点：

1. let 定义变量的时候，必须先定义后使用；var 定义的变量可以先使用后定义。
2. let 定义的变量名不能重复（同一个作用域中），var 定义的变量名可以。

9.数组的基本介绍

1. 数组的作用和变量一样，也是再程序中保存数据的。
2. 数组和变量的区别：一个变量一次只能保存一个值，数字一次可以保存多个值。
3. 数组的基本使用：先定义数组，let 自定义数组名 = [ ];然后给数组赋值，直接在[ ]中添加值，以逗号隔开。

4. let ary = [123,456,789,'abc','中国'];
   console.log(ary);

5. 一些术语：元素：数组中保存的每个数据都叫元素。下标：数组中数据的编号。长度：数组中数据的个数，通过数组的length属性获得。

10.数据类型介绍

数据类型分为两大类。基本数据类型和引用数据类型（复杂类型）。

一，基本数据类型

有数字类型，字符串类型，布尔类型，undefind类型，null类型（属于复杂类型）。

数据类型：用来在计算机中标记程序的运算规则的。

数字类型（number):只要变量的值是纯数字，并且没有引号，那么当前这个变量就是数字类型。

特点：在计算机中计算规则完全按照数学计算方式进行。

字符串类型（string):只要变量的值带有引号，那么变量就是字符串类型。

特点：只要变量中有一个数据类型是字符串类型，那么在计算的时候遇到加号，则直接拼接字符串，如果遇到除加号以外的东西，那么计算机先将字符串转换为对应的数字，然后再计算。

布尔类型：只要变量的值是true或false，那么变量的数据类型就是布尔类型。

二，引用数据类型

对象（object)

三，数据类型转换

强制数值类型转换（显示转换）:属于程序员自己的行为。

强制转换为数字类型：Number(变量),parseInt(变量),parseFloat(变量)。

区别：parseInt()转换数据类型后，变量的值只保留整数部分。

Number()在转换的过程中如果有一个值转换失败，得到的结果就是NaN。

parseFloat()在转换的过程中保留转换成功的部分，不成功的部分直接忽略。

let a = '123';
a = Number(a);
console.log(typeof(a));

二，案例

案例1

声明一个变量，用于存放用户购买的商品 数量（num)为20件

声明一个变量，用于存放用户的姓名（uname)为‘张三’

依次控制台打印输出两个变量

let num = 20;
let uname = '张三';
console.log(num);
console.log(uname);

案例2

浏览器中弹出对话框： 请输入姓名。 页面中输出：刚才输入的姓名。

1.使用document.write() 将用户输入的名字输出

2.使用prompt() 获取用户输入的内容

3.使用变量保存用户输入的姓名

let uname = promote("请输入用户名");
document.write(uname);

案例3

将变量b赋值给变量a，将字母b赋值给变量a。

let a = 123;
let b = 456;
a = b;
a ='b';
console.log(a);

案例4 变换变量的值

有2个变量：num1里面放的是10，num里面放的是20。

最后变为num1里面放的是20，num2里面放的是10.

let num1 = 10;
let num2 = 20;

let num3 = num1;
num1 = num2;
num2 = num3;
console.log(num1);
console.log(num2);

案例5 计算圆的面积

1.使用prompt()获取用户输入的半径值。

2.使用变量保存输入的半径值。定义一个变量去保存圆的面积。

3.使用常量保存圆周率

4.document.write()输出圆的面积

let r = prompt('请输入圆的半径');
const pi = 3.14;
let are = pi*r*r;
document.write(are);

案例6 拼接字符串

定义两个变量，分别保存用户名和年龄。

按照如下格式在页面中输出：姓名：xxx 年龄：xxx岁。

let username = 'A';
let age = 21;
document.write('姓名：' + username + '|' + '年龄：' + age + '岁');

 用模板字符串输出

let username = `A`;
let age = 21;
document.write(`姓名：${username}| 年龄：${age}岁`);

案例7 用户名案例

需求：页面弹出对话框，输入名字和年龄，页面显示：大家好，我叫xxx，今年xx岁了。

let username = prompt('请输入用户名');
let age = prompt('请输入年龄');
document.write(`大家好，我叫${username},今年${age}岁了`);