一,介绍
掌握javaScript的引入方式
1.1引入方式
javaScript程序不能独立运行,它需要被嵌入HTML中,然后浏览器才能执行javaScript代码,通过script标签将JavaScript代码引入到HTML中有两种方式
行内形式
<body>
<input type="button" value="唐伯虎" onclick="alert('秋香姐');">
</body>
内部形式
通过script标签包裹javaScript代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 基础 - 引入方式</title>
</head>
<body>
<!-- 内联形式:通过 script 标签包裹 JavaScript 代码 -->
<script>
alert('学习前端技术!');
</script>
</body>
</html>
外部形势
一般将javaScript代码写在独立的以.js结尾的文件中,然后通过script标签src属性引入
// demo.js
document.write('学习前端技术!');
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 基础 - 引入方式</title>
</head>
<body>
<!-- 外部形式:通过 script 的 src 属性引入独立的 .js 文件 -->
<script src="demo.js"></script>
</body>
</html>
如果script标签使用src属性引入了某 .js文件, 那么标签的代码会被忽略
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 基础 - 引入方式</title>
</head>
<body>
<!-- 外部形式:通过 script 的 src 属性引入独立的 .js 文件 -->
<script src="demo.js">
// 此处的代码会被忽略掉!!!!
alert(666);
</script>
</body>
</html>
1.2 注释和结束符
通过注释可以屏蔽代码被执行或者添加备注信息,JavaScript 支持两种形式注释语法:
单行注释
使用 // 注释单行代码
注:编辑器中单行注释的快捷键为 ctrl + /
<script>
// 这种是单行注释的语法
// 一次只能注释一行
// 可以重复注释
document.write('嗨,欢迎来传智播学习前端技术!');
</script>
多行注释
使用 /* */ 注释多行代码
注:编辑器中多行注释的快捷键为 ctrl + shift + /
<script>
/* 这种的是多行注释的语法 */
/*
更常见的多行注释是这种写法
在些可以任意换行
多少行都可以
*/
document.write('嗨,欢迎来传智播学习前端技术!');
</script>
结束符
在 JavaScript 中 ; 代表一段代码的结束,多数情况下可以省略 ; 使用回车(enter)替代。
JavaScript 跟 HTML 和 CSS 一样,会忽略【一些】空白符,但是换行符(回车)会被识别成结束符 ;,因此在实际开发中有许多人主张书写 JavaScript 代码时省略结束符 ;
<script>
alert(1);
alert(2);
alert(1)
alert(2)
</script>
let num = 10
div {
color: red;
}
<div>
</div>
1.3输入和输出
输出和输入可理解为人和计算机的交互,用户通过键盘、鼠标等向计算机输入信息,计算机处理后展示结果给用户。如:如按键盘上的方向键,向上/下键可以滚动页面,按向上/下键这个动作叫作输入,页面发生了滚动了这便叫输出。
输出:JavaScript 可以接收用户的输入,然后再将输入的结果输出
alert()会以弹窗形式展示(输出)给用户
document.wirte()会在页面输出给用户
console.log()会在控制台打印给用户
输入:向prompt() 输入任意内容会以弹窗形式出现在浏览器中,一般提示用户输入一些内容。
<script>
// 1. 输入的任意数字,都会以弹窗形式展示
document.write('要输出的内容');
alert('要输出的内容');
// 2. 以弹窗形式提示用户输入姓名,注意这里的文字使用英文的引号
prompt('请输入您的姓名:');
</script>
二、变量
理解变量是计算机存储数据的“容器”,掌握变量的声明方式
变量是计算机中用来存储数据的“容器”,它可以让计算机变得有记忆,通俗的理解变量就是使用【某个符号】来代表【某个具体的数值】(数据)
<script>
// x 符号代表了 5 这个数值
x = 5;
// y 符号代表了 6 这个数值
y = 6;
//举例: 在 JavaScript 中使用变量可以将某个数据(数值)记录下来!
// 将用户输入的内容保存在 num 这个变量(容器)中
num = prompt('请输入一数字!');
// 通过 num 变量(容器)将用户输入的内容输出出来
alert(num);
document.write(num);
</script>
2.1生命和赋值
声明
声明(定义)变量有两部分构成:关键字 变量名
<script>
// let 变量名
// 声明(定义)变量有两部分构成:声明关键字、变量名(标识)
// let 即关键字,所谓关键字是系统提供的专门用来声明(定义)变量的词语
// age 即变量的名称,也叫标识符
let age;
</script>
关键字是 JavaScript 中内置的一些英文词汇(单词或缩写),它们代表某些特定的含义,如 let 的含义是声明变量的,看到 let 后就可想到这行代码的意思是在声明变量,如 let age;
let 和 var 都是 JavaScript 中的声明变量的关键字,推荐使用 let 声明变量!!!
赋值
声明(定义)变量相当于创造了一个空的“容器”,通过赋值向这个容器中添加数据。
<script>
// 声明(定义)变量有两部分构成:声明关键字、变量名(标识)
// let 即关键字,所谓关键字是系统提供的专门用来声明(定义)变量的词语
// age 即变量的名称,也叫标识符
let age;
// 赋值,将 18 这个数据存入了 age 这个“容器”中
age = 18;
// 这样 age 的值就成了 18
document.write(age);
// 也可以声明和赋值同时进行
let str = 'hello world!';
str = '你好';
alert(str);
</script>
2.2变量关键字
JavaScript 使用专门的关键字 let 和 var 来声明(定义)变量,在使用时需要注意一些细节
let注意事项
- 不允许重复声明
- 只能在块级作用域内使用
- 不存在变量提升,必须声明变量之后才能使用,不然会报Uncaught ReferenceError错误
- JavaScript 中内置的一些关键字不能被当做变量名
var注意事项
- 允许重复声明
- 可以在任意位置使用
- 可以在声明语句之前使用
大部分情况使用 let 和 var 区别不大,但是 let 相较 var 更严谨,因此推荐使用 let
2.3变量名命名规则
关于变量的名称(标识符)有一系列的规则需要遵守
- 只能是字母、数字、下划线、$,且不能能数字开头
- 字母区分大小写,如 Age 和 age 是不同的变量
- JavaScript 内部已占用于单词(关键字或保留字)不允许使用,name最好也不要使用
- 所谓关键字是指 JavaScript 内部使用的词语,如 let 和var
- 保留字是指 JavaScript 内部目前没有使用的词语,但是将来可能会使用词语
- 尽量保证变量具有一定的语义,见名知意
- 变量的名称一般用名词,函数的名称一般用动词
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 基础 - 变量名命名规则</title>
</head>
<body>
<script>
let age = 18; // 正确
let age1 = 18; // 正确
let _age = 18; // 正确
// let 1age = 18; // 错误,不可以数字开头
let $age = 18; // 正确
let Age = 24; // 正确,它与小写的 age 是不同的变量
// let let = 18; // 错误,let 是关键字
let int = 123; // 不推荐,int 是保留字
</script>
</body>
</html>
三,数据类型
计算机世界中的万事成物都是数据。
计算机程序可以处理大量的数据,为了方便数据的管理,将数据分成了不同的类型,通过typeof关键字检测数据类型
<script>
document.write(typeof 1); // number
var timer = null;
console.log(typeof null); // object
// prompt 取过来的值是 string 字符型的
var age = prompt('请输入您的年龄');
console.log(age);
console.log(typeof age);
</script>
特点
- js是弱类型动态语言,只有程序运行过程中才能确定类型
- 变量的数据类型是可以变化的
- 注:JavaScript 中变量的值决定了变量的数据类型。
数据类型的分类
- 简单数据类型(Number String Boolean Undefined Null)
- 复杂数据类型(Object)
3.1简单数据类型
简单数据类型 | 说明 | 默认值 |
Number | 数字型,整数或浮点数 | 0 |
Boolean | 布尔值true false | false |
String | 字符串 | “” |
Uadefined | 变量只实名还没有赋值 | undefined |
Null | 空值 | null |
数字型:即我们数学中学习到的数字,可以是整数、小数、正数、负数
- 最大值 Number.MAX_VALUE,比最大值大就是无穷大 Infinty
- 最小值 Number.MIN_VALUE,比最小值小就是无穷大 -Infinty
- 非数字 NaN isNaN()判断是否非数字
<script>
let score = 100; // 正整数
let price = 12.345; // 小数
let temperature = -40; // 负数
document.write(typeof score); // 结果为 number
document.write(typeof price); // 结果为 number
document.write(typeof temperature); // 结果为 number
</script>
字符串型:通过单引号('') 、双引号("")或反引号包裹的数据都叫字符串,单引号和双引号没有本质上的区别,推荐使用单引号。
- 注意事项
- 无论单引号或是双引号必须成对使用
- 单引号/双引号可以互相嵌套,但是不以自已嵌套自已
- 必要时可以使用转义符 \,输出单引号或双引号
- 转义符(同Java)
- length可以显示字符串长度
- 字符串的拼接,字符串 + 任意类型 = 字符串
- 加号口诀:数字相加,字符相连
<script>
let user_name = '小明'; // 使用单引号
let gender = "男"; // 使用双引号
let age = '18'; // 看上去是数字,但是用引号包裹了就成了字符串了
let str = ''; // 这种情况叫空字符串
documeent.write(typeof user_name); // 结果为 string
documeent.write(typeof gender); // 结果为 string
documeent.write(typeof str); // 结果为 string
document.write(user_name.length)
document.write('小明' + age + '岁')
document.write('小明' + age + '岁')
</script>
交互
<script>
// 弹出一个输入框(prompt),让用户输入年龄(用户输入)
// 把用户输入的值用变量保存起来,把刚才输入的年龄与所要输出的字符串拼接 (程序内部处理)
// 使用alert语句弹出警示框(输出结果)
var age = prompt('请输入您的年龄');
var str = '您今年已经' + age + '岁了';
alert(str);
</script>
布尔型:表示肯定或否定时在计算机中对应的是布尔类型数据,有两个固定的值 true 和 false,表示肯定的数据用 true,表示否定的数据用 false。
<script>
var flag = true; // flag 布尔型
var flag1 = false; // flag1 布尔型
console.log(flag + 1); // true 参与加法运算当1来看
console.log(flag1 + 1); // false 参与加法运算当 0来看
// 如果一个变量声明未赋值 就是 undefined 未定义数据类型
</script>
undefined:未定义是比较特殊的类型,只有一个值 undefined,只声明变量,不赋值的情况下,变量的默认值为 undefined,一般很少【直接】为某个变量赋值为 undefined。
- undefined 和数字相加 最后的结果是 NaN
<script>
var str;
console.log(str);
var variable = undefined;
console.log(variable + 'pink'); // undefinedpink
console.log(variable + 1); // NaN
</script>
null:空值,什么都没有,加1还是1
<script>
// null 空值
var space = null;
console.log(space + 'pink'); // nullpink
console.log(space + 1); // 1
</script>
字面量
<script>
console.log(18);
console.log('18');
console.log(true);
console.log(undefined);
console.log(null);
</script>
3.2类型转换
在JavaScript中数据被分成了不同的类型,如数值,字符串,布尔值,undefined,在实际编程的过程中,不同数据类型之间存在着转换的关系
转换为字符串
<script>
// 1. 把数字型转换为字符串型 变量.toString()
var num = 10;
var str = num.toString();
console.log(str);
console.log(typeof str);
// 2. 我们利用 String(变量)
console.log(String(num));
// 3. 利用 + 拼接字符串的方法实现转换效果 隐式转换
console.log(num + '');
</script>
转换为数字型(重点)
<script>
// var age = prompt('请输入您的年龄');
// 1. parseInt(变量) 可以把 字符型的转换为数字型 得到是整数
// console.log(parseInt(age));
console.log(parseInt('3.14')); // 3 取整
console.log(parseInt('3.94')); // 3 取整,直接抛弃小数位
console.log(parseInt('120px')); // 120 会去掉这个px单位
console.log(parseInt('rem120px')); // NaN
// 2. parseFloat(变量) 可以把 字符型的转换为数字型 得到是小数 浮点数
console.log(parseFloat('3.14')); // 3.14
console.log(parseFloat('120px')); // 120 会去掉这个px单位
console.log(parseFloat('rem120px')); // NaN
// 3. 利用 Number(变量)
var str = '123';
console.log(Number(str));
console.log(Number('12'));
// 4. 利用了算数运算 - * / 隐式转换
console.log('12' - 0); // 12
console.log('123' - '120');
console.log('123' * 1);
</script>
转换为布尔型
<script>
// 只有这5种为false,其他都为true
console.log(Boolean('')); // false
console.log(Boolean(0)); // false
console.log(Boolean(NaN)); // false
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false
</script>