Javascript
js全称JavaScript,是一种具有函数优先的轻量级,直译式、解释型或即时编译型的高级编程语言,是一种属于网络的高级脚本语言;JavaScript基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式和声明式,如函数式编程。
特点
- js是面对对象的,我们可以创建对象和使用现有的对象。
- js是不需要编译就能执行的脚本语言,并且是在运行中,直接进行解释。
- js是不需任何的操作系统,只要有浏览器支持就可以,并且同时支持多种浏览器运行。
- js对数据类型是不需要任何要求的,采用的方式是弱类型。
组成部分
js的组成是有三部分组成,包括基本的语法和文档对象模型,以及浏览器对象模型。
JS引入的方式
内联
不推荐使用
<button onclick="alert('hello world')">点我</button>
内部
自己写demo可用
<script> alert('hello world') </script>
外部
工作中常用!
<script src="./外部.js"></script>
输入于输出
输入
会弹出一个对话框
<script> prompt('可以输入内容') </script>
输出
输出到body
<script> document.write('输出到body') </script>
弹出一个窗口
<script> alert('弹出一个窗口')</script>
在控制台输出内容常用
<script> console.log('在控制台输出内容')</script>
注释
单行
command+/
多行
shift+option+a
变量交换
需创建一个空的变量temp用于存储现有的变量数据
let a = '10',
b = '20',
temp;
temp = a
a = b
b = temp
console.log('a等于' + a, 'b等于' + b);
输出结果:
变量的规则规范
规则
不遵守就会报错
- 变量名不能带有内置关键字如let var if for等.....
- 变量只能由字母、数字、下划线、$ 符号组成,不能以数字开头。
- 变量名区分字母的大小写,因此B与b表示的是不同的变量。
规范
- 变量名必须有意义,即,我们从变量的命名就知道变量的含义。
- 遵守驼峰命名法。首字母小写,后面单词的首字母需要大写。例如:userName、userPassword 等。
数据类型
JavaScript中有6种数据类型:
数字(number)
字符串(string)
布尔值(boolean)
undefined、null、对象(Object)
数字类型
- 不带单双引号
- 可以使用加减乘除
let name = 100;
字符串类型
- 带单双引号
- 单双引号需配套使用不能一单一双
- 使用**+**号只能使字符串拼接
let name1 = '字符串类型',
name2 = "字符串类型";
布尔类型Boolean
只有两个值
- true 为真
- false 为假
未定义类型
Undefined
只声明未赋值
<script>
let age;
console.log(age);
</script>
打印结果为undefined:
空类型
null表示赋值了,但内容为空
<script>
let age = null;
console.log(age);
</script>
输出结果:
字符串拼接
推荐使用字符串反引号拼接的方式
<script>
let name = '小鹿',
age = 18;
console.log(`你好,我叫${name},今年${age}岁`);
</script>
输出结果:
获取变量的数据类型
typeof
<script>
let name = '小鹿';
console.log(typeof name);
</script>
输出结果:
转换为数字类型
隐式转换
推荐写法在变量值前加上一个 + 号即可
<script>
let num1 = +prompt('请输入第一个数值'),
num2 = +prompt('请输入第二个数值'),
result;
result = num1 + num2;
console.log(result);
</script>
简单的演示:
显式转换
<script>
// let num1 = '9.9';
// 正常装换为数字类型 常用
// let num2 = Number(num1)
// 取整 常用
// let num2 = parseInt(num1);
// 可取小数点 不常用
// let num2 = parseFloat(num1)
// console.log(num2);
</script>
转换为字符串类型
隐式转换
推荐使用 + ''
let num1 = 111;
let num2 = num1 + '';
console.log(typeof num2);
结果演示:
显式转换
// 常用
let num1 = 111;
let num2 = String(num1);
console.log(typeof num2);
// 常用
let num1 = 111;
let num2 = num1.toString();
console.log(typeof num2);
显示演示:
document.write()
输出内容到body里面,可以直接书写标签
声明变量也可以直接在值里面书写标签
//效果1
<script>
let str = `<div>
<span><button>鸡汤来咯!!</button></span>
</div>`;
document.write(str);
</script>
//------------------------------------------------
//效果2
<script>
document.write('<h1>快吃呀!</h1>');
</script>
效果1:
效果2:
小案例:
采用反引号的方式把变量引入到标签里面
效果: