JavaScript笔记

JavaScript基础语法

JavaScript（客户端的脚本语言）

JavaScript可以实现表单验证，能减少服务器的压力，能制作页面特效，能动态的改变页面的内容
JavaScript是一种基于对象和事件驱动的脚本语言
a) 特点
i. JavaScript是一种交互语言，是客户端的脚本语言，同时也是一中解释性语言（可以通过浏览器解析出来，不需要别的编译器去解析）
ii. JavaScript可以一边执行一边解释（即可以通过浏览器直接解析、执行）
JavaScript的组成
a) ECMAScript
i. ECMAScript是一种语法标准（定义和约束了JavaScript中的一些核心语法）
ii. 变量，语法，数据类型，运算符，逻辑控制语句，关键字，保留字，对象都是ECMAScript约定的，都属于ECMAScript
b) BOM（Browser Object Model ）（浏览器对象模型）
i. 提供了独立于内容与浏览器窗口进行交互的对象
ii. JavaScript操作浏览器，与浏览器进行交互的一些方法或接口，（即操作浏览器的内容BOM）
c) DOM（Document Object Model）文档对象模型
i. 对HTML文档进行操作就是DOM操作
ii. 用来访问和操作HTML文档
JavaScript语法结构
a) 内嵌式使用

b) 外联式使用

Src 为引入；JavaScript.js为javascript文件名
c) 在标签中的使用（使用少）

i. javascript:alert为弹出一个文本框
ii. onclick为单击事件
5. Document .write使用（等同于java中的输出语句syso）
a) document.write(“hello js!”);输出hello js!
b) 其中write表示写，它是一个方法，
c) Write（）括号中可以写HTML的标签，输出的为对应标签作用生效后的内容，即document.write("

hello javascript

")
6. 修改javascript编码格式；
a) 方法1；
i. file——setting——editor——fileEncodings——projestEncodings中选择UTF—8
b) 方法2
i.
7. Javascript的使用方式

8. 在javascript中交互、样式、内容进行分开书写，方便查看
变量（var变量关键字）

先声明再赋值
同时声明赋值（赋值与java中一样）
不声明赋值（java中必须声明）不提倡不声明就赋值
数据类型
undefined类型；未定义类型
a) 未定义变量的类型，声明变量后该变量没有赋值或该变量的值为undefined时，该变量类型就为undefined类型
b) 对象的属性没有赋值，该对象的属性也是undefined类型
c) 函数没有返回值时，该函数的默认返回值也是undefined
null类型；空值，与undefined值相等
number类型；数值型；所有的数字都是number类型的（java中有浮点与整形的区别）
boolean类型；返回值为true和false（与java中的Boolean类型一样）
string类型；被单引号或双引号括住的文本（与java中一样，当java中string类型不能用单引号）
object类型（没与讲解，具体看下回笔记）对象，数组和null
typeof操作符；通过typeof操作符来检查变量的数据类型
a) 语法
var namber=89;
document.write(“我是这个类型的数据”+typeof namber);
注意；在javascript中，输出语句是document.write( ) 并且输出段之间也与java中一样，使用加号（+）进行连接，在打印namber=null时，他的类型时object类型，就只有这一种情况下是object类型，其余情况null为undefined类型
注释
单行注释
a) 单行注释用 / /表示，快捷键是Ctrl+斜杠（取消一样）
b) 多行注释用 / * 文字内容 * /表示，快捷键是ctrl+shift+斜杠（取消一样）
运算符
算术运算符+、-、*、/、%（求余）、++（自加）、–（自减）
复合运算符；+=、-=、/=、=（在自身的基础上加上（减、除、乘）=后面的那个值便为+=（-=、/=、=）前的值）
复合运算符；+=、-=、/=、=（在自身的基础上加上（减、除、乘）=后面的那个值便为+=（-=、/=、=）前的值）
关系运算符(数值间的比较，返回值为布尔值即（true或false）)；==（等于）、！=（不等于）>=、<=、>、<（===三个等于号在一起时为比较类型）
逻辑运算符（返回值为布尔值即（true或false））；&&（两数一样才为一个值不然为另一个数）、||（两个数只要有一个数为规定值结果就为那个值）、！（结果为后一个数不为前一个数）
查找
Indexof( “p” )查找字符串中存在的字符的下标（返回类型为数字，有为对应的下标，无为-1）
charAt( 6 )输出下标为6的字符
substring( 1,5 )输出1到5之间的字符
split（“—”）将字符串分隔为字符串数组（—可以改变）
语法
a) document.write(he.charAt(2)+"
") ;
b) he为字符串的名称，通过 . 可以调用方法
数组
var 数组名=new Array (size(数组的长度))或者var 数组名=new Array （数组的元素）；
数组赋值与java中一样
语法var is=new Array(“42”,“fsf”,“dfs”);
Join（“—”）将数组打印为字符串(通过数组名 . 调用)
Sort（）对数组排序(通过数组名 . 调用与java中的排序用法一样，但目前只知道只能排序个位数)
语法i.sort(); alert(i);
Length数组的长度(通过数组名 . 调用)
Push（“添加的字符串”）给数组添加内容(通过数组名 . 调用)
遍历数组
//for输出的是下标，要输出数组的元素必须加入数组名，通过输出相应下标的数，输出数组
for(var k in i){
document.write(i[k]+",");
/* break;/!与java中一样!//
/ continue;与Java中一样*/
}
提示信息prompt();
Javascript调试
利用alert（）与f12结合，在对应的位置打点，进行调试

Bom属性

浏览器对象
a) Window；（窗口对象）通过window . open（）打卡新的页面或者控制当前窗口
i. Close（）关闭浏览器窗口
ii. Open（）打开一个新的浏览器窗口
iii.
b) Screen；屏幕对象。获取屏幕相关信息
c) Navigator；浏览器对象，通过这个对象可以判断用户所使用的浏览器
d) History；历史对象，通过这个对象可以前进或者后退一个页面
i. History .Back（）前一页
ii. History .Forward（）后一页
iii. History .Go（数字），数字为-1是前一页，1是后一页
e) Location；地址对象；通过该对象获取当前URL的信息
i.
f) Javascript计时事件；在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行
g) Localstorage sessionstorage，存储对象，可以用来存储数据，和cookie相似，区别是它是为了更大容量存储设计的，在使用上也更加方便
Javascript弹窗
a) 警告框window . alert ( )用于确保用户可以得到某些信息
b) Window . confirm( )用于验证是否接受用户操作（可以有返回值，返回的是布尔类型，确定为turn，取消为flash）
c) Window . prompt()用于提示用户在进入页面前输入某个值，获得的是字符串类型的，通过parseInt进行可以转换为namber类型
i. 书写方法
var nam=prompt(“请输入第一个数”);
var nam2=prompt(“请输入第二个数”);
var nam3=prompt(“请输入运算符”);
nam=parseInt(nam);
nam2=parseInt(nam2);
Document . getElementById( “ id名 ”) . innerHTML=变量名
书写函数；
<input type=“button” value=“点我” //新建函数
onclick=“myFunctions()”/>
a) //新建函数方法（写在javascript中）function为函数构造关键字，不能改
function myFunction(){//警告框
window.alert(“你好我是一个警告框”)
}
定义id，通过id给id赋值，

（确认框） //新建变量，通过变量确定输出的内容 var oness; //新建函数方法 function myFunctions(){ var one =window.confirm("按下按钮") //利用id进行输出 if(one==true){ oness="你按下的是【确定】按钮" }else { oness="你按下【取消】按钮" } document.getElementById('ones').innerHTML=oness; } 6. Window.location对象（用于获得当前页面的地址（URL），并把浏览器重定向到新的页面） a) Location . hrdf ( )获得当前页面的URL b) Location. aahtname（）获得当前文件的路径名 c) Location. assign(（文档路径或第三方路径）)打开新的文档 7. Javascript计时事件 a) setInterval ( )间隔指定的毫秒数不停地执行指定的代码 b) clearInterval( )用于停止setInterval（）方法执行的函数代码（通常setInterval ( )与clearInterval( )用在一块，clearInterval( )的括号中写接受setInterval ( )的变量名） c) setTimeout( )暂停指定的毫秒数后执行指定的代码 d) clearTimeout( )用于停止执行setTimeout( )方法的函数代码 8. 函数构造写法 9. myIn.onclick=function(){ alert("1") } function myFunctions(){//警告框 window.alert("你好！我是一个警告框") }

Dom属性与方法

查找HTML元素
a) document.getElementById ( ) 通过id属性获取对象（括号中写id名）
i. 书写语法
var myIn=document.getElementById(“in”)
//通过ID获取
myIn.onclick=function(){
alert(“1”)
}
b) document.getElementsByTagName ( )通过标签名获取对象（必须加下标）
i. 书写语法
Var myIn=document.getElementsByTagName(“button”)[0] （标签下标）;
//通过标签名获取
myIn[0].onclick=function(){
alert(“1”)
}
ii. 当获取的标签名有多个时，在标签名后面叫下标（或在变量名后名加下标）通过下标来进行准确的查找对应的标签
c) document.getElementsByClassName ( )通过class属性获取对象
i. varmyIn=document.getElementsByClassName(“ins”)[0];//通过class获取元素
myIn.onclick=function(){
alert(“1”)
}
ii. 当获取的class名有多个时，在class名后面叫下标（或在变量名后名加下标）通过下标来进行准确的查找对应的class
使用document.getElementsByTagName ( )和document.getElementsByClassName ( )时必须加上下标，否则找不到对应的标签或class
改变HTML
a) document . write( )（改变HTML的输出流）
i. 可以通过document . write（“ ”）进行输出
ii. 语法
document.write(“你好”)
b) 对象 . inner HTML=新的HTML（改变HTML的内容）
i. 书写语法document.getElementById(“in”).innerHTML=“新文本”
c) 对象 . attribute=新的属性值（改变HTML的属性）
i. attribute为对应的属性名，可以改变（如果要改变图片路径，那么就把attribute改为src）
改变css样式
a) 对象 . style . property=新样式（通过id属性获取对象，property为对应的样式，可以改变）
b) 书写语法
document.getElementsByTagName(“p”)[0].style.backgroundColor=“red”;
i. 当对fontSize等样式进行改变时要使用驼峰命名法（样式是两个两个以上时都要使用使用）

javascript函数

Parse Int(“字符串”)（首字母为数字才能转为namber类型）
parseFloat( “ ” )（有小数的）
isNaN( ) (//判断变量是不是数字)//不是数字，返回为true，反之为false
自定义函数
a) Function study(){
Document.write( “ ” )
}
具体代码
var ins=“123fdsf”;
var nam=print(ins);//字符串数组字转换为namber的数字
//从字符串的首位置开始是数字的可以转
parseFloat();//有小数的
//判断变量是不是数字
var iss=isNaN(ins);//不是数字，返回为true，反之为false
alert(nam);
//有参函数与java中的方法使用一样
function study(count){
for(var int=1;int<=count;int ++){
document.write(“好好学习”);
return “4234”;
}
a)

代码样式

/* document.write(“javascript
”);//在当前页面上打印内容 documetn.write（）等同于java中的system.out.printIn()语句
document.write(" hello javascript！")/
var he=“string-in-our”;
/字符串查找/
/ document.write(he.charAt(2)+"
") ;
document.write(he.indexOf(“o”)+"
");
document.write(he.substring(2,7)+"
");
document.write(he.split("-")+"
")/
/数组/
/ var is=new Array(“42”,“fsf”,“dfs”);/
//输出数组的长度
/ document.write(is.length+"
");/
//输出数组的内容，将他变为字符串显示
/ document.write(is.join("-")+"
");/
//给数组增加一个字符串，并返回一个长度
/ var sis=is.push(“fs”+"
");

  document.write(sis+"<br/>");*/
 //对数组进行排序
 var i=new Array(9,2,5,4,1);
/* i.sort();
  alert(i);*/
 //for输出的是下标，要输出数组的元素必须加入数组名，通过输出相应下标的数，输出数组
  for(var k in i){
      document.write(i[k]+",");
     /* break;/!*与java中一样*!/*/
     /* continue;与Java中一样*/

  }
  var stngs=new Array("fds","fds","dsds","Dsgg","gggg");
 var count=0;
  for(var h in stngs ){
      if (stngs [h].indexOf("d")!=-1||stngs[h].indexOf("D")!=-1){
          count++;
      }
      document.write(stngs[h]+"<br/>");
  }
  document.write(count);

//var myIn=document.getElementById(“in”)//通过ID获取
//var myIn=document.getElementsByTagName(“button”)[0] ;//通过标签名获取返回值是数组
var myIn =document.getElementsByClassName(“ins”)[0];//通过class获取元素
myIn.onclick=function(){
alert(“1”)
};
document.write(“你好”);
document.getElementById(“in”).innerHTML=“新文本”;
document.getElementsByTagName(“p”)[0].style.backgroundColor=“red”;
var ins=“123fdsf”;
var nam=print(ins);//字符串数组字转换为namber的数字
//从字符串的首位置开始是数字的可以转
parseFloat();//有小数的
//判断变量是不是数字
var iss=isNaN(ins);//不是数字，返回为true，反之为false
alert(nam);
//有参函数与java中的方法使用一样
function study(count){
for(var int=1;int<=count;int ++){
document.write(“好好学习”);
}
return “4234”;
}
function qian(){
history.forward();
history.go(-1);
history.go(0);//刷新页面
}
function tiao(){
location.href=“h1.html”;
}
function hou(){
history.back();//跳转到下一个页面
}
//动态时钟
var span=document.getElementById(“time”);//通过id属性访问标签
setInterval(“getTime()”,1000);
function getTime(){
var date=new Date();
var yea=date.getFullYear();//获取当前年份
var month=date.getMonth()+1;//获取当前月份月份是从0开始计算的
var day=date.getDate();//获取当前日期
var hour=date.getHours();//获取当前时
var minutes=date.getMinutes();//获取当前分
var sec=date.getSeconds();//获取当前秒
//拼接时间
var str=yea+"-"+month+"-"+day+"-"+hour+":"+minutes+":"+sec;
//对span进行重新赋值
span.innerHTML=str;
}
var li1=document.getElementById(“span”);
var li2=li1.previousElementSibling;//获取到同级的前一个元素
var i3=li2.nextElementSibling;//获取到同级的下一个元素
var ul=document.getElementById(“book”);
var lis=ul.lastElementChild;//最后一个子元素
var liss=ul.firstElementChild;//第一个子元素
var fs =ul.childNodes;//所有的子元素,下标从1开始
alert(fs[1].innerHTML);
var fa=lis.parentNode;//直接父元素
alert(fa.getAttribute(“id”));//获取属性值
function add(){
//创建标签对象
var li =document.createElement(“li”);
//添加内容
li.innerHTML=" 西游记";
var ul=document.getElementsByTagName(“ul”)[0];
//父元素添加子元素
//插入标签关键字 appendChild
// ul.appendChild(li);
//添加到某个元素前面
var li2=document.getElementById(“spa”);
ul.insertBefore(li,li2);
//复制一个元素（标签）
var li3=li2.cloneNode(true);//必须写布尔值 true如果有子标签也会复制，flash就复制自己
ul.appendChild(li3);
}
function del(){
var li2=document.getElementById(“spa”);
var ul=document.getElementsByTagName(“ul”)[0];
//父元素删除子元素
ul.remove(li2);
}
function re(){
//创建标签对象
var li =document.createElement(“li”);
//添加内容
li.innerHTML=" 西游记";
var li2=document.getElementById(“spa”);
var ul=document.getElementsByTagName(“ul”)[0];
//新元素替换旧元素
ul.replaceChild(li,li2);
}
function change(){
var p=document.getElementsByTagName(“p”)[0];
//添加定义好的样式
p.className=“tset”;
}

面向对象

对象
a) 类；在javascript中表示是引用类型，是一种数据结构，将数据（属性也就是变量）和功能（函数）组织在一起
b) 对象；某个特定引用类型的实例
对象组成包括属性与方法
a) 属性等于变量
b) 方法为函数
函数可以与java中一样，直接调用，如
var str=“是一个字符串”;//声明变量
function shoInfo(){
document.write(str+"
");//通过函数进行输出
}
shoInfo();//调用函数
a) 编写自己的方法时不能直接用=“内容”，要通过函数来对其方法进行赋值从而编写自己的方法；如
ste.show=function(){
document.write(“我是时钟”);
};函数默认为window的对象
Window对象（默认的this）
a) This与java中的一样
事件
Onmouseover鼠标移动到某元素上
Onmouseout鼠标从某个元素移开

Winform；应用程序中的一个对话框

jQuery事件
a) 基础事件
i. 鼠标事件
鼠标事件是当用户在文档上移动或单击时而产生的事件
a) Click( )；触发或将函数绑定到指定的元素的click事件（鼠标单击时执行）
b) Mouseover（）；触发或将函数绑定到指定的元素的Mouseover事件（鼠标指针移过时）
方法演示

c) Mouseout（）；触发或将函数绑定到指定的元素的Mouseout事件（鼠标指针移出时）
Mouseover Mouseout 与Mouseenter Mouseleave事件的不同点与相同点

d) Mouseenter（）；触发或将函数绑定到指定的元素的Mouseenter事件（鼠标指针进入时）
e) Mouseleave（）；触发或将函数绑定到指定的元素的Mouseleave事件（鼠标指针离开时）
ii. 键盘事件（每次按下或者释放键盘是都会产生的事件）
keydown();触发或将函数绑定到指定的元素的keydown事件（按下键盘时执行）
keyup()触发或将函数绑定到指定的元素的keyup事件（释放按键时执行）
ketpress()触发或将函数绑定到指定的元素的ketpress事件（产生可打印的字符时）
a) 使用键盘按下或释放时的事件（代码如下）
$(“input”).keydown(function(){
//append方法是在被选择元素内部插入指定内容
$(“span”).append(“keydown”);
}).keyup(function(){
$(“span”).append(“keyup”);
}).keypress(function(){
$(“span”).append(“keypress”);
})
补充内容event方法，通过该方法获取用户在键盘上按下的键位是多少
a) 代码
//获取按下的键位 event
$(document).keydown(function(event){
//通过event.keyCode来判断用户按下的键位 enter回车键键位值是13
if (event.keyCode==13){
//如果用户按下的是enter键，弹出语句
alert(“确定要提交吗？”)
}
})

iii. Window事件(浏览器事件)
语法$( 属性 ).rezize ( );
语法
$(window).ready(function(){
console.log(“浏览器被调整了！”)
})
iv. 表单事件
b) 复合事件（hover（）事件与）
i. 鼠标光标悬停事件
ii. 鼠标连续点击事件（toggle（（有参数，没有参数为显示隐藏））事件）
iii. 鼠标光标离开事件

绑定事件与移除事件
a) 绑定事件(在一个元素上添加一个或多个事件，以及处理函数等)
i. bind(type,[date ],fn );

ii. 绑定单个事件

iii. 语法（代码）
$("#ul1").hide();//将内容进行隐藏
//使用bind进行绑定单个事件
$("#a1").bind(“mouseover”,function(){
$("#ul1").show();//通过鼠标悬浮显示内容
})
i. 绑定多个事件
绑定多个事件就是在原有的基础上添加新的事件（代码如下）
$("#a1").bind({
mouseover:function(){
$("#ul1").show();//通过鼠标悬浮显示内容
},
mouseout:function(){
$("#ul1").hide();//通过鼠标离开隐藏内容
}
})

b) 移除事件（使用unbind ( )方法）
i. 语法
添加和移除事件
a) 语法

添加css样式的时候如果通过jQuery进行添加的话会不好更改，通过addclass进行添加的话方便移除（利用removeclass进行移除）
5. HTML代码的使用
a) 具体代码（注解为笔记内容）

节点
a) 代码详情
var li= $("<li>今年</li>");//工厂模式也可以书写为 var li="今年" //$ (“ul”).append(li);//父元素末尾添加子元素
// $("#xing").before(li);//给同级元素添加
// $("#xing").remove();//删除整个节点内容事件不存在
// $("#xing").empty();//清空节点内容事件还存在
//替换节点
var li4=“
明年

遍历（each的使用）
a) 代码详情
//遍历
var lis=$(“li”);//创建对象
//循环处理对象，处理函数（操作）
$KaTeX parse error: Expected '}', got 'EOF' at end of input: \dotsction(){ alert($ (this).html());
})

JavaScript基础语法

hello javascript

Bom属性

Dom属性与方法

javascript函数

代码样式

DAPPER 事务 TRANSACTION

Java中线程的创建方式

SpringBoot整合vue實例

SpringBoot整合activeMq消息中間件

java在線瀏覽文件

docker中安裝rabbitmq（基本使用）

SpringBoot日誌輸出到控制檯

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結