JavaScript入门
JavaScript概述
什么是javascript: JavaScript一种直译式脚本语言
什么是脚本语言?
java源代码 ----> 编译成.class文件 -----> java虚拟机中才能执行
脚本语言: 源码 -------- > 解释执行
js由我们的浏览器来解释执行
HTML: 决定了页面的框架
CSS: 用来美化我们的页面
JS: 提供用户的交互的
JS的组成
ECMAScript : 核心部分 ,定义js的语法规范
DOM: document Object Model 文档对象模型 , 主要是用来管理页面的
BOM : Browser Object Model 浏览器对象模型, 前进,后退,页面刷新, 地址栏, 历史记录, 屏幕宽高
JS的语法
变量弱类型: var i = true
区分大小写
语句结束之后的分号可以有,也可以没有
写在script标签内
JS的数据类型
- 基本类型
- string
- number
- boolean
- undefine
- null
- 引用类型
- 对象, 内置对象
- 类型转换
- js内部自动转换
JS的运算符和语句
- 运算符和java一样
- "===" 全等号: 值和类型都必须相等
- "==" 值相等就可以了
- 语句和java 一样
JS的输出
-
alert() 直接弹框
-
document.write() 向页面输出
-
console.log() 向控制台输出
-
innerHTML: 向页面输出
-
获取页面元素: document.getElementById("id的名称");
JS声明变量
var 变量的名称 = 变量的值
JS声明函数
var 函数的名称 = function(){
}
或者
function 函数的名称(){
}
JS的开发步骤
- 确定事件
- 通常事件都会出发一个函数
- 函数里面通常都会去操作页面元素,做一些交互动作
点击按钮跳转
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function f() {
alert("123");
}
</script>
</head>
<body>
<input type="button" value="点我" onclick="f()">
</body>
</html>
点击按钮替换文字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function f() {
// alert("123");
var div = document.getElementById("div1");
// div.innerText = "<font color = red>那里</font>";
div.innerHTML = "<font color = red>那里</font>";
}
</script>
</head>
<body>
<input type="button" value="点我" onclick="f()">
<div id="div1">
这里
</div>
</body>
</html>
// div.innerText = "那里";
innerText是以纯文本的形式打印，不会转义特殊标签字符，结果如下图
