1. 简介
JavaScript 是脚本语言
JavaScript 是一种轻量级的编程语言
JavaScript 是可插入 HTML 页面的编程代码
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行
2. js组成
1.ECMAScript(JAVASE) 描述了该语言的语法和基本对象 主要提供一些基础的语法 例如 变量 选择结构 if ....
2.DOM 描述处理网页内容的方法和接口 主要用于来操作节点对象
3.BOM 描述与浏览器进行交互的方法和接口 主要提供了一些用于与浏览器进行交互的接口与方法()
3. 基础语法
1.概念:在程序运行期间 其值会发生改变的量 就是变量
2.java定义语法: 数据类型 变量名= 变量值
3.js定义语法： var 变量名 = 变量值
4.注意点:
A.var是js中关键字 js是在赋值的时候确定其数据类型
B.js中定义变量名的时候 不建议使用关键字
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
var num = "abc";
console.log(num);
</script>
</body>
</html>
3.1 基本数据类型
1.java 基本数据类型 四类八种
2.js 基本数据类型 数值类型 字符串类型 布尔类型 未定义类型
3.js中有一个方法获取其数据类型 typeof()
typeof是一个一元运算符，它返回的结果 始终是一个字符串，对不同的操作数，它返回不同的结果。
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
//数据类型
var num = 1;
console.log(typeof(num));
//字符串类型
var s = "一个字符串";
console.log(typeof(s));
//Boolean类型
var flag = true;
console.log(typeof(flag));
//未定义类型
var v;
console.log(typeof(v));
</script>
</body>
</html>
3.2 引用数据类型
1.java中引用数据类型:对象 枚举 注解 数组 字符串....
2.js中引用数据类型 json [] ==>数组 {} ==>对象
3.定义js的学生对象
{"uid":1001,"uname":"admin","upwd":"123"}
4.定义js中学生数组
[{"uid":1001,"uname":"admin","upwd":"123"},
{"uid":1002,"uname":"a","upwd":"123"}]
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
var per = {"name":"张三","age":18};
//获取张三的姓名和年龄
console.log(per.name);
console.log(per.age);
var pers = [{"name":"李四","age":19},{"name":"王五","age":17},{"name":"赵六","age":20}];
//获取赵六的姓名和年龄
console.log(pers[2].name);
console.log(pers[2].age);
</script>
</body>
</html>
3.3 运算符
3.3.1 算术运算符
加减乘除取余...
3.3.2 逻辑运算符
与或非...
3.3.3 关系运算符
大于小于等于不等于...
==等于
===绝对等于，即值和类型都相等
3.3.4 赋值运算符
=等于+/-/*///%=加减乘除取余等于...
3.3.5 三元运算符
1.语法：表达式1 ? 表达式2 : 表达式3
2.执行流程
A.计算表达式1 要么是true 要么是false
B.如果返回值是true 则执行表达式2
C.如果返回值是false 则执行表达式3
3.4 选择结构
3.4.1 多分if选择结构
if(表达式1) {
执行操作1
}else if(表达式2) {
执行操作2
}else if(表达式3) {
执行操作3 .......
}else {
执行操作n
}
3.4.2 switch
switch(表达式){
case 常量1:
执行操作1
break;
case 常量2:
执行操作2
break;
case 常量3:
执行操作3
break ....
default:
执行操作n
break
}
3.5 循环结构
1.for循环
for(初始化语句;循环条件判断;循环变量改变) {
循环操作
}
2.while循环
初始化语句
while(循环条件判断){
循环操作
循环变量改变
}
3.do while循环
初始化语句
do{
循环操作
循环变量改变
}while(循环条件判断);
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
var sum = 0;
for(var i = 0;i <= 100; i++) {
sum+=i;
}
console.log(sum);
var i = 0;
sum = 0;
while(i <= 100) {
sum+=i;
i++;
}
console.log(sum);
i = 0;
sum = 0;
do{
sum+=i;
i++;
}while(i <= 100);
console.log(sum);
var arrays = ["一" , "二", "三", "四"];
for(var i in arrays) {
console.log(arrays[i]);
}
</script>
</body>
</html>
3.6 函数
1.语法:
function 方法名称(参数列表){
方法体;
return 返回值;
}
2.定义一个方法求两个数之和
3.注意点:
A.function js中表示定义方法的关键字
B.在js中方法的形参不需要给数据类型
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
//定义两数相加的方法showInfo
function showInfo(num1, num2) {
var sum = num1 + num2;
return sum;
}
//调用方法
console.log(showInfo(10, 20));
</script>
</body>
</html>
3.7 js中提供的三种弹窗
alert("提示信息") : 警告框
confifirm("提示新") : 确认框(如果为true表示确定,如果为false表示取消)
prompt("提示信息","默认值"): 带输入框的弹框
3.8 js事件
A.onblur 失去焦点
B.onfocus 获取焦点
C.onload 页面加载完成
D.onchange() 条目发生改变
E.onclick() 点击事件
F.ondbclick() 双击事件
G.onmouseout 鼠标移出
H.onmouseorver 鼠标移入
K.onsubmit 提交事件
3.9 DOM
3.9.1 简介
1.文档对象模型，是w3c组织推荐的处理可拓展标记语言（HTML或者xml）的标准-文档：一个页面就是一个 文档，DOM中 使用document表示
2.元素：页面中所有的标签都是元素，DOM中使用element表示
3.节点：网页中所有的内容都是节点（标签、属性、文本、注释等），DOM中使用node表示
4.DOM把以上内容都看做是对象
5.在网页中加载html页面的时候 会形成一个DOM树来进行加载
3.9.2 获取节点对象
| 方法名称 | 方法描述 |
|---|---|
| document.getElementById("") | 根据id获取节点对象(单个) |
| document.getElementsByClassName("") | 根据class获取节点对象 |
| document.getElementsByTagName("") | 根据标签名称获取节点对象 |
| document.getElementsByName() | 根据name属性值获取节点对象 |
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" onclick="showInfo1()" value="点击运行方法1"/>
<input type="button" onclick="showInfo2()" value="点击运行方法2"/>
<input type="button" onclick="showInfo3()" value="点击运行方法3"/>
<input type="button" onclick="showInfo4()" value="点击运行方法4"/>
<br>
<input type="text" id="tv_uname"/>
<p>
<input type="radio" name="hobby" value="动作1">动作1
<input type="radio" name="hobby" value="动作2">动作2
<input type="radio" name="hobby" value="动作3">动作3
<input type="radio" name="hobby" value="动作4">动作4
</p>
<p>
<input type="checkbox" name="sports" value="运动1" class="tv_class"/>运动1
<input type="checkbox" name="sports" value="运动2" class="tv_class"/>运动2
<input type="checkbox" name="sports" value="运动3" class="tv_class"/>运动3
</p>
<script>
function showInfo1() {
var tv_u = document.getElementById("tv_uname");
console.log(tv_u.value);
}
function showInfo2() {
var arrays = document.getElementsByName("hobby");
for(var i = 0; i<arrays.length; i++) {
console.log(arrays[i].value);
}
}
function showInfo3() {
var arrays = document.getElementsByClassName("tv_class");
for(var i = 0; i < arrays.length; i++) {
console.log(arrays[i].value);
}
}
function showInfo4() {
var arrays = document.getElementsByTagName("input");
for(var i = 0; i < arrays.length; i++) {
console.log(arrays[i].value);
}
}
</script>
</body>
</html>