JS基础+变量+数据类型
- js概述====≥使用方式
- js是什么=====》js是运行在浏览器/客户端上的一种编程语言，实现人机交互。
- js能做什么===》 现在几乎是全能=〉数据交互，表单校验，app的开发，游戏开发，网页特效，服务端编程（node.js）
- js的组成ECMAScript DOM BOM
- ECMAScript(规范语言的基本语法 if for let)
- DOM:一套操作网页的元素的方法 比如对页面元素进行移动、大小、添加删除等操作
- BOM：一套操作浏览器功能的方法 比如检测页面弹窗、检测窗口宽度 、存储数据到浏览器等
- js书写的位置：
- </body>结束标签的上面 =>将
<script>放在HTML文件的底部附近的原因是浏览器会按照代码在文件中的顺序加载 HTML如果先加载的 JavaScript 期望修改其下方的 HTML，那么它可能由于 HTML 尚未被加载而失效。
因此，将 JavaScript 代码放在 HTML页面的底部附近通常是最好的策略。
-
<body style="color: red"> <!-- 内部js --> <script> // 页面弹出警示框 alert("你好。。。"); document.write("qqqq"); </script> </body><body> <!-- 行内 --> <button onclick="alert('我是点击后弹出的内容')">哈哈哈</button>
==================================================================
<!-- 已经引入外部js后 就不要哦在<script>就不要哦在这里写内容了 因为浏览器会自动忽略 不生效</script> --> <!-- <script src="./demo.js">外部引入</script> --> <script> alert("努力"); // alert("努力");括号里面要有双引号/单引号 // document.write("加油⛽️"); document.write("加油⛽️"); </script> <script src="./demo.js"></script> </body> - 带有src属性的script标签内部的js代码浏览器会直接忽略
- 快捷键注释 shift+alt+A =>多行注释 ctrl+?单行注释
- js中的结束符要加都加 要不加则可都不加
js输入语法 输出语法
<script>
// 1. 文档输出内容
// document.write("页面文档输出");
// console.log("控制台输出日志 程序员自己测试用的");
// 输入语法
// alert("警示框");
// prompt("我是对话框 是输入语法 让用户输入用的");
// confirm:弹出一个框
confirm("我帅不帅");
alert("你好js");
document.write('"Js我来了"');
console.log("他会魔法吧");
prompt("今年几岁了");
document.write("<li>请求</li>"); //可以识别标签 可以换行
document.write(`
<li>请求</li>
<li>模版字符串可以换行</li>
`);
</script>
- 变量：可以理解为变量是存储数据的一个容器
<script> // let if = 10 // 交换变量 let apple1 = "青苹果"; let apple2 = "红苹果"; // 用一个临时变量做一个备份 进行替换 let temp = apple1; console.log(temp); //红苹果 apple1 = apple2; console.log(apple1); //红苹果 apple2 = temp; console.log(apple2); //青苹果 /* 需求： 有2个变量： num1 里面放的是 10， num2 里面放的是20 最后变为 num1 里面放的是 20 ， num2 里面放的是 10 */ let num1 = 10; let num2 = 20; let temp1 = num1; console.log(temp1); //10 num1 = num2; console.log(num1); //20 num2 = temp1; console.log(num2); //10 // 知识点拓展 // 只声明不赋值 =》返回值为undefined let age; console.log(age); // 不声明不赋值 =》报错 console.log(name); // 不声明直接赋值 不报错 =》及其不推荐 sex = "nv"; console.log(sex); // 注意：js是逐行解析 一步步执行 执行中有一步错 下面就不会再往下执行了 </script> - let const var 的区别
- var可以提升作用域 ======≥let和 const不可以提升作用域
- var可以重复声明 ========≥let和const不可以重复声明
- var可以先使用再声明 =====≥let 和const不可以先使用再声明====》不推荐
- let和const具有块级作用域 =====≥var不具有块级作用域
- const是常量必须给初始值且const的常量是不能被修改的========》var和let声明的是变量可以被修改
- 数据类型
- 为什么分数据类型 =====≥1.为了充分的利用内存 2.为了程序员方便使用数据
- 基本数据类型又被称为值类型=====≥number boolean string null undefined
- NaN表示计算错误，它表示一个不正确或者未定义的数学操作所得到的一个结果
typeof用于检测数据类型 用于判断基本数据类型 null除外====》null typeof返回值是个对象（null是一个尚为创建的一个对象 用于将来里面会存放一个对象）
其余的基本类型typeof返回值是number boolean string null undefined
undefined和null区别：undefined表示只声明未赋值 null表示声明了但赋的值为空（因为将来里面会存放一个对象）
- 复杂数据类型又称为引用类型=====≥object Arr function
- 隐式转换
- 数字类型number 的隐式转换 ：+ - * / % （加减乘除余 字符串前面加正号）====》显示转换：Number paseInt paseFolt
- 字符串类型string 的隐式转换 ：+' ' =====≥显示转换String()包裹 变量名+toString()(字符串可以是单引号、双引号、单双引号嵌套、反撇号即模版字符串 注意：不能单引号嵌套单引号、双引号嵌套双引号)
<script> // 隐士转换成数字 + - * 取余/ console.log(10 - 9); //1 console.log("10" - 9); //1 隐士转换成数字 console.log("10" * "2"); //20 console.log("10" / "2"); //5 console.log("10" % "2"); //0 console.log(+"10" + 2); //隐士转换 在前面+ +号转换成数字//12 console.log("10" + 2); //这里属于字符串的拼接 console.log(typeof +"20"); //number console.log("10" / "1"); // + 写在数据前面为隐式转换number 否则为字符串拼接 // 字符串隐式转换 String()包裹 /+‘’拼接单引号/变量名+toString() console.log(String(10)); //10 String()包裹 console.log(10 + ""); //10 +‘’拼接单引号 let age = 10; console.log(age.toString()); //10 /变量名+toString() console.log(typeof age.toString()); //string </script>
