1.JavaScript 输入输出语法
1.输出语法
1.人和计算机打交道的规则约定
2.我们要按照这个规则去写
3.比如：你吃了吗？
3.我们程序员需要操控计算机，需要计算机能看懂
1.向body内输出内容如果输出的内容写的是标签，也会被解析成网页元素
<!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>
document.write("通过js加进去的内容")
</script>
</body>
</html>
2.页面弹出警告对话框(流氓弹窗)
<!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>
alert("内容")
</script>
</body>
</html>
3.控制台输出语法，程序员调试使用
<!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>
console.log('你是一个大潮吧');
</script>
</body>
</html>
2.输入语法:prompt
1.显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>07-输入和输出.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<script>
// 直接在 body标签中书写内容
// document.write("通过js加进去的内容")
// 推荐 控制台 log
// console.log('控制台打印1');
// 输入
// prompt("请输入你的姓名")
// // 把用户输入的姓名 写在网页中
// document.write("用户的姓名")
// 获取 用户的输入的文字内容
// 可以自定义名称的一个变量(不要加引号) = 用户输入的内容
// 不能加引号 错误 'username' = prompt('请输入你的姓名');
// username = prompt('请输入你的姓名');
// username 就是一个盒子 里面装着 用户输入的姓名
// 输出
// document.write("用户的姓名")
// document.write('username'); // username 能不能加引号
// 获取用户的名称
username = prompt("请输入你的姓名");
// 打印出来 用户的名称
document.write(username);
alert(username);
console.log(username);
</script>
</body>
</html>
3.获取多个输入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>08-获取多个输入.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<script>
// 1 你叫什么名字
username = prompt('你叫什么名字');
// 2 你家住哪里
address = prompt('你家住哪里');
// 3 你喜欢吃什么
foods = prompt('你喜欢吃什么');
// 4 你喜欢自己一个听音乐吗
music = prompt('你喜欢自己一个听音乐吗');
// 5 你喜欢运动
sports = prompt('你喜欢运动');
// 输入一下 到网页中
// console.log(username);
// console.log(address);
// console.log(foods);
// console.log(music);
// console.log(sports);
// 能不能在一行上直接输出 不要换行
// 使用 一个 + 表示连接
console.log(username + address + foods + music + sports);
</script>
</body>
</html>
2.变量
1.变量的基本概念与使用
变量：就是一个容器，存放数据的；
变量是通过 let（声明关键字） 变量名； let（固定的） age；
可以同时声明多个变量，但是不允许多次使用同一个声明变量
2.变量的本质
内存：是计算机储存数据的地方，相当于一个大盒子；
变量：则是内存（大盒子)里面的一个小盒子;
3.变量命名规则与规范
1.规则：不能使用关键字 JavaScript自身所包含的代码，开头可以使用下划线、字母或者$符号 但是不能数字开头 ，区分大小写如 Age 和 age 是不同的变量 ;
2.规范：遵守小驼峰命名法，ü第一个单词首字母小写，后面每个单词首字母大写。例：user Name；
<!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>
// 注意：变量不能重复
// 变量 我的名字
let username; //创建变量 username
username = '张三'; //变量赋值 张三
console.log(username); //变量的使用
// 变量 我的身高
let height; //创建变量 height
height = '180'; //变量赋值 180
console.log(height); //变量的使用
// 变量 我的外号
let nackname;//创建变量 nackname
nickname = '法外狂徒';//变量赋值 法外狂徒
console.log(nickname); //变量的使用
// 声明变量的同时也赋值
let color = 'yellow';
color = 'pink'; //变量更新
// 一次性声明多个变量 同时赋值
let username1 = '李四',
height1 ='180',
nickname1 = '法内狂徒';
</script>
</body>
</html>
4.变量练习
1.变量的规则和规范
<!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>
// 创建一个变量 名字就叫做 let var if for 内置的关键字 都不能使用
// let for = 123 错误写法
// 符号也是ok的
let _hellow = '123' ; //下划线开头
let $hellow = '123' ;//$
let hellow = '123' ;// 字母开头
// let 123abc ="123" 错误写法 不能以数字开头
// 区分大小写
let user = '用户1' // 小写单独
let USER = '用户2' // 大写单独
// 最后 初学者还不太会创建变量和起那些名字
// 多学习老师的命名即可
// 多敲上课的代码的时候 命名规则 自然就熟悉了
// 命名有意义
// let a,b,c,d; // 不推荐 ！！
let height = '100';
// 如果变量单词比较多
let userName = '姓名'; // 推荐的
let userHeight = '100'; // 推荐的
let shoppingSupermarketShop = '111'; // 小驼峰 首字母小写
let ShoppingSupermarketShop = '111'; // 大驼峰 首字母大写
</script>
</body>
</html>
2..交换变量
<!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>
<!-- 有2个变量： num1 里面放的是 10， num2 里面放的是20
最后变为 num1 里面放的是 20 ， num2 里面放的是 10 -->
<script>
// 1.创建三个变量
let num1=10, num2=20, temp;
// 2. 设置 空的变量 存放 num1的值
temp = num1;
// 3.设置 num1 等于 num2
num1 = num2;
// 4.设置 num2 等于之前 num1的值(temp）
num2 = temp;
// 5.输出
console.log(num1);
console.log(num2);
// 小结
// 思路在于 要多创建一个变量 来存放临时的数据即可
</script>
</body>
</html>
