一、特点：
JavaScript和java并没有直接关系，就像雷锋与雷峰塔似的没有联系；
js是面向对象的，是运行在浏览器端的编程语言；
主要解决的是前端与用户的交互问题，包括交互数据。
二、js引入方式
1.行内式：
<开始标签 on+事件类型=“js代码”></结束标签>
行内引入方式必须结合事件来使用
<body>
<input type="button" onclick="alert('行内引入')" value="button" name="button">
<button onclick="alert(123)">点击我</button>
</body>
onclick:点击鼠标触发一个事件
alert(""):弹出提示框 括号内式字符串格式
2.嵌入式：
在head或body中，定义script标签，然后在script标签里面写js代码
<script type="text/javascript">
alert('滚出来见我')
</script>
3.外链式：
定义外部js文件(.js结尾的文件)
<script type="text/javascript" src="js文件路径"></script>
注:
script标签一般定义在head或body中
Script标签要单独使用，要么引入外部js，要么定义内部js，不要混搭使用
外部的JS文件，它具有维护性高、可缓存(加载一次，无需加载)、方便未来扩展、复用性高等特点
二、js语句和注释：
js语句以英文分号；结尾（不加也可以，不会报错）
单行注释：//
多行注释：/*注释*/
三、js变量的定义：
js中定义变量以关键字var开头
命名规范：
-
不能以数字开头；
-
可以以字母、下划线、$、#开头；
-
驼峰命名
浏览器控制台输出：
console.log(变量名）数据类型：
数字类型：number
字符串类型：string
布尔类型：boolean
空值null是一个object
未定义undefined
<script type="text/javascript"> // 数字类型number var num = 10; // alert(num); // console.log(num); // alert(typeof(num)); // 字符串类型string var str = 'hello world'; // alert(str); // alert(typeof(str)); // 布尔类型boolean var bool = true; // alert(typeof(bool)) var a = null; // alert(typeof(a)) var b = undefined; // alert(typeof(b)) var n = 10,m = 20; alert(n) console.log(m) console.log(n) </script>
四、复合数据类型：
key：value形式
var result = {
name:'张三'；
age:18;
a:false;
}
alert(result);
console.log(result);
五、获取元素：
获取元素对象需要使用到标签对象：document
window.onload它是在文档加载完成后才执行里面的代码
<script type="text/javascript">
window.onload=function () {
var div_obj = document.getElementById('one');
console.log(div_obj);
}
</script>
六、读写元素数据：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>读写元素数据</title>
<style type="text/css">
.box{
height: 200px;
200px;
background-color:red ;
}
.box2{
height: 100px;
100px;
background-color:deeppink ;
}
</style>
<script type="text/javascript">
window.onload=function () {
//获取标签对象
var oDiv = document.getElementById("one");
//对象读取id
var odiv_id = oDiv.id;
// alert(odiv_id);
//读取类名
var odiv_clsName = oDiv.className;
// alert(odiv_clsName);
//读取标签颜色 加上 style
var odiv_color = oDiv.style.color;
// alert(odiv_color);
//读取字体大小
var odiv_size = oDiv.style.fontSize;
// alert(odiv_size);
//写入数据
// oDiv.style.color="green";
//更改类名
// oDiv.className="app";
// var odiv_clsName = oDiv.className;
// alert(odiv_clsName);
oDiv.className="box2";
}
</script>
</head>
<body>
<div id="one" class="box">读写元素数据</div>
</body>
</html>
七、修改标签包裹的内容：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>修改标签包裹的内容</title>
<script type="text/javascript">
window.onload=function () {
//1.获取标签对象
var a_obj = document.getElementById("one");
//读取标签的内容 innerHTML
var sContent = a_obj.innerHTML;
// alert(sContent);
//修改标签内容
a_obj.innerHTML="我是修改后的内容";
}
</script>
</head>
<body>
<a id="one" href="#">百度链接</a>
八、函数定义：
关键字：function 函数名
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>函数定义</title>
<script type="text/javascript">
window.onload=function () {
// 定义 函数 关键字 function 函数名
//定义无参数函数
// function fun_Name () {
//
// alert("定义函数");
//
// }
//
// //调用函数 函数名();
// fun_Name();
//定义有参数函数
// function fun_Alert(a,b) {
//
// alert(a);
// alert(b);
//
// }
//
// fun_Alert(10,"helloworld");
//定义有返回值的函数
function ret_function (a,b) {
result = a+b;
return result;
}
num_ret = ret_function(10,20);
alert(num_ret);
}
</script>
</head>
<body>
</body>
</html>
九、匿名函数：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>匿名函数</title>
<style type="text/css">
.box{
height: 200px;
200px;
background-color: red;
border-radius:50% ;
}
</style>
<script type="text/javascript">
window.onload=function () {
//匿名函数 没有函数名
var btn = document.getElementById("btn");
//定义一个点击事件
// function fun_Btn () {
//
// alert("定义匿名函数");
// }
//给button 添加点击事件
// btn.onclick = fun_Btn;
btn.onclick=function () {
alert("定义匿名函数");
}
}
</script>
</head>
<body>
<button id="btn">点击一下</button>
<div class="box" id="">
</div>
</body>
</html>
十、js条件分支：
if（表达式）{
代码块1；
}else if（表达式）{
代码块2；
}
...
else{
代码块n;
}
&&与比较
|| 或比较