微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > 博客列表 > JS基础-初识JavaScript
博主信息
博文 58
粉丝 3
评论 0
访问量 76697
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
JS基础-初识JavaScript
岂几岂几
原创
867人浏览过

初识JavaScript

1. JS组成

  • JS语言核心有三部分

    • ECMAScrpt: 语法核心

    • DOM: Document Object Model, 文档对象模型(文档指HTML文档或XML文档)

    • BOM: Browser Object Mode, 客户端/浏览器窗口对象,又叫浏览器对象模型(操作对象: 浏览器窗口对象模型).

  • 除此之外还有一些补充

    • 浏览器/宿主环境提供的API: 如Timeout(), 即定时器.

  • 宿主环境: 执行环境/运行上下文

    • 浏览器: Chrome, Firefox, edge, 360浏览器, 各种浏览器…
    • 命令行执行
    • 服务器端执行: Node.js

2. JS基本知识和语法

  1. 在html文件中嵌入JS代码, 需要使用<script>标签. 其中type属性指定脚本语言, 目前text/JavaScript已成为唯一, 所以不写也可以.
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>HTML文档中嵌入js代码</title>
  7.     <!-- type属性指定脚本语言, 目前text/JavaScript已成唯一, 所以不写type属性也可以 -->
  8.     <script type="text/javascript">
  9.         // window变量指向当前浏览器窗口, 类似PHP中的echo.
  10.         window.document.write("<h1>Hello JavaScript!</h1>");
  11.     </script>
  12. </head>
  13. <body>
  14. </body>
  15. </html>

  1. script标签的src标签可以指定外部的一个js脚本文件, 此时script标签内部的代码将被忽略

demo1.js

  1. window.document.write("<h1>Hello JavaScript~~~~~~~~~~</h1>");

引用demo1.js

  1.     <!-- script标签的src标签可以指定外部的一个js脚本文件, 此时script标签内部的代码将被忽略 -->
  2.     <script src="demo1.js">
  3.         // 下面的代码将不会执行
  4.         window.document.write("hahahaha");
  5.     </script>
  1. 在执行js脚本时, 将会中断HTML文档解析, 当js脚本执行完毕时,才会继续往下解析
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>HTML文档中嵌入js代码</title>
  7.         <!-- 在执行js脚本时, 将会中断HTML文档解析, 当js脚本执行完毕时,才会继续往下解析, 特别是很长的js脚本, 会造成HTML页面假死. 所以, 一般把写在HTML文档中的js代码放在靠近</body>的地方 -->
  8.     <script>
  9.         alert("我将中断HTML文档往下解析");
  10.     </script>
  11. </head>
  12. <body>    
  13.     <!-- 在关闭alert()弹出框之前,下面的HTML元素不显示 -->
  14.     <h1>你好! JavaScript</h1>
  15. </body>
  16. </html>

  1. 为解决执行js脚本发生的阻塞, 可以给script标签添加defer属性, 把js脚本放到外部文件中, 使用src文件引入, 这样可以实现延时加载, 文档也不会阻塞

外部js脚本文件

  1. alert('看看我会不会把HTML文档解析中断');

延时加载测试脚本

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>HTML文档中嵌入js代码</title>
  7.     <script src="alert.js" defer>
  8.     </script>
  9. </head>
  10. <body>    
  11.     <h1>你好! JavaScript</h1>
  12. </body>
  13. </html>

  1. 另一种解决js脚本阻塞的方法, 就是给script标签添加async属性, 即异步加载, 这样可以实现解析HTML文档和 执行js脚本同时进行

外部js文件略

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>HTML文档中嵌入js代码</title>
  7.     <script src="alert.js" async>
  8.     </script>
  9. </head>
  10. <body>    
  11.     <h1>你好! JavaScript</h1>
  12. </body>
  13. </html>

2. JS变量声明和赋值

  1. JS支持中文变量名, 但是强烈建议不要使用.
  1. var 姓名="张三";
  2. console.log(姓名);
  3. /* result: 张三 */
  1. JS变量名区分大小写.
  1. var username = "李四";
  2. var UserName = "王五";
  3. console.log(username);
  4. console.log(UserName);
  5. /* result: 
  6. 李四
  7. 王五*/
  1. JS中函数名也区分大小写, 这点与PHP有所区别
  1. function func() {
  2.   console.log("func");
  3. }
  5. function FUNC() {
  6.   console.log("FUNC");
  7. }
  9. func();
  10. FUNC();
  11. /* result:
  12. func
  13. FUNC */
  1. 更新变量值: 变量名=新值
  1. var name = "James";
  2. console.log(name);
  3. name = "Kobe";
  4. console.log(name);
  5. /* result:
  6. James
  7. Kobe */
  1. 在ES6中, 可以重新定义变量
  1. var name = "James";
  2. console.log(name);
  3. var name = "Kobe";
  4. console.log(name);
  5. /* result:
  6. James
  7. Kobe */

3. JS的作用域

  • JS中, 作用域是一个对象, 用来查找变量的工具.

  • JS与PHP的作用域是一样的, 也分全局和函数作用域

  • PHP和js(ES5)均不支持块作用域(java中的代码块), ES6支持

  • 函数可以访问全局作用域的成员, 而全局作用域却无法访问函数作用域的成员

  1. var varInGlobal = 'glb';
  2. function func1() {
  3.   var varInFunc = 'hello';
  5.   // 函数作用域中可以直接访问外部作用域的变量
  6.   console.log(varInGlobal);
  7. }
  8. func1();
  10. // 无法访问函数中的变量
  11. console.log(varInFunc);
  12. /* result:
  13. glb
  14. Uncaught ReferenceError: varInFunc is not defined
  15.     at <anonymous>:11:21
  16. */
  18. // 块作用域
  19. if(true) {
  20.   var var1 = 'hello1';
  21.   let var2 = 'hello2';
  22. }
  24. // var1可以正常访问, 不受块作用域影响
  25. console.log(var1);
  26. // let声明的变量就受影响了(ES6)
  27. console.log(var2);
  28. /* result:
  29. hello1
  30. Uncaught ReferenceError: var2 is not defined
  31.     at <anonymous>:10:21
  32. */

变量提升

  • 在JS中, 变量未定义之前, 就可以访问了. 值为undefined

  • JS中的变量声明和初始化时分开的. var sayHi = "hello";可以分解为var sayHi;和sayHi="hello". 当变量只被声明而未被初始化时, 其值为undefined.

  1. console.log(seyHello);
  2. var sayHello;
  3. /* result: undefined */

学习心得

js让前端变得灵活. 没有js, 网页是死的, 渲染完成就不会改变, 除非跳转到新的页面. 有了js, 就有了很多交互. 前端就活了. HTML标签指定了页面的元素, CSS定义了元素的样子, JS则定义了元素的行为.

批改老师：天蓬老师天蓬老师

批改状态：合格

老师批语：js其实还是很有意思的, 不是吗
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录