1.js是一门解释性的、基于对象、动态性的、跨平台的、弱声明类型的、单线程的脚本语言。
2.输出一个弹窗
bom的三种输出方式
alert("我是一个弹窗") //输出警告框
confirm("确认?") //确认框
prompt("text") //带文本的确认框
3.在控制台输出内容
console.log("hello world");
console.warn("hello world"); //显示警告框
console.error("hello world"); //显示错误框
document.write("hello world"); //在窗口显示
2.js引入方式、词法结构、运行原理
(1)三种引入方式(页面内任何地方都可以引入)
外部引入——习惯在head里面输入
<script src="**.js"></script>
行内引入——
<div onclick="alert('点击了当前的dom')">点击</div>
页面内引入——习惯在body里面写
<script></script>
习惯的原因:因为代码是自上而下、逐行解析的,优先解析head部分...
(2)词法结构
一定要按照js的语法规则书写代码
分号可加可不加(建议加上)原理:js解释器在逐行解释代码的时候,遇到回车会自动补全分号 例如:alert("hello");alert("hello2")
注:单行输入代码,必须加上分号
注释问题(//单行注释 /*多行注释*/)
(3)js的运行原理
js是单线程的脚本语言 ,代码从上往下逐行解释执行
3.直接量和变量
(1)直接量(字面量)
"hello world" true false 100 undefined null {} []
var a
console.log(a)
变量去保存直接量(字面量)
num123 = "hello world"
console.log(num123) // hello world
num123 = true
console.log(num123) // true
num123 = 100
console.log(num123) // 100
// 无害
var num123 = false
console.log(num123) // false
变量提升(原理:js解释器 var 把声明提升到顶部)
var num123
console.log(num123) // false
经典案例:
console.log(ab)
ab = 123
console.log(ab)
4.标识符(命名规范)
-1、用来对函数和变量进行命名
-2、js代码中某些循环语句中的跳转位置的标记
(1).js支持utf-8 --包含了地球上所有的语言
例如:var 国家 = "中国" console.log(国家)
(2).不能使用系统关键字和保留字,不能超过255个字符
例如:var if = "if" console.log(if)×
var window = "zhan" 不能使用宿主机保留的关键字 console.log(window)
(3).区分大小写
例如:var boy = "张三" var Boy = "李四" console.log(boy)
(4).不能包含特殊字符
例如:var b!@ = "不能特殊字符"
(5).建议:驼峰命名法
(6).建议:见名知意
(7).不能以数字打头
(8).可以使用 $ _ 字母开头
5.数据类型
五种基本数据类型/一种引用数据类型
基本数据类型:
undefined null string Boolean number
引用数据类型
object(细分:function array object)
检测数据类型 typeof 用法:console.log(typeof 变量名)
语法 typeof 变量名
typeof(变量名)
// 基本数据类型
var navigetion
// undefined类型
navigetion = undefined
console.log(navigetion)
console.log(typeof navigetion)
// null类型
navigetion = null
console.log(navigetion)
console.log(typeof navigetion)
// string类型
navigetion = "南京"
console.log(navigetion)
console.log(typeof navigetion)
// Boolean类型
navigetion = true
console.log(navigetion)
console.log(typeof navigetion)
// number类型
navigetion = 123456789
console.log(navigetion)
console.log(typeof navigetion)
// 引用数据类型
navigetion = {}
console.log(typeof navigetion)
navigetion = []
console.log(typeof navigetion)
navigetion = function(){}
console.log(typeof navigetion)
6.四则运算
赋值运算 =
算术运算 + - * / % ()
var res
res = 1 + 1
console.log(res) // 2
res = 1 - 1
console.log(res) // 0
res = 5 * 4
console.log(res) // 20
res = 4 / 2
console.log(res) // 2
// 取模就是取余
res = 5 % 3
console.log(res) // 2
res = 2 * ( 1 + 1 )
console.log(res) // 4
res = (123+45*78)/(34+543) - 9*(324 -34)
res = (6 + 1000%7)%7
console.log(res)
7.dom事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.box {
width: 300px;
height: 300px;
border: 1px solid;
position: absolute;
top: 100px;
left: 200px;
}
</style>
</head>
<body>
<div class="box" id="box"></div>
</body>
<script>
//1.获取dom元素
var box = document.getElementById("box")
console.log(box)
// 绑定一个点击事件
box.onclick = function() {
// 把背景色改成红色
box.style.backgroundColor = "red"
box.style.borderWidth = "10px"
box.style.borderStyle = "dashed"
}
</script>
</html>