引入方式
内部式:body→script
<body>
<script></script>
</body>
外部式:(使用最多)后缀名为js的文件
<link rel="stylesheet" href="">
<script src="./js基础.js"></script>
行内式
变量
变量就是一个装东西的盒子,通俗的来说,变量就是存放数据的容器。我们通过变量名获取数据,甚至可以修改数据。
声明变量
<!DOCTYPE html>
<html lang="en">
<head>
<script src="./js基础.js"></script>
</head>
<body>
<script>
// 声明关键字 变量名称=变量值;
var name = 'jack';
var age = 18;
// 之所以称为变量,是因为这个值存进去后,是可以进行修改的,可以变化的
console.log(name);
console.log(age);
</script>
</body>
</html>
数据类型
分为简单数据类型和复杂数据类型
number数字类型 boolean布尔来信 string字符串 undefined未定义 null空
分支语句、条件判断
if(){代码块}
else if()
{代码块}
<!DOCTYPE html>
<html lang="en">
<head>
<script src="./js基础.js"></script>
</head>
<body>
<script>
var name = 'jack';
var age = 18;
console.log(name);
console.log(age);
// if的括号内,就是对条件的半段,括号内的值只能是布尔值
if(age>19){
console.log('可以上网')
}
</script>
</body>
</html>
if语句
<!DOCTYPE html>
<html lang="en">
<head>
<script src="./JS基础.js"></script>
</head>
<body>
<script>
// 3.分支语句/条件判断
/**
* if(){
* 代码块
* }else if(){
* 代码块
* }else{
* 代码块
* }
*/
// if的括号内,就是对条件的判断,括号内的值只能是布尔值
// 在if 条件判断的 代码块中,如果满足其中一个条件,只会选择执行一个代码块,然后结束条件判断语句
// if 的使用场景为在范围性的内容判断时使用
// 第一种
if (age >= 18) {
console.log('这是第一个条件判断');
console.log('年龄达到,可以上网');
}
// // 第二种
if (age >= 18) {
console.log('这是第二个条件判断');
console.log('年龄达到,可以上网');
} else {
console.log('这是第二个条件判断');
console.log('年龄不足, 不能进');
}
// // 第三种
if (count > 90) {
console.log('成绩优秀');
} else if (count > 60) {
console.log('成绩合格');
} else {
console.log('成绩不合格');
}
</script>
</body>
</html>
switch语句
是在有特定或者固定值的时候来使用
<!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>Document</title>
<script src="./JS基础.js"></script>
</head>
<body>
<script>
var key = prompt('请选择');
console.log(typeof (key));
switch (parseInt(key)) {
case 1:
console.log('吃面条');
break;
case 2:
console.log('吃盖饭');
break;
case 3:
console.log('吃抄手');
break;
case 4:
console.log('吃火锅');
break;
default:
console.log('啥都不吃了');
break;
}
</script>
</body>
</html>
函数/方法
封装执行的代码块或者利于重复调用的代码块,可实现复用,提高代码利用率,减少冗余代码
创建方式
① function name(){代码块}
②匿名函数
var name = function(){代码块}
声明方式 function关键字 方法名(){}
<body>
<script>
var num = ['刘备', '关羽', '张飞', '马超', '赵云', '黄忠', '诸葛亮'];
var count = [1, 2, 3, 4, 5, 6, 7, 8];
function person() {
for (var i = 0; i < num.length; i++) {
console.log(num[i]);
}
}
person();
// 函数括号内没有变量,则这是一个无参函数,若有变量,则是带参函数
// one 在此刻为 形参 ,在声明时候使用
var person = function (one) {
for (var i = 0; i < one.length; i++) {
console.log(one[i]);
}
}
//在调用函数时候,传入的参数称为 实参
person(num);
person(count);
</script>
</body>
用于计算的函数
<body>
<script>
function getSum(a, b) {
var sum = 0;
sum = a + b;
console.log(sum);
}
var num1 = prompt('请输入数字1');
var num2 = prompt('请输入数字2');
getSum(parseInt(num1), parseInt(num2));
</script>
</body>
对象
对象属于复杂数据类型
属性 方法
创建方式
①字面量创建
var star = {
属性名:属性值,
属性名:属性值,
属性名:属性值,
方法名:函数(){}
}
②new 关键字
var name = new Object();
name.属性名 = 值;
name.属性名 = 值;
name.方法名 = 函数(){
③构造函数创建
function Person(name,age,gender){
this.name = "jack";
this.age = 15;
this.gender = male;}
var jack = new Person;};
创建一个实例对象
<!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>Document</title>
</head>
<body>
<script>
function Person(name1, age1, gender1) {
// 下方 第一个 name是该对象的属性, 第二个name是该函数的形参
this.name = name1;
this.age = age1;
this.gender = gender1;
}
// 创建一个实例对象
var jack = new Person('jack', 28, 'male');
var Rose = new Person('Rose', 25, 'Female');
console.log(jack);
console.log(Rose);
console.log(Rose.name);
// var person = new Object();
// person.name = '王五';
// person.age = 28;
// person.run = function () {
// console.log('我能跑路');
// }
// console.log(person);
// var people = {
// name: '张三',
// gender: 'male',
// age: 38,
// eat: function () {
// console.log('我可以吃饭了');
// },
// sleep: function () {
// console.log('我可以睡觉了');
// }
// }
// console.log(people);
// people.name = '李斯';
// console.log(people.name);
// console.log(people.eat());
</script>
</body>