JavaScript引入和变量
JavaScript引入
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript引入</title>
</head>
<body>
<!-- JavaScript（和Java没有关系）是一个跨平台、面向对象的脚本语言；是控制HTML的行为的，和HTML、CSS一起构成了网页的三要素 -->
<!-- JavaScript在HTMl中主要通过两种方法进行引入：
1. 在script标签中直接写代码，这种写法比较简单，但是不方便维护，不建议使用
JavaScript的代码必须在<script>标签中，是可以存在于HTML中的任何位置，并且可以存在任意个
但是一般将其放置在<body>元素的底部，可以改善网页显示的速度
2. 在script标签中引入外部js文件，这种写法比较常用，但是需要先创建js文件，再引入
-->
</body>
<!-- <script>
alert("Hello JavaScript")
</script> -->
<!-- 从外部引入js文件 -->
<!-- js不是标签语言，所以说不能在其中定义<script>之类的标签，其中只有js代码 -->
<script src="js/03js.js"></script>
<!--
js中有三种输出语句：
1.window.alert()：在页面弹出警告框输出
2.window.console.long()：在控制台中输出
3.document.write()：直接在页面中输出，但是不建议使用，因为会覆盖掉页面中的所有内容
注：为什么window可以省略？window是浏览器环境中的全局对象，在全局作用域下，渲染引擎可以找到window并使用
-->
<script>
alert("Hello JavaScript")
console.log("Hello JavaScript")
document.write("Hello JavaScript")
</script>
</html>JavaScript变量
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript变量使用</title>
</head>
<body>
<!-- JavaScript是一个弱类型的语言，变量是可以存放不同类型的值的
js中主要是通过let关键字前声明变量
js中变量标识符命名规则和Java一样
-->
<!-- <script>
let a = 20;
alert(a);
a = "hello";
alert(a);
// 上述代码，a既可以存储数字，又可以存储字符串，证明了js是弱类型的语言
</script> -->
<!--
在早期的js中，声明变量还可以使用var关键字声明
但是因为var关键字是有些不严谨的，所以说不建议使用var，而是使用let关键字
-->
<!-- <script>
var name = "a";
name = "b";
alert(name);
var name = "c";
alert(name);
// name变量在这个script中重复声明了，这是不严谨的，但是使用var就可以
</script> -->
<!-- <script>
let name = "a";
name = "b";
alert(name);
let name = "c";
alert(name);
// 使用let，浏览器显示是没有错误的，但是控制台已经报错了：name has been declared
</script> -->
<!--
JavaScript中的常量声明：const关键字，常量一旦声明，若想改变其值，那么将会报错
-->
<!-- <script>
const name = "tom";
name = "jack";
alert(name);
// 浏览器不会显示，报错：Assignment to constant variable
</script> -->
<!--
js中的数据类型
js虽然是弱类型的语言，但是js中也是存在数据类型的；其分为：原始数据类型和引用数据类型（基本数据类型和引用数据类型）
原始数据类型：
1. undefined：表示未定义，表示一个变量没有初始化，但是已经声明
2. boolean：表示布尔值，true和false，大小写敏感
3. number：表示数字，支持整数和小数，支持浮点数，支持科学计数法，支持负数，支持正负数，支持正负浮点数
4. string：表示字符串，字符串中可以包含数字
5. null：表示对象为空值，注意js大小写敏感，null、Null、NULL完全不同
关键字typeof可以返回变量的数据类型
-->
<script>
//原始数据类型
alert(typeof 3); //number
alert(typeof 3.14); //number
alert(typeof "A"); //string
alert(typeof 'Hello');//string
alert(typeof true); //boolean
alert(typeof false);//boolean
alert(typeof null); //object
let a;
alert(typeof a); //undefined
</script>
<script>
/*
模板字符串：字符串类型的数据，可以使用双引号""，也可以使用单引号''，也可以使用反引号``
使用反引号的字符串称为模板字符串
模板字符串可以用来简便的拼接字符串和变量
内容拼接时，使用${}来引用变量，避免了 “+” 来拼接字符串和变量
*/
let name = "tom";
let age = 18;
// 常规拼接
console.log('大家好我是' + name + '今年' + age + '岁了');
// 使用模板字符串简便拼接
console.log(`大家好我是${name}今年${age}岁了`);
</script>
</body>
</html>