一、Js 的组成
1、JS 语言核心（只有三部分）
| STT |
组成部分 |
描述 |
| 1 |
ECMAScript |
核心语法 |
| 2 |
DOM |
Document Object Model 文档(html/xml)对象模型 |
| 3 |
BOM |
Browser OBject Model 浏览器窗口对象模型 |
2、定时器: Timeout(), 宿主环境提供的 API
3、宿主环境: 执行环境/运行上下文
| STT |
组成 |
举例 |
| 1 |
浏览器 |
chrome / firefox / Edge / … |
| 2 |
命令行 |
| 3 |
服务器 |
Node.js |
二、JavaScript基本语法
- js通过一对
<script></script>标签嵌入到html文档中执行。 - js注释：和PHP一样,单行注释—
//；多行注释—/*...*/
三、实例演示 js 变量、作用域等基础知识
script标签属性
<!--<script src="test.js" defer>--> <script> // js 代码就是写到这样一对标签中 /* * script标签属性： * type="text/javascript" 目前前端脚本语言只有javascript，可以省略 * src属性：指向外部js文件，通过该属性导入外部js文件，如果有src属性，标签中的内容会不能用 * defer属性：将会延迟加载外部的js文件,直到当前的html解析完成 * async属性: 可以实现外部的js文件与当前的html文件的解析同步进行 * */ // window.document.write("<h1>大家晚上好！</h1>"); // alert():弹窗 // alert('php.cn'); // 不会生效：因为先解析js文件，拿不到html文档 // 所以如果的DOM操作，js文档要写到body后面 document.querySelector("h2").style.color = "red"; </script><body><h2>越努力，越幸运。</h2></body><script> document.querySelector("h2").style.color = "red";</script></html>
js变量和作用域
<script> // Unicode: 每个字符都采用两个字节表示。 // \转义符 // var 姓名 = "吴\"老二\""; // console.log(姓名); // \转义符：出现在正常的字符前无效 // var 姓名 = "\吴\"老二\""; // console.log(姓名); // 变量声明 /* * php变量前面没有关键字，直接 $name = "赵大叔"; * js-->ES5使用var关键字声明变量 * * js 和 PHP 一样，变量区分大小写 * */ var username = "lzyx1"; var userName = "lzyx3"; console.log(username); console.log(userName); // 函数 /* * 在JS中, 函数区分大小写,PHP中，函数中不区分 * */ function hello() { console.log("hello"); } function HELLO() { console.log("HELLO"); } hello(); HELLO();</script><script> // 变量 // 约定大于配置 var email = "zhangsan@php.cn"; var SEX = "male"; console.log(email); // 更新 email = "lisi@php.cn"; console.log(email); // ES5允许重新声明; let 不允许 var email = "Hello@php.cn"; // 作用域是一个对象, 用来查找变量的工具 // php中作用域有两个: 函数作用域, 全局/外部使用域/函数外部 // js与php的作用域是一样的,也有函数和全局 // php与js都不存在块作用域 --> '{}' var congviec = "chuquan"; function showcongviec() { var username = "dashu"; console.log(username + "是" + congviec); } // 不能访问 // console.log(username); showcongviec(); { // 块作用域 var age = 40; } console.log(age); { // ES6支持块作用域 let salary = 10000; } // 不能访问 // console.log(salary); if (true) { var hello = "php.cn"; // let hello = "php.cn"; console.log("Hello...." + hello); } console.log("Hello...." + hello);</script>
ES5变量声明的自动提升
<script> // 变量声明提升: 变量未定义之前就可以使用了 // 访问在前 console.log(salary); // 声明在后 var salary = 10000; // 相当于 /* * var salary; * console.log(salary); * salary = 10000; * */ console.log(salary);</script>
总结：JS有关变量和函数方面，和PHP的不少相同之处，学习过程中注意对比记忆，会容易不少。
