当前位置: 首页 > news >正文

「零基础学 JS」JavaScript 入门(一):基础语法与浏览器执行机制

!!!实例胜过千言万语,一定要亲自试一试!

你以为的捷径,其实是最远的弯路。
拿JavaScript来说,它是一门语言,语言就有语法,就必然遵循特定的语法规则和构成方式。你跳过的语法基础,都会在未来的Bug里加倍偿还别等到项目上线,连letconst是什么意思都还得百度。

什么是JavaScript(js)

一个完整的网站同时具备前端(页面显示样式)和后端(业务逻辑处理)。前端由HTML、CSS、JavaScript共同构成。HTML和CSS负责让网页更好看,js负责能做哪些操作,比如<script>alert(1)</script>网页会弹出一个对话框。

HTML定义网页的内容

CSS规定网页的布局

JavaScript对网页行为进行编程

JavaScript的执行流程

<!DOCTYPE html> <html> <body> <h2>Body 中的 JavaScript</h2> <p id="demo"></p> <script> document.getElementById("demo").innerHTML = "我的第一段 JavaScript"; </script> </body> </html>

这是一个简单的js代码,只关注HTML代码是由一个二级标题(h2)和一个没有内容的段落构成(p),运行后网页应该只显示h2中中的一行文字,但事实确实显示两行文字,下图见。

这是因为js代码对网页行为进行编辑,通过代码改变了原本网页内容。

<script> document.getElementById("demo").innerHTML = "我的第一段 JavaScript"; </script>

这是一个典型的js代码:

document:代表当前整个网页文档,可以理解为你的 HTML 页面本身。

getElementById():查找标签元素,在文档中寻找 id 属性为 "demo" 的元素。
比如,如果页面里有 <p id="demo">旧内容</p>,它就选中这个 <p> 标签。

.innerHTML:替换被查找的元素

所以原本的空白段落就被“我的第一段JavaScript”替换了。

这是代码执行的过程,那么执行这一过程是在浏览器?还是服务器?

答案是在浏览器,因为浏览器本质上就是一个程序,它擅长做三件事:解析html(页面结构)、css(页面样式)、JavaScript(页面交互),所以当浏览器收到html后,会自带吧它渲染成网页

完整流程为:请求服务 -- 服务器 -- 浏览器根据反馈解析HTML、CSS、js

<script>标签

在 HTML 中,JavaScript 代码必须位于<script></script>标签之间。

<script> document.getElementById("demo").innerHTML = "我的第一段 JavaScript"; </script>

注:有些 JS 代码确实可以不用<script>标签,直接写在 HTML 属性里。比如:onclickonmouseoveronload这些事件属性,天生就能直接接收 JS 代码。
当按钮被点击时,浏览器会直接把引号里的内容当作 JavaScript 来执行,不需要额外包一层<script>

js语句语法规则

JavaScript 语句由以下构成:值、运算符、表达式、关键词和注释。

var x, y; // 如何声明变量 x = 7; y = 8; // 如何赋值 z = x + y; // 如何计算值 /*多行注释*/ //单号注释 function myFunction() { document.getElementById("demo").innerHTML = "Hello Kitty."; document.getElementById("myDIV").innerHTML = "How are you?"; }

值:就是具体的数据,如数字7或字符串'hello'

运算符:使用算数运算符(+-*/)来计算值,使用赋值运算符(=)向变量赋值 例:x=7

表达式:表达式是值、变量和运算符的组合,计算结果是值 例:5+7

关键词:javaScript 语句常常通过某个关键词来标识需要执行的 JavaScript 动作,不能做变量名

代码块:定义一同执行的语句,在{...}内

注释:单行注释以//开头、多行注释以/*开头,以*/结尾。

标识符:用来为变量命名。首字符必须是字母、下划线(-)或美元符号($);连串的字符可以是字母、数字、下划线或美元符号

分号:以分号为每一句的介绍,所有的语句组成一个js程序(代码)

js对大小写敏感

脚本

脚本就是具有某些指令的代码,js可以用来写作脚本

<script>alter(1)</script>

这个是显示弹窗为1的脚本,在浏览器中执行

可以写在html的<head><body>中

<!DOCTYPE html> <html> <head> <script> function myFunction() { document.getElementById("demo").innerHTML = "段落被更改。"; } </script> </head> <body> <h1>一张网页</h1> <p id="demo">一个段落</p> <button type="button" onclick="myFunction()">试一试</button> <script>alert(1)</script> </body> </html>

外部脚本

脚本存放在外部文件:myScript.js中,使用该脚本时需要在<script>标签的src(source) 属性中设置脚本的名称

<script src="myScript.js"></script>

外部引用

可以通过使用引用url来引用外部脚本

<script src="https://www..com.cn/js/myScript1.js"></script>

参考来源:JavaScript 教程

http://www.jsqmd.com/news/1114229/

相关文章:

  • 神经网络架构可视化:从概念到实践的思维重构
  • 前端安全防御实战:从CSRF攻击原理到50种防御措施详解
  • 别再手动写@Test了!用这1个定制化Prompt+2个插件+1份断言规范,让ChatGPT产出符合SonarQube A级标准的测试代码
  • ComfyUI IPAdapter节点异常排查:从现象到根源的完整诊断流程
  • 2026年6月南大通用GBase 8c数据库认证培训圆满结束
  • 别再瞎找了!盘点2026年全民喜爱的AI论文写作软件
  • 5分钟解锁Wallpaper Engine壁纸资源:RePKG带你轻松提取和转换
  • 终极指南:如何使用applera1n工具绕过iOS 15-16设备激活锁
  • 软考中项/高项 vs 阿里云ACA/ACP:4张能力雷达图+6个典型岗位JD匹配度对比,这份稀缺决策矩阵仅限本周开放下载
  • JMeter扩展SSE流式接口自动化测试:从协议原理到工程实践
  • 新能源电池研发管理用哪家PLM?2026年国内外软件分类与选型要点一览
  • 深度解析ComfyUI IPAdapter Plus依赖冲突:从InsightFace安装失败到二进制兼容性修复
  • 构建高效手机号码定位系统:智能查询工具完全指南
  • 【紧急预警】2024年起软考高项论文题型重构+PMP新版考试权重调整——现在不决策,下半年将多花6个月+2.3万元试错成本
  • Spring Boot实战:从零构建冷链监控平台温控系统毕业设计
  • SpringBoot3+ShardingSphere实现高性能分库分表实战
  • “癌王”胰腺癌生物标志物研究进展与全景梳理
  • 拼多多API高并发对接实战:从加密签名到稳定性架构设计
  • Layerdivider:10分钟完成8小时工作,AI智能图像分层工具彻底改变设计流程
  • iOS 15-16 iCloud激活锁绕过技术解密:applera1n逆向工程深度剖析与实战秘籍
  • 开源攻击面管理平台:从资产发现到风险运营的自动化实践
  • 计算机毕设项目源码实战指南:从环境配置到功能定制
  • 为什么你去年通过的《信息系统项目管理师》案例分析今年不能补考?单科成绩有效性5步自检清单
  • ChatGPT角色设定提示词工程(企业级SOP已验证):92%用户忽略的3层语义锚定技术
  • ComfyUI IPAdapter Plus:图像风格迁移的强大工具与InsightFace安装完整指南
  • 搭建一个轻量 Agent Harness——让 AI Agent 安全地执行命令、读写文件
  • 单张RTX 4090能跑的最强开源大模型实测对比
  • PHP WebSocket端到端加密实战:从ECDH密钥交换到AES-GCM消息保护
  • 性价比高的百年药企选哪家
  • 如何用免费工具FanControl快速解决Windows电脑风扇噪音与散热问题?