大家好,小编来为大家解答以下问题,javascript用什么软件编程,javascript用来做什么的,今天让我们一起来看看吧!
第二课时 JavaScript概述
1、关于JavaScript
JavaScript是轻量级的编程语言,是一种运行在客户端浏览器中,由浏览器解析的脚本语言。
脚本语言:即不需要编译,直接可以被浏览器解析和执行Python解释器的安装步骤。
2、JavaScript的组成结构
3、为什么学习 JavaScript?
JavaScript 是 web 开发人员必须学习的 3 门语言中的一门:
HTML 定义了网页的内容
CSS 描述了网页的布局
JavaScript 网页的行为
4、用JavaScript能做什么?
JavaScript可以用来修改页面内容,HTML图像,HTML样式,以及表单的验证。
5、浏览器解析页面的原理
第一步:浏览器向服务器发起请求,服务器接受请求后返回请求的页面文档
第二步:浏览器接收文档,开始从头解析(解析HTML文件)。
第三步:解析文档生成DOM,如果有CSS文件则会生成CSSDOM(加载外部脚本和样式表文件)
第四步:解析并执行脚本代码
第五步:解析完成文档后生成DOM树(触发DOMContentLoaded)
第六步:加载图片等外部文件
第六步:浏览器根据DOM树的内容计算出各个节点的位置和大小,绘制在浏览器上(页面加载完成,触发oad)
当从dom从上到下解析时,遇到标签会停止解析,转而去解析脚本,如果是内联的脚本,浏览器会先去执行这段内联脚本。如果是外链的,那会会先加载脚本js文件,后执行js文件。在处理完js脚本后,浏览器会继续解析HTML文档。
同样,Java执行也会收到标签CSS样式文件的影响。如果在标签前面有CSS样式文件,需css样式文件解析并加载完后才执行脚本,因为java可以查询对象的样式。
疑问:为什么CSS文件放在头部,将JS文件放到尾部?
因为浏览器生成DOM树时是一行一行读HTML代码的,标签放在最后面就不会影响前面的页面的渲染。
6、JavaScript的基本使用
HTML 中的脚本必须位于 标签之间。且脚本可被放置在 HTML 页面的<body>和<head>部分中。
6.1 JavaScript的引用方式
- 内嵌式:将JS代码写在<>标签内,<>标签可放置于任何位置
< type="text/java">
alert(‘hello world!’) //alert()方法为弹出一个警告对话框
</>
- 外联式:将JS代码写入外部JS文件中,通过<>标签内的src属性引入
< src="./index.js" type="text/java" charset="utf-8"></>
- 行内JS:直接将代码写在HTML元素内,该方法问题较多,不推荐使用
<button type="button" onclick="java:alert('hello world!')">click me</button>
6.2 输入 / 输出语句
- alert(): 创建一个警告对话框,参数内容为对话框文本
例如:
输出字符串
alert('hello world')
输出表达式
alert(1+1)
输出变量
var name = 'Alice'
alert('我是'+name)
- prompt():创建一个提示对话框,用于收集用户输入,参数一为提示框文本
内容,参数二为输入框的默认值(参数二可选)
prompt('你最喜欢的颜色是','红色')
或者有返回值,可将返回值存入变量再调用
var color = prompt('你最喜欢的颜色是','红色')
alert(color)
- document.write():直接在页面上输出内容,参数除了可以是字符串、表达式变量,还可以是HTML标签代码
document.write('<h1>hello world</h1>')
document.write()中可以使用转义字符,但无法使用\n换行符,如需换行,可使用<br>标签
document.write('hello' + '<br>' + 'world')
- JavaScript的调试,在浏览器中使用F12激活调试,然后选择console
控制台输出:console.log()
var a = 1
var b = 2
var c = a + b
console.log(c) //控制台输出语句
以上代码结果为: