/*javaScript脚本小复习*/
1.弱语言 var let
1.js特点:
解释型语言
基于对象
事件驱动(js可以以事件驱动的方式直接对客户端的输入做出相应,不需要经过服务端)
安全性(js不允许访问本地硬盘,不能将数据写入服务器,不允许对文档进行修改和删除
只能通过浏览器实现信息浏览和动态交互,从而有效防止数据丢失)
跨平台(js依赖于浏览器本身,和操作系统无关)
2.js语法很类似于java,但又有部分不同
js区分大小写
每行结尾的分号可有可无.
3.变量是弱类型的,只需要用let或者var即可将变量初始成任意值
4.弱语言,没有常量类型
2.js组成
ECMAScript语法
DOM:document object model 操作html文档 DOM种每一个节点被视为各种类型的Node对象
BOM:browser object model 操作浏览器的api
2.1js的引入方式
1.head标签内引入 <script></script>
2.body标签内引入 <script></script>
3.元素事件中引入(标签属性中引入) /
eg:<span onclick="函数名(参数列表)"></span>
4.引入外部js文件(放在head标签尾部) <script src="js文件路径"></script>
2.1js的三种输出方式
1.调用window窗口函数 如:alert() 警告框,confirm() 提示框,prompt()提示输入框
2.document.write(信息); 向当前文档里面写入信息
3.console.log(信息); 向控制台里面写入信息 js调试在前端页面进行 检查-->console
3.基本数据类型 (转义字符直接可以使用 跟别的语言一样)
Number(数值型,Number又分为整形和浮点型两种),String(js没有char类型,不同于Java),boolean(只有两个值true,false),null,undefined,
var a = null; /*类型为 null 实际是object 因为所有对象的父类是object*/
var b = ""; /*空字符串 String类型*/
var c; /*未定义undefined类型 未给变量赋值*/
重点:特殊类型的数字常量:NaN(表示"非数字"),当程序由于某种原因发生计算错误后,
将产生一个没有意义的数字,此时javascript返回的数字值就是NaN
返回变量的数据类型:typeof()
声明变量 var 或者 let 现在许多人都用let(据说是稳定,var容易报错,但我未曾考证过) hah hah!!! JS的变量命名规则和c系列语言一样
变量的作用域,全局变量和局部变量
全局变量:定义在所有函数之外,作用于整个脚本代码的变量
局部变量:定义在函数体内,只作用于函数体内的变量
4.运算符 算数(+,-,*,/,%,++,--),关系,逻辑,条件(三目运算符跟c一样),赋值,字符串运算符(+:用于字符串连接,+=:用于两个字符串连接结果赋值给前一个字符串) 共6种运算符
"+" 用于字符串连接 !!!
注意:做除法时,0如果做了除数,返回结果则为Infinity
==(等于) , ===(绝对等于) 区别: 重点
var aa = 12;
var bb = '12';
aa == bb 返回结果 true
aa === bb 返回结果是 false
== 是 值相等,只根据表面值进行判断,不涉及数据类型
=== 是值和数据类型都相等 根据表面值和数据类型进行判断 ,
4.1流程控制语句
if系列条件判断语句:和java相同
switch多分支语句:和java相同 判断分支较多使用switch语句
for循环语句:和java相同 用于次数已知的循环
while循环语句:和java相同, 用于次数未知的循环
do-while循环语句:和java相同
break和continue语句:更是和java相同了
continue语句只能用于for,while,do-while,switch中
4.2函数 函数是由关键字function,函数名,和形式参数,大括号,和括号内的代码组成的
1.函数的调用 函数名(参数列表);
4.3事件处理程序:js和web页面的交互是通过用户操作浏览器页面时触发相关事件来实现的.
eg:在页面加载完毕时,将触发onload载入事件,当用户单击将触发onclick事件等
事件处理程序:是用于响应某个事件而执行的处理程序.可以是任意的js语句,但通常使用特定的自定义函数来对事件进行处理.
1.事件处理模型 :(通用是一种编程范式,还有单线程,多线程范式)
特点:它的特点是包含一个事件循环，当外部事件发生时使用回调机制来触发相应的处理
1.有一个事件（消息）队列；
2.鼠标按下时，往这个队列中增加一个点击事件（消息）；
3.有个循环，不断从队列取出事件，根据不同的事件，调用不同的函数，如onClick()、onKeyDown()等；
4.事件（消息）一般都各自保存各自的处理函数指针，这样，每个消息都有独立的处理函数；
2.js常用事件 大部分和java很相似,但是java有自定义事件
1.鼠标事件
2.键盘事件
3.表单事件
3.事件处理程序的调用 :首先要获得处理对象的引用,然后将要执行的处理函数值赋给相应事件
1.在js中调用和在js中写函数代码
eg:<script>
var a = document.getElementById('a'); /*获取id值为a的标签*/
a.onclick=function(){ /*为id值为a的标签添加单击事件*/
alert("事件处理程序调用1");
}
</script>
2.在html中调用,在js中写函数代码
eg:<input name='name' type='button' value='save' onclick="alert('单击了保存按钮')" />
3.在html中调用,zaijs中写函数代码的另一种形式 2,3本质上没区别,只不过一个调用函数是全局函数,另一个是自定义函数,
eg:<input name='name' type='button' value='save' onclick="tt()" />
5.获取js的dom元素 这个只是定位dom树的节点,存储的并不是内容
var a = document.getElementById("id值"); /*获取id的元素 一个页面中id值唯一*/
var b = document.getElementsByClassName("类名")[0]; /*通过类名获取元素 class获取能获取多个类标签，因为class在html中能出现多次*/
var c = document.getElementsByTagName("标签名")[0]; /*通过标签名获取元素*/ 0很重要,因为是取第一个,不加0是一个数组
6.js获取标签名和元素值 修改值
dom对象.innerHTML; 获取标签的内容 var a1 = a.innerHTML;
dom对象.innerHTML = '内容' ; 修改内容 a.innerHTML="fenglei";
dom对象.value 获取input里面value的内容 var b1 = b.value;
dom对象.value = '内容'; 修改内容 b.value = "fenglei da wang!!";
7.数据类型转换 方法同java parsInt();
parse类型(); 类型转换
eg:
let a = parseInt("12"); /*转为int*/
1.jQuery笔记
使用方式:那个页面想写js,就引入jQ的文件 ,下面这个是jQ文件 放在head头里面的最下面
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
2.引入js文件的方式:<script src="路径"></script>
/*head的底部*/
3.jq获取,修改标签内容 选择器可以是类选择器,id选择器,标签选择器
$('选择器'); /*选定指定标签 #id值 .类名 标签名*/
$('选择器').事件函数(function(){ /*普通标签的的添加事件的方式 匿名函数*/
/*代码*/
});
eg:
$('选择器').click(function(){ /*注意和js区别没有on了，在鼠标函数上*/
alert("fenglei love alain");
});
/*a标签添加事件的方法很特殊*/
<a href="javascript">a标签的操作</a>
$('选择器').click(function(){
alert("fenglei love alain");
});
$('选择器').text(); /*获取标签内容*/
$('选择器').text('要修改的内容'); /*修改标签内容*/
$('选择器').val(); /*获取表单内容*/
$('选择器').val('要修改的内容'); /*修改表单内容*/
4.给标签设置样式 注意单个样式和多个样式的区别
/*设置多个css样式*/
$('li').css({"color":"red","font-size":"100px"});
/*设置单个css样式*/
$('li').css("color","red")
1.ajax
ajax的调用
$.ajax({
url:"", /*请求的服务器地址*/
type:"", /*请求的方法 get post put ...*/
data:"", /*前端请求的数据*/
dataType:"", /*服务器返回的数据类型 必须是json 防止乱码*/
success:function(result){ /*result是服务器返回给前端的数据*/
},
error:function(result){ /*这个是代码出错的地方 debug时有，正式发行时没有了*/
},
})
老师的笔记
javaScript笔记
1、作用:动态网页、与后台交互数据
2、js的组成:
ECMAScript语法
DOM:document object model
BOM:browser object model
3、数据类型、变量
number、String、boolean、null、undefined
var 变量名 = 值;
let 变量名 = 值;
附加:var type = typeof(变量名)
检测某个变量的数据类型并返回
变量名 = parseInt(变量名);
将某个变量的数据类型转换为数字
4、运算符
算数运算:+ - * / %
比较运算符:> < >= <= != == ===
5、js获取dom元素
document.getElementById("id值");
document.getElementsByClassName("class值");
document.getElementsByTagName("标签名");
6、js获取、修改标签内容
dom对象.innerHTML;
dom对象.innerHTML = "新的值";
7、js获取、修改表单内容
dom对象.value;
dom对象.value = "新的值";
B/S:browser/server
C/S:client/server