JavaScript开头

目录

一、初识javascrip

a.javascrip是什么

b.作用

 c.HTML/CSS/JS关系

d.浏览器执行JS简介

e.JS的组成

1.ECMAScript

2.BOM页面文档对象模型

3.BOM浏览器对象模型

f.JS初体验

1.行内式

 2.内嵌式

 3.外链式

 g.注释

h.JS输入输出语句


一、初识javascrip

a.javascrip是什么

是运行在客户端(用户电脑)的脚步语言。

脚本语言:不需要编译,运行过程中由js解释器(js引擎)逐行进行解释并执行,一行一行执行,读到一行翻译一行。

简称:JS

b.作用

1.表单动态校验(密码强度检测)

2.网页特效

3.服务端开发(Node.js)

4.桌面程序(Electron)

5.app(Cordova)

6.控制硬件-互联网(Ruff)

7.游戏开发(cocos2d-js)

 c.HTML/CSS/JS关系

HTML:人的身体决定网页结构和内容。

CSS:决定网页呈现给用户的样式,相当于衣服。

JS:实现业务逻辑和页面控制(决定功能),相当于动作。

d.浏览器执行JS简介

浏览器=渲染引擎+JS引擎

渲染引擎:用来解析HTML和CSS,俗称内核。

JS引擎:也称JS解释器。用来读取网页中的JS代码,对其处理后运行。

浏览器本身并不会执行JS代码,而是通过内置JS引擎来执行JS代码。JS引擎执行代码时逐行解释每一句源代码(转换为机器语言),然后由计算机去执行,所以JS语言归为脚本语言,会逐行解释执行。

e.JS的组成

1.ECMAScript

ECMAScript是由ECMA国际(原欧洲计算机制造商协会)进行标准化的一门编程语言,这种语言在万维网上应用广泛,它往往被称为JavaScript或JScript,但实际上后两者是ECMAScript语言的实现和扩展。

ECMAScript : ECMAScript规定了JS的编程语法和基础核心知识,是所有浏览器厂商共同遵守的一套JS语法工业标准。

2.BOM页面文档对象模型

DOM:文档对象模型(Document Object Model,简称DOM )),是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过DOM提供的接口可以对页面上的各种元素进行操作(大小、位置、颜色等)。

3.BOM浏览器对象模型

BOM(Browser Object Model,简称BOM)是指浏览器对象模型,它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口,比如弹出框、控制浏览器跳转、获取分辨率等。

f.JS初体验

1.行内式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script></script>
		<title></title>
	</head>
	<body>
		<!-- 1.行内式js:直接写到元素的内部 -->
		<input type="button" value="唐伯虎" onclick="alert('秋香姐')">
	</body>
</html>

 2.内嵌式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script>
			alert('沙漠骆驼');
		</script>
		<title></title>
	</head>
	<body>
		<!-- 1.行内式js:直接写到元素的内部 -->
		<input type="button" value="唐伯虎" onclick="alert('秋香姐')">
	</body>
</html>

 3.外链式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
			<script src="my.js"></script>
		<title></title>
	</head>
	<body>
	</body>
</html>
alert("你是谁?");

 

 g.注释

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
			<script>
				// 1.单行注释
				/*
				2.多行注释
				2.多行注释
				*/
			</script>
		<title></title>
	</head>
	<body>
	</body>
</html>

 // 1.单行注释
/*
  2.多行注释
  2.多行注释
*/

h.JS输入输出语句

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
			<script>
				// 这个是一个输入框
				prompt('请输入你的年龄:')
			</script>
		<title></title>
	</head>
	<body>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
			<script>
				// 这个是一个输入框
				prompt('请输入你的年龄:')
				// 警示框输出展示给用户
				alert("注意不安全链接")
				// console 控制台输出给程序员测试使用
				console.log("正确")
			</script>
		<title></title>
	</head>
	<body>
	</body>
</html>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

『Knight』

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值