JavaScript从入门到精通
- 一 Hello World
- 二 Js编写位置
- 三 Js基本语法
- 四 常量和变量
- 五 标识符
- 六 数据类型
- 七 强制类型转换
一 Hello World
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--Js代码需要编写到script标签中--><script>// 弹出窗口alert("Hello World!")// 向body体中输出内容document.write("Hello World!")// 向控制台输出内容console.log("Hello World!")</script>
</head>
<body></body>
</html>
二 Js编写位置
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--可以编写到外部js文件中，然后通过script标签引入可以在不同的页面引入script标签一旦用于引入，就不能再编写代码了，如果需要就重新创建一个新的script标签--><script src="script.js"></script><script><!--推荐写在script中-->alert("script标签中的js代码");</script>
</head>
<body>
<!-- 可以将js代码写在点击事件中，当点击按钮时，才会执行js代码 -->
<button onclick="alert('点击事件');">点击按钮</button>
<!--可以在超链接的href属性中写js代码，点击超链接会执行js代码-->
<a href="javascript:alert('a标签');">点我</a>
</body>
</html>
三 Js基本语法
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>/* 多行注释可以在源码中查看*/// 单行注释/** 1.Js中严格区分大小写* 2.Js中每一条语句以分号结尾（;）不写浏览器自动添加* 3.Js会会忽略多个空格和换行（python是以缩进区分层级）* */</script>
</head>
<body></body>
</html>
四 常量和变量
-
var 声明的范围是函数作用域，let 和 const 声明的范围是块作用域
-
var 声明的变量会被提升到函数作用域的顶部，let 和 const 声明的变量不存在提升，且具有暂时性死区特征
-
var 允许在同一个作用域中重复声明同一个变量，let 和 const 不允许
-
在全局作用域中使用 var 声明的变量会成为 window 对象的属性，let 和 const 声明的变量则不会
-
const 的行为与 let 基本相同，唯一 一个重要的区别是，使用 const 声明的变量必须进行初始化，且不能被修改
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>// 声明变量let a;// 为变量赋值a = 123;a = 456;// 声明和赋值let b = 789;console.log(a);console.log(b)</script>
</head>
<body></body>
</html>
五 标识符
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>/** 变量名，函数名，属性名都属于标识符* - 需要遵守如下规则* 1.可以包含字母、数字、下划线、$* 2.不能以数字开头* 3.不能是Js中的关键字和保留字* 4.一般采用驼峰命名法（python建议下划线命名）首字母小写其余单词首字母大写其余小写* */let helloWorld = "Hello World!";</script>
</head>
<body></body>
</html>
六 数据类型
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>/** -六种数据类型* 1、String 字符串* 2、Number 数字* 3、Boolean 布尔* 4、Null 空值* 5.Undefined 未定义* 6、Object 对象（引用数据类型）* */let str = "Hello";console.log(str);// \表示转义符console.log("我说:\"明天星期五\"");let int = 123;let float = 1.1;// typeof 检查数据类型console.log(typeof int);console.log(typeof float);// Js可以表示数字的最大值 1.7976931348623157e+308console.log(Number.MAX_VALUE);// 5e-324console.log(Number.MIN_VALUE);// 0.30000000000000004 精度问题console.log(0.1 + 0.2);let isShow = true;console.log(typeof isShow);// 表示空对象let a = null;// 返回objectconsole.log(typeof a);let c;// 声明变量未赋值console.log(c);</script>
</head>
<body></body>
</html>
七 强制类型转换
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>// 将其他数据类型转换成Stringlet a = 123;a = a.toString();console.log(a);console.log(typeof a);let b = true;b=String(b);console.log(b);console.log(typeof b);// 其他数据转Numberlet c = "123";c = Number(c);console.log(c);console.log(typeof c);let d = "字符串";d = Number(d);// NaNconsole.log(d);console.log(typeof d);let e = true;e = Number(e);console.log(e); // 1console.log(typeof e);let f = undefined;f = Number(f)console.log(f) //NaNconsole.log(typeof f)let g = "100px";// 将字符串中有效数字取出来g = parseInt(g);console.log(g);console.log(typeof g);let h = "100.1px";h = parseFloat(h);console.log(h);console.log(typeof h);// 0x表示16进制数字let i = 0x10;console.log(i);// 0o 开头是8进制let j = 0o10;console.log(j);// 0b 二进制let k = 0b1;console.log(k);let l = "070";l = parseInt(l, 10); // 转成10进制console.log(l);// 转换成Booleanlet m = 1;m = Boolean(m);console.log(m)</script>
</head>
<body></body>
</html>
