「零基础学 JS」JavaScript 入门(一):基础语法与浏览器执行机制
!!!实例胜过千言万语,一定要亲自试一试!
你以为的捷径,其实是最远的弯路。
拿JavaScript来说,它是一门语言,语言就有语法,就必然遵循特定的语法规则和构成方式。你跳过的语法基础,都会在未来的Bug里加倍偿还。别等到项目上线,连let和const是什么意思都还得百度。
什么是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 属性里。比如:onclick、onmouseover、onload这些事件属性,天生就能直接接收 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 教程
