JavaScript入门案例

最新推荐文章于 2022-12-04 00:31:30 发布

不是很喜欢打码的小手

最新推荐文章于 2022-12-04 00:31:30 发布

阅读量220

点赞数

文章标签： JS 笔记

本文链接：https://blog.csdn.net/weixin_42230478/article/details/81008774

版权

JavaScript 一种直译式脚本语言

java源代码--->编译成.class文件--->java虚拟机中才能执行

脚本语言：源码--->解释执行

js由我们的浏览器来解释执行

HTML：决定了页面的框架

CSS：用来美化我们的页面

JS：提供用户的交互的

JS的组成：

ECMAScript（核心部分）：定义JS的语法规范

DOM：Document Object Model 文档对象模型，主要用来管理页面的

BOM：Brwoser Object Model 浏览器对象模型，前进，后退，页面刷新，历史记录，屏幕宽高

JS的语法：

变量弱类型 var name=xxx

区分大小写

语句结束之后的分号，可以有，也可以没有

写在script标签

JS的数据类型：

基本类型：

        String
        number
        boolean
        undefine
        null

引用类型：

对象，内置对象

类型转换：

JS内部自动转换

JS的运算符和语句：

运算符和java一样

“===”全等号：值和类型都必须相等

“==”值相等就可以了

语句和java一样

JS的输出

alert（）直接弹框
document.write（）向页面输出
console.log() 向控制台输出
innerHTML 向页面输出
获取页面元素：document.getElementById（"d的名称");

JS声明变量：

var 变量的名称=变量的值

JS声明函数：

var 函数的名称=function（）｛

｝

JS的开发步骤

1.确定事件

2.通常事件都会触发一个函数

3.函数里面通常都会去操作页面元素，做一些交互动作

实例1：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<script type="text/javascript">
		var i=111;
		var j="111";
		alert(typeof j);
	</script>
</head>
<body>
</body>
</html>

实例2：实现交互

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<script type="text/javascript">
		function dianwo() {
			alert("我被点击了")
		}
	</script>
</head>
<body>
	<input type="button" value="点我，弹框" οnclick="dianwo()">
</body>
</html>

实例3：

确定事件，点击事件
通常事件都会触发一个函数
函数里面通常都会去操作页面元素，做一些交互动作

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<script type="text/javascript">
		function dianwo() {
			//alert("我被点击了")
			var div=document.getElementById("div1")
			div1.innerHTML="内容被替换掉了！"
		}
	</script>
</head>
<body>
	<input type="button" value="点我，替换" οnclick="dianwo()">
	
	<div id="div1">
		我要被替换掉！
	</div>
</body>
</html>