-javaScript 简介
javaScript （简称"js"）是一种具有函数优先的轻量级，解释型或即时编译型的高级编程语言。虽然它是作为开发 Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，javaScript 基于原型编程，多范式的动态脚本语言，并且支持面向对象，命令式和声明式（如函数式编程）风格。
js 它与其它语言类型 也可以基本数据类型 还有对象 还有一个独特的框架（veu.js).
- js 的作用
js 可以使用事件来操作html的节点以及属性 用于做前端的表单验证 可以做一些动画效果 增强体验- js 的组成部分
- ECMAScript 核心语法 变量 对象 表达式 等 DOM 文档对象 操作
- 节点以及属性 BOM 浏览器对象
- 主要用于来操作了浏览器对象
- js 的引入方式
1. 行内引入：直接在标签里进行嵌套
<input type="button" value="提交" onclick="javaScript:alert('班长')"/>
onclick 表示点击事件 javaScript 是可以去掉
2. 内部引入
<script> alert("翠翠") </script> //js代码一定要写在 <script></script> 里
3. 外部引入
- ECMAScript 之变量
- 定义变量的关键字 var ==>可以来修饰任意的类型 ==>js是一个弱脚本语言
- var num =1.3 js 中的类型是根据具体的值来确定的
- 语法 : var 变量名; 或者 var 变量名 =10
– js常见的数据类型
- 数据类型 = 基本数据类型+ 引用数据类型
- 基本数据类型：
undefined 未定义 也就是定义了一个变量没有给其赋值
null 是 undefined 派生出的类型 alert(undefined==null); 返回是true
Number 类型 也就是数值类型 包含小数 与整数
Boolean 真假 true flase
String 字符类型 - 引用数据类型 一般也被称为类 class 基本上都是object的子类
var num = new Object() - 一个方法来测试其类型 typeof(变量名)
-运算符
- js中运算符与Java中是一样
- 算术运算符 + - * / %
- 赋值运算符 = += -= *= /+ ++ –
注意点 在使用 赋值运算符的时候 一定要给其变量先进行赋值
++i 先进行运算 再赋值
i++ 先赋值 再进行运算
== 只比较值 ===比较值 也比较类型 - 逻辑运算符 && 并且 || 或者 ！非
- 比较运算符 > < >= <= !=
- 分支结构
- 单分支
if(条件){
操作
}
var score = 80;
if(score >= 80){
alert("给班长发一个红包")
}
- if else
if(条件){
满足条件 执行这个操作
}else{
不满足条件 执行这个操作
}
//这里返回的是string 类型
var num = prompt("请输入值",1);
//string类型 转 数值类型
if(parseInt(num) > 80){
alert("给班长发一个红包");
}else{
alert("给班长的同桌发一个红包");
}
-
多分支if 选择结构
if(条件){}else if(条件){
}else{
}
var num = prompt("请输入值",1);
//string类型 转 数值类型
if(parseInt(num) >= 90){
alert("小伙比较优秀");
}else if(parseInt(num) >= 60){
alert("小伙你还差一点");
}else{
alert("小伙你啥也不是");
}
- swicth 结构
var num = 1;
switch(num){
case 1:
alert("今天是星期一");
break;
case 2:
alert("今天是星期二");
break;
case 3:
alert("今天是星期三");
break;
default:
alert("今天是星期八");
break;
- 数组
- 语法：
静态 var 数组的名称 = [数值1,数值2，数值3]
动态 var 数组的名称 = new Array(数组的长度) 数组中的默认值都是 undefined
定义一个空的数组的语法 var 数组的名称 = new Array()
var num1 = [1,2,3];
var num2 = new Array(5);
var num3 = new Array();
- 数组中可以定义多组数据类型
var num1 = [1,2,3,true,"4444"];
- 数组的遍历
基本的for循环
语法 for (var i =0; i<数组的长度;i++){
}
var num = [1,2,3,true,"aaa","春春"]; var nn = new Array(5); for(var i=0;i<num.length;i++){ console.log(num[i]); } console.log("******************") for(var j=0;j<nn.length;j++){ console.log(nn[j]); }
增强for循环
for(var i in 数组){
}
var num = [1,2,3];
for(var i in num){
console.log(num[i]);
}
- js 的函数
java 中的方法的语法:
访问修饰符 返回值类 方法名 (参数列表) { 方法体 } public void add(int num,int num2){}; js 中方法: function 方法名称 (参数列表){ 方法体 }
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> //声明一个方法无参 function add(){ console.log("123"); } //调用方法 add(); //123 //有参数方法,直接写参数的名称不需要数据类型 function add1(num1,num2){ console.log(num1+num2); } add1(1,3); //4 //带返回值 function add2(num1,num2){ return num1+num2; } //有返回值需要有变量接收 var flag=add2(1,"ss") console.log(flag) //1ss //方法重载 function shaowInfo(num1,num2){ return num1+num2; } function shaowInfo(num1,num2,num3){ return num1+num2+num3; } console.log(shaowInfo(1,2)); //NaN, 因为js里面没有方法重载,调用的是最后一个方法， num3没有传参数默认为NaN, 任何类型的数与NaN相加结果都是NaN console.log(shaowInfo(1,2,3)); //6 </script> </head> <body> </body> </html>
注意：1. js 中没有方法重载 如果方法名相同 调用的是最后执行的那个方法
2. 任何类型与NaN 进行相加 都返回的是 NaN
- js 中的事件是什么
-
通过操作html 标签 来执行某一段 js 的逻辑代码（调用一个方法）来实现更好的效果
-
常规事件
onabort 图像加载被中断 onblur 元素失去焦点 onchange 用户改变域的内容 onclick 鼠标点击某个对象 ondblclick 鼠标双击某个对象 onerror 当加载文档或图像时发生某个错误 onfocus 元素获得焦点 onkeydown 某个键盘的键被按下 onkeypress 某个键盘的键被按下或按住 onkeyup 某个键盘的键被松开 onload 某个页面或图像被完成加载 onmousedown 某个鼠标按键被按下 onmousemove 鼠标被移动 onmouseout 鼠标从某元素上移开 onmouseover 鼠标被移到某元素之上 onmouseup 某个鼠标按键被松开 onreset 重置按钮被点击 onresize 窗口或框架被调整尺寸 onselect 文本被选定 onsubmit 提交按钮被点击 onunload 用户退出页面 -
事件的两种调用方式
第一种：直接在标签里调用
<input type="button" value="提交" onclick="showInfo()"/> <script> function showInfo(){ alert("你好"); } </script>
第二种方式：
5. 根据 id 来获取当前的这个标签
var tv_btn = document.getElementById(“tv_button”);
6. 给标签 加上相应的事件
tv_btn.onclick = function(){
alert(“123456”);
}
onclick 表示 事件的名称
function(){} 表示出发这个事件执行的操作
<!--第二种调用方式通过id获取标签-->
<input type="button" value="提交" id="btn"/>
<script>
var btn = document.getElementById("btn");
btn.onclick = function(){
alert("123456");
}
</script>**-具体的事件介绍 **
- 页面加载完成所触发的事件
<script> onload=function(){ }
- onfocus 当控件获取焦点所触发的函数
<input type="text" onfocus="showInfo()"/>
- onblur 当控件失去焦点所触发的函数
<input type="text" onfocus="showInfo()" onblur="showInfo1()"/>
- onmouseout 鼠标移出所触发的函数
- onmouseover 鼠标移入所触发的函数
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <img src="img/duola2的副本.jpg" onmouseout="showinfo()" onmouseover="clearinfo()"/> <script> function showinfo(){ alert("333"); } function clearinfo(){ alert("222"); } </script> </body> </html>
注意点：所有 js 的事件都有前缀on
- onchange 当条目发生改变所触发的函数
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <select onchange="showMsg()"> <option>admin1</option> <option>admin2</option> <option>admin3</option> </select> <script> function showMsg(){ console.log("123456"); } </script> </body> </html>
- DOM模型
DOM（DOM-Document Object Model）是W3C国际组织的一套Web标准。它定义了访问 HTML 文档对象的一套属性，方法和事件。主要是用于来操作节点对象，当浏览器加载页面的时候 浏览器会创建这个 dom 对象，这个 dom 对象可以看成是一个dom树。
-查找节点的方法
- document.getElementById() 通过id来获取节点 ==>单个标签
- document.getElementsByTagName() 通过标签的名字来获取 ==>返回数组
- document.getElementsByName()根据name值来获取 ==>返回数组
- document.getElementsByClassName() 通过class来获取节点 ==>返回数组
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="text" value="111" id="tv_one"/> <input type="text" value="222"/> <input type="checkbox" value="打篮球" name="sports"/> <input type="checkbox" value="踢足球" name="sports"/> <input type="checkbox" value="羽毛球" name="sports"/> <input type="text" value="333" class="tv_class"/> <input type="text" value="444" class="tv_class"/> <input type="button" onclick="showMessage()" value="提交"/> <script> //通过id获取节点 function showMessage(){ var tv_one = document.getElementById("tv_one") alert(tv_one.value) } //通过name值获取节点 var num1=document.getElementsByName("sports")//拿到所有的节点 //name返回的是集合 for(var i=0;i<num1.length;i++) alert(num1[i].value); //根据class来获取节点 var num2 = document.getElementsByClassName("tv_class") for(var i=0;i<num2.length;i++) alert(num2[i].value); //通过标签名获取节点 var num3 = document.getElementsByTagName("input") for(var i=0;i<num3.length;i++) alert(num3[i].value); </script> </body> </html>
-表单验证
需求：
- 用户名 密码 确认密码 不能为null 如果为空 给用户相应的提示
- 输入的提交任意一个不满足 不能提交表单
- 两次密码必须一样
分析： - 获取input里的所有value值 一个一个进行判断
- 如果不满足条件 return flase
- 获取两次密码的值进行比较
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form action="#" method="get" onsubmit="return getInformation()"> <!--只能通过 id获取 value 值--> <p>用户名：<input type="text" id ="name"/></p> <p>密码：<input type="password" id ="pw1"/></p> <p>再次确认密码：<input type="password" id ="pw2"/></p> <p><input type="submit" value="提交"/></p> </form> <script> function getInformation(){ var name = document.getElementById("name").value; var pw1 = document.getElementById("pw1").value; var pw2 = document.getElementById("pw2").value; if(name==null||name==""){ alert("名字不能为空") return false; } if(pw1==null||pw1==""){ alert("密码不能为空") return false; } if(pw2==null||pw2==""){ alert("确认密码不能为空") return false; } if(pw1!=pw2){ alert("两次的密码必须一样") return false; } return true; } </script> </body> </html>
- 全选 全不选 反选 案例
需求 :
- 获取到所有的标签 根据class来获取标签
- 给所有的标签设置一个属性 checked=“true” 全选
- 给所有的标签设置一个属性 checked=“flase” 全不选
- 给所有的标签设置一个 checked属性值 设置成相反的结果
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="button" onclick="selectAll()" value="全选" /> <input type="button" onclick="selectNotAll()" value="全不选"/> <input type="button" onclick="selectOrAll()" value="反选"/> <p><input type="checkbox" value="打篮球" name="sports"/>打篮球</p> <p><input type="checkbox" value="踢足球" name="sports"/>踢足球</p> <p><input type="checkbox" value="羽毛球" name="sports"/>羽毛球</p> <p><input type="checkbox" value="乒乓球" name="sports"/>乒乓球</p> <script> function selectAll(){ var nums=document.getElementsByName("sports"); //循环获取每一个角标将每个角标上的值.属性checked=true 全选 for(var i=0;i<nums.length;i++){ nums[i].checked =true; } } function selectNotAll(){ var nums1=document.getElementsByName("sports"); //循环获取每一个角标将每个角标上的值.属性checked=false 全不选 for(var i=0;i<nums1.length;i++){ nums1[i].checked =false; } } function selectOrAll(){ var nums2 = document.getElementsByName("sports"); //取相反的值 for(var i=0;i<nums2.length;i++){ nums2[i].checked=!nums2[i].checked //是下面代码的简写 // if(nums2[i].checked==true){ // nums2[i].checked=false; // }else{ // nums2[i].checked=true; // } } } </script> </body> </html>
- 动态获取值以及改变值
- 标签.innerHTML ==>获取是标签中间的内容
- 标签.innerHTML="" 替换标签中间的内容 ==>如果中间有嵌套标签 不能够识别标签 直接 显示标签
- 标签. innerText ==>获取标签中纯文本内容
- 标签. innerText ="" 替换标签中间的内容 不能够识别标签
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> span{ color: blue; font-size: 12px; } </style> </head> <body> <p>用户名：<input type="text" id="ddd1" onfocus="clearM()" onblur="getM()"/> <span id="ddd2"></span></p> <script> function getM(){ var ddd1=document.getElementById("ddd1").value; var ddd2=document.getElementById("ddd2"); if(ddd1==null||ddd1==""){ ddd2.innerHTML="请输入用户名"; } } function clearM(){ var ddd1=document.getElementById("ddd1").value; var ddd2=document.getElementById("ddd2"); if(ddd1==null||ddd1==""){ ddd2.innerHTML=" "; } } </script> </body> </html>
- js修改样式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div{ width: 200px; height: 200px; background-color: aqua; } </style> </head> <body> <div id="div_01"> 111 </div> <input type="button" onclick="showInfoo()" value="确定"/> <!--需求：div的背景颜色改为蓝色 1.获取当前的div节点,根据id获取 2.修改样式 --> <script> function showInfoo(){ var div_01= document.getElementById("div_01"); div_01.style.backgroundColor="blue"; } </script> </body> </html>