首页 > 代码库 > 六一笔记
六一笔记
一、ajax
AJAX的概念就是页面互动无刷新的效果。
例如:你做一个注册页面，因为用户一般都是唯一的，这个时候你就可以选择一个比较人性化的做法，就是使用AJAX技术，当填完信息鼠标移开txtUserName这个文本框的时候 触发一个事件，然后这个事件调用一个JS方法。JS方法里面使用xmlHttpRequest这个对象。就可以异步的调用后来 来完成一个 查询并且判断的过程。 最后返回一个结果 在前面来判断输入的 “用户名是否在!”。
二、表单验证
表单验证是javascript中的高级选项之一。JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。
被 JavaScript 验证的这些典型的表单数据有：
用户是否已填写表单中的必填项目？
用户输入的邮件地址是否合法？
用户是否已输入合法的日期？
用户是否在数据域(numeric field) 中输入了文本？
必填项目
下面的函数用来检查用户是否已填写表单中的必填（或必选）项目。假如必填或必选项为空，那么警告框会弹出，并且函数的返回值为 false，否则函数的返回值则为 true（意味着数据没有问题）：
function validate_required(field, alerttxt)
{ with(field)
{ if (value =http://www.mamicode.com/= null || value =="")
{ alertalerttxt); return false; }
else { return true; } } }
function validate_required(field, alerttxt)
{ with(field)
{ if (value =http://www.mamicode.com/= null || value =="")
{ alertalerttxt); return false; }
else { return true; } } }
下面是连同 HTML 表单的代码：
Email:
邮箱验证
下面的函数检查输入的数据是否符合电子邮件地址的基本语法。
意思就是说，输入的数据必须包含 @ 符号和点号(.)。同时，@ 不可以是邮件地址的首字符，并且 @ 之后需有至少一个点号：
function validate_email(field, alerttxt) { with(field) { apos = value.indexOf("@") dotpos = value.lastIndexOf(".") if (apos < 1 || dotpos - apos < 2) { alertalerttxt); return false; } else { return true; } } }
function validate_email(field, alerttxt) { with(field) { apos = value.indexOf("@") dotpos = value.lastIndexOf(".") if (apos < 1 || dotpos - apos < 2) { alertalerttxt); return false; } else { return true; } } }
下面是连同 HTML 表单的完整代码：
function validate_email(field, alerttxt)
{
with(field) { apos = value.indexOf("@"); dotpos = value.lastIndexOf(".");
if (apos < 1 || dotpos - apos < 2)
{
alertalerttxt);
return false;
}
else
{
return true;
}
}
}
function validate_form(thisform)
{
with(thisform)
{
if (validate_email(email, "Not a valid e-mail address!") == false)
{
email.focus();
return false
}
}
}
Email:
发送数据
三、弹出框大小
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Alert Dialogs</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta name="description" content="This is a demonstration page." />
<meta name="keywords" content="alert, confirm, prompt, demo" />
<style type="text/css">
BODY,
HTML {
padding: 0px;
margin: 0px;
}
BODY {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background: #FFF;
padding: 15px;
}
H1 {
font-size: 20px;
font-weight: normal;
}
H2 {
font-size: 16px;
font-weight: normal;
}
FIELDSET {
border: solid 1px #CCC;
-moz-border-radius: 16px;
-webkit-border-radius: 16px;
border-radius: 16px;
padding: 1em 2em;
margin: 1em 0em;
}
LEGEND {
color: #666;
font-size: 16px;
padding: 0em .5em;
}
PRE {
font-family: "Courier New", monospace;
font-size: 11px;
color: #666;
background: #F8F8F8;
padding: 1em;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
}
/* Custom dialog styles */
#popup_container.style_1 {
font-family: Georgia, serif;
color: #A4C6E2;
background: #005294;
border-color: #113F66;
}
#popup_container.style_1 #popup_title {
color: #FFF;
font-weight: normal;
text-align: left;
background: #76A5CC;
border: solid 1px #005294;
padding-left: 1em;
}
#popup_container.style_1 #popup_content {
background: none;
}
#popup_container.style_1 #popup_message {
padding-left: 0em;
}
#popup_container.style_1 INPUT[type=‘button‘] {
border: outset 2px #76A5CC;
color: #A4C6E2;
background: #3778AE;
}
</style>
<!-- Dependencies -->
<script src="http://www.mamicode.com/jquery.js" type="text/javascript"></script>
<script src="http://www.mamicode.com/jquery.ui.draggable.js" type="text/javascript"></script>
<!-- Core files -->
<script src="http://www.mamicode.com/jquery.alerts.js" type="text/javascript"></script>
<link href="http://www.mamicode.com/jquery.alerts.css" rel="stylesheet" type="text/css" media="screen" />
<!-- Example script -->
<script type="text/javascript">
$(document).ready( function() {
$("#alert_button").click( function() {
jAlert(‘This is a custom alert box‘, ‘Alert Dialog‘);
});
$("#confirm_button").click( function() {
jConfirm(‘Can you confirm this?‘, ‘Confirmation Dialog‘, function(r) {
jAlert(‘Confirmed: ‘ + r, ‘Confirmation Results‘);
});
});
$("#prompt_button").click( function() {
jPrompt(‘Type something:‘, ‘Prefilled value‘, ‘Prompt Dialog‘, function(r) {
if( r ) alert(‘You entered ‘ + r);
});
});
$("#alert_button_with_html").click( function() {
jAlert(‘You can use HTML, such as <strong>bold</strong>, <em>italics</em>, and <u>underline</u>!‘);
});
$(".alert_style_example").click( function() {
$.alerts.dialogClass = $(this).attr(‘id‘); // set custom style class
jAlert(‘This is the custom class called “style_1”‘, ‘Custom Styles‘, function() {
$.alerts.dialogClass = null; // reset to default
});
});
});
</script>
</head>
<body>
<h1><a href="http://abeautifulsite.net/2008/12/jquery-alert-dialogs/">« jQuery Alert Dialogs (Alert, Confirm, & Prompt Replacements)</a></h1>
<h2>Basic Examples</h2>
<fieldset>
<legend>Alert</legend>
<pre>
jAlert(‘This is a custom alert box‘, ‘Alert Dialog‘);
</pre>
<p>
<input id="alert_button" type="button" value="http://www.mamicode.com/Show Alert" />
</p>
</fieldset>
<fieldset>
<legend>Confirm</legend>
<pre>
jConfirm(‘Can you confirm this?‘, ‘Confirmation Dialog‘, function(r) {
jAlert(‘Confirmed: ‘ + r, ‘Confirmation Results‘);
});
</pre>
<p>
<input id="confirm_button" type="button" value="http://www.mamicode.com/Show Confirm" />
</p>
</fieldset>
<fieldset>
<legend>Prompt</legend>
<pre>
jPrompt(‘Type something:‘, ‘Prefilled value‘, ‘Prompt Dialog‘, function(r) {
if( r ) alert(‘You entered ‘ + r);
});
</pre>
<p>
<input id="prompt_button" type="button" value="http://www.mamicode.com/Show Prompt" />
</p>
</fieldset>
<h2>Additional Examples</h2>
<fieldset>
<legend>With HTML</legend>
<pre>
jAlert(‘You can use HTML, such as <strong>bold</strong>, <em>italics</em>, and <u>underline</u>!‘);
</pre>
<p>
<input id="alert_button_with_html" type="button" value="http://www.mamicode.com/Show Alert" />
</p>
</fieldset>
<fieldset>
<legend>Alternate Styles</legend>
<p>
By changing the value of the <samp>$.alerts.dialogClass</samp> property (and creating
your own CSS class), you can changes the style of your dialogs:
</p>
<p>
<input id="style_1" class="alert_style_example" type="button" value="http://www.mamicode.com/Style 1" />
</p>
<p>
View the plugin source for additional properties that can be modifed at runtime.
</p>
</fieldset>
<p>
<a href="http://abeautifulsite.net/2008/09/jquery-context-menu-plugin/">Back to the project page</a>
</p>
</body>
</html>
记得导入3个js 和 1个css，可以通过css改变样式
四、开发人员控制面板
Elements:查找网页源代码HTML中的任一元素,手动修改任一元素的属性和样式且能实时在浏览器里面得到反馈。
Console:记录开发者开发过程中的日志信息，且可以作为与JS进行交互的命令行Shell。
Sources:断点调试JS。
Network:从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息（包括状态、资源类型、大小、所用时间等），可以根据这个进行网络性能优化。
Timeline:记录并分析在网站的生命周期内所发生的各类事件，以此可以提高网页的运行时间的性能。
Profiles:如果你需要Timeline所能提供的更多信息时，可以尝试一下Profiles,比如记录JS CPU执行时间细节、显示JS对象和相关的DOM节点的内存消耗、记录内存的分配细节。
Application:记录网站加载的所有资源信息，包括存储数据（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、缓存数据、字体、图片、脚本、样式表等。
Security:判断当前网页是否安全。
Audits:对当前网页进行网络利用情况、网页性能方面的诊断，并给出一些优化建议。比如列出所有没有用到的CSS文件等。注： 这一篇主要讲解前三个面板Elements、Console、Sources。
五、onclick用法
window.location.replace(“url”)：将地址替换成新url，该方法通过指定URL替换当前缓存在历史里（客户端）的项目，因此当使用replace方法之后，你不能通过“前进”和“后 退”来访问已经被替换的URL，这个特点对于做一些过渡页面非常有用！
window.location.reload()：强制刷新页面，从服务器重新请求！
window.location.href和window.location.replace的区别：
假设有3个jsp页面（1.jsp, 2.jsp, 3.jsp），进系统默认的是1.jsp ，当我进入2.jsp的时候， 2.jsp里面用window.location.replace(“3.jsp”);与用window.location.href(“3.jsp”);从用户界面来看是没有什么区别的，但是当3.jsp页面有一个“返回”按钮，调用window.history.go(-1);wondow.history.back();方法的时候，一点这个返回按钮就要返回2.jsp页面的话，区别就出来了，当用window.location.replace(“3.jsp”);连到3.jsp页面的话，3.jsp页面中的调用window.history.go(-1);wondow.history.back();方法是不好用的，会返回到1.jsp 。当用window.location.href(“3.jsp”)；连到3.jsp页面的话，3.jsp页面中的调用window.history.go(-1);wondow.history.back();方法是好用的，会返回2.jsp。因为window.location.replace(“3.jsp”);是不向服务器发送请求的跳转，而window.history.go(-1);wondow.history.back();方法是根据服务器记录的请求决定该跳到哪个页面的，所以会跳到系统默认页面1.jsp 。window.location.href(“3.jsp”);是向服务器发送请求的跳转，window.history.go(-1);wondow.history.back();方法是根据服务器记录的请求决定该跳到哪个页面的，所以就可以返回到2.jsp。
window.location和window.open区别：
在给按钮、表格、单元格、下拉列表和DIV等做链接时一般都要用Javascript来完成，和做普通链接一样，可能需要让链接页面在当前窗口打开，也可能需要在新窗口打开，这时就可以使用下面两项之一来完成：
window.open 用来打开新窗口
window.location 用来替换当前页，也就是重新定位当前页
可以用以下来个实例来测试一下。
<input type=”button” value=http://www.mamicode.com/”新窗口打开” onclick=”window.open(‘http://www.zhousl.com/’)”>
<input type=”button” value=http://www.mamicode.com/”当前页打开” onclick=”window.location=’http://www.zhousl.com/’”>
window.location.Reload()和window.location.href=http://www.mamicode.com/window.location.href;都是刷新当前页面。
六、分支循环
1、当有多个条件是用 elif 这样就不用那么多缩进
score = int(input(‘输入一个分数‘))
if 100 >= score >= 85:
print(‘A‘)
elif 85 > score >= 60:
print(‘B‘)
elif 60 > score >= 0:
print(‘C‘)
else:
print(‘输入错误! ‘)
2、三元操作符 语法 x if 条件 else y
small = x if x < y else y #当if后面的条件为真的时候把x的值赋给small；当条件为假的时候把y的值赋给small
3、断言 assert #当这个关键字后面的条件为假的时候程序自动崩溃，并抛出AssertError。当需要程序中的某个条件一定为真时才能让程序正常运行，assert就非常有用。
>>> assert 3 < 4
>>> assert 3 > 5
Traceback (most recent call last):
File "<pyshell#70>", line 1, in <module>
assert 3 > 5
AssertionError
4、while循环 #在条件为真的时候执行某一段制定的代码，只要条件为真，while循环就会一直去重复执行那一段代码。这段代码就是一个循环体。
5、for循环
①>>> favourite = ‘welcom‘ ②>>>member = [‘QQ‘, ‘QW‘, ‘QR‘]
>>> for i in favourite: >>>for each in member:
print(i, end=‘8‘) print(eacd, len(each)) #打印each的长度 即QQ有两个字符就打印2
w8e8l8c8o8m8 QQ 2
QW 2
QR 2
6、range语法：range(start, stop, step) 默认step=1
① >>> range(0,5)
>>> list(range(5))
[0, 1, 2, 3, 4]
② >>> for i in range(2, 7): #7是不包含的
print(i)
2
3
4
5
6
③>>> for i in range(1, 10, 4): #4代表每次步进4，从1开始打印出1-10从1开始每次步进4的数
print(i)
1
5
9
7、break 终止当前循环并跳出这个循环体
bingo = ‘猜答案‘
print(‘输入一句话‘)
answer = raw_input()
#print bingo
#print answer
while True:
if answer == bingo:
break
print(‘抱歉输错了,请重新输入才能退出‘)
answer = raw_input()
print(‘很好额‘)
print(‘答对了‘)
8、continue 当循环条件为True的时候终止本轮循环并开始下一轮循环 ，如果不退的话会跳出循环
for i in range(10):
if i%2 != 0:
print(i)
continue
i += 2
print(i)
显示结果是：
2
1
4
3
6
5
8
7
10
9
window.location.Reload()如果有数据提交的话，会提示是否提交的(是和否选项)
window.location.href=http://www.mamicode.com/window.location.href是定向url提交数据
最好不要用location.re
load()，而用location=location比较好，还有在模式窗口（showModalDialog和showModelessDialog）前者不能用。
reload() 方法用于重新加载当前文档。
语法
location.reload(force)说明
如果该方法没有规定参数，或者参数是 false，它就会用 HTTP 头 If-Modified-Since 来检测服务器上的文档是否已改变。如果文档已改变，reload() 会再次下载该文档。如果文档未改变，则该方法将从缓存中装载文档。这与用户单击浏览器的刷新按钮的效果是完全一样的。
如果把该方法的参数设置为 true，那么无论文档的最后修改日期是什么，它都会绕过缓存，从服务器上重新下载该文档。这与用户在单击浏览器的刷新按钮时按住 Shift 健的效果是完全一样。
好象是说:
如果window.loacation.reload(true)==window.location.href=http://www.mamicode.com/”xxx.xx”;
This entry was posted in js and tagged JQ函数, Js函数. Bookmark the permalink
七、强数据类型
强类型定义语言
一种总是强制类型定义的语言。Java和Python是强制类型定义的。如果你有一个整数，如果不显示地进行转换，你不能将其视为一个字符串来用
弱类型定义语言
一种类型可以被忽略的语言，与强类型定义相反。VBScript是弱类型定义的。在VBScript中，可以将字符串 ‘12‘ 和整数 3 进行连接得到字符串 ‘123‘，然后可以把它看成整数 123，而不需要显示转换 。
八、垃圾回收机制
要理解什么是垃圾回收机制，首先要对内存管理概念有一个基本的认识。内存管理是指操作系统如何进行内存的分配和回收的机制。早期的计算机语言，比如C, 它通过malloc, free函数来向操作系统请求
内存和释放内存。 这种机制的优点是内存分配和释放的效率很高。但是它也有着它的缺点，主要表现在对于复杂的系统，存在着大量的内存分配和释放操作。程序员很容易不小心忘记释放内存，从而造成内
存的泄露，对于长期运行的软件来讲，这将是一个致命的威胁，因为系统的内存会逐渐被吃光。 因此，更新的编程语言，比如JAVA, C#, 都提供了所谓“垃圾回收的机制”，运行时自身会运行相应的垃圾
回收机制。程序员只需要申请内存，而不需要关注内存的释放。垃圾回收器(GC)会在适当的时候将已经终止生命周期的变量的内存给释放掉。
GC的优点就在于它大大简化了应用层开发的复杂度，降低了内存泄露的风险
九、闭包
闭包是指可以包含自由（未绑定到特定对象）变量的代码块；这些变量不是在这个代码块内或者任何全局上下文中定义的，而是在定义代码块的环境中定义（局部变量）。“闭包” 一词来源于以下两者的
结合：要执行的代码块（由于自由变量被包含在代码块中，这些自由变量以及它们引用的对象没有被释放）和为自由变量提供绑定的计算环境（作用域）。在PHP、Scala、Scheme、Common Lisp、
Smalltalk、Groovy、JavaScript、Ruby、 Python、Go、Lua、objective c、swift 以及Java（Java8及以上）等语言中都能找到对闭包不同程度的支持。
本质
度量空间中的
极限点
性质
举例说明
语法结构
环境表达
代码
|
1
2
3
4
5
6
7
8
9
|
function a(){var i=0;function b(){alert(++i);}return b;}var c=a();c(); |
特点
作用
另一个例子
return{
increment:function(){
count++;
},
get:function(){
return count;
}
}
}
var foo =Counter(4);
foo.increment();
foo.get();// 5
结果
六一笔记