简单总结学习"/>
JavaScript简单总结学习
JAVASCRIPT
- 目标,能认识代码所表达的意思即可
- 比较流行的一种制作网页特效的脚本语言
JavaScript学习(轻量级脚本语言)简介
- 可插入HTML页面,可由所有现代浏览器执行,使用
<script>
和</script>
标签,表明何时开始何时结束 - 可以改变大多数HTML的属性
- 对大小写敏感,会忽略多余的空格
- 可以使用\来换行,注释和C语言一样
- 测试和捕捉,try里测试,若发生错误则执行catch
try{//在这里运行代码}
catch(err){//在这里处理错误}
JAVASCRIPT
JS基本教程
如何实现
- 使用
<script>
标签,JS代码加在中间,可放在body,head等位置 - 外部的JS,文件拓展名为.js。
<script src="myScript.js"></script>
输出
-
document.getElementById("id")访问某用id标识的元素
-
document.write("<p></p>")仅限于向文档输出内容
变量
- 变量必须以字母开头,少用$和_开头
- 使用var来声明变量,再赋值
- 一条语句多个变量用 , 分开
- 动态变量即:相同变量可以用作不同的类型
- 只有一种数字类型,可带小数点或者不带
- 局部与全局变量
- 如果把值赋给没有声明的变量,该变量将自动作为全局变量声明
- 严格区分大小写
对象
- 对象由花括号分开
创建对象及属性
-
名加’.'连接符,连接对象
person.age=56;
-
对象的属性意名称和值对的形式(name:value)来定义,属性有逗号分开
var person= {firstname:"Bill",lastname:"Gates",id:5566 };
-
对象有两种寻址方式
name=person.lastname
name=person["lastname"]
函数
-
代码如下
myFunction(argument1,argument2)
- 可以发送任意数量的函数
function functionname(var1,var2) {这里是要执行的代码;return x;返回值 }
- 可以在任意位置进行调用
- function必须小写
- 变量和参数必须以一致的顺序出现,也就是第一个变量就是第一个被传递的参数的值
运算符
- 同C
- 对字符串和数字进行加法运算,结果为字符串
- 可以叠加字符串
语法语句
if,for,while
- 请使用小写,否则会报错
- 其余语法和C大致相同
for (var i=0,len=cars.length;i<len;i++)
JS错误
-
try 语句测试代码块的错误
catch 语句处理错误
throw 语句创建自定义错误
try
{//运行代码
}
catch
{//代码
}throw exception
表单验证
必选项目
function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value==""){alert(alerttxt);return false}
else {return true}
}
}
依次类推,邮箱等
JS HTML DOM
简介
- 通过HTML DOM(文档对象类型),可访问JS HTML所有元素
查找HTML元素
-
通过id
var x=document.getElementById("id名")
-
标签名
var x=document.getElementById("main")
var y=x.getElementsByTagName("p")
查找id为main的元素,然后查找其中所有的p元素
-
类名
DOM HTML
改变输出流
- JS能创建动态的HTML内容
- document.write()直接向HTML输出流写内容(不要再文档加载后使用,否则会覆盖)
改变HTML内容
-
最简单的是用innerHTML属性
document.getElementById(id).innerHTML=new HTML
改变HTML属性值
document.getElementById(id).属性=new value
DOM CSS
document.getElementById(id).style.属性=new style
DOM 事件
对事件作出反应
- 向HTML事件属性添加JS代码
onclick=JavaScript
- 事件例子(当用户点击鼠标,当网页已加载,当图像已加载,鼠标移动到元素,输入字段被改变时,提交HTML表单,触发按键时)
事件属性(向元素分配事件)
<!DOCTYPE html>
<html>
<body><p>点击按钮就可以执行 <em>displayDate()</em> 函数。</p><button onclick="displayDate()">点击这里</button><script>
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script><p id="demo"></p></body>
</html>
-
该例子就是向button元素分配 onclick事件,还有如下
<script> document.getElementById("myBtn").onclick=function(){displayDate()}; function displayDate() { document.getElementById("demo").innerHTML=Date(); } </script>
onload和onunload事件
-
在用户进入或离开页面时被触发
-
onload可用于检测访问者的浏览器类型和浏览器版本,并基于这些信息来加载网页的正确版本。
-
可用于处理 cookie(检验navigator.cookieEnabled是否为真)
onchange
-
结合对输入字段的验证来使用
<input type="text" id="fname" onchange="myFunction()">
onmouseover,onmouseout
- 鼠标在移到某元素上方,移出是时触发
onmousedown,onmouseup,onclick
- 首次点击鼠标,释放鼠标按钮,完成鼠标点击时
JS HTML DOM 节点
创建并添加HTML元素
创建新的元素p:
var para=document.createElement("p");
如需向 <p> 元素添加文本,您必须首先创建文本节点。
var node=document.createTextNode("这是新段落。");
向 <p> 元素追加这个文本节点:
para.appendChild(node);
向一个已有的元素追加这个新元素。
var element=document.getElementById("div1");
element.appendChild(para);
删除元素
假定例子
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
找到 id="div1" 的元素
var parent=document.getElementById("div1");
找到 id="p1" 的 <p> 元素:
var child=document.getElementById("p1");
从父元素中删除子元素
parent.removeChild(child);
JS 对象
- 对象是带有属性和方法的特殊数据类型
- JS中所有事物都是对象:字符串,数据,数组,函数。。。
访问对象
objectName.propertyName
-
方法(可以在对象上执行的操作)
objectName.methodName()
创建JS对象
-
直接定义并创建
person=new Object(); person.firstname="Bill"; 另一种语法: person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"};
-
使用函数来定义对象,然后创建新的对象实例
function person(firstname,lastname,age,eyecolor) { this.firstname=firstname; this.lastname=lastname; this.age=age; this.eyecolor=eyecolor; }
JS类
- JS不使用类
JS数字
- 只有一种数字类型
- 数字为64位
- 精度:整数15位,小数17位
JS字符串
-
字符串对象
var txt="Hello world!" document.write(txt.length/toUpperCase())//可根据需要添加
JS日期
-
定义日期
var myDate=new Date()Date 对象自动使用当前的日期和时间作为其初始值。
-
操作日期
为日期对象设置了一个特定的日期 (2008 年 8 月 9 日): var myDate=new Date() myDate.setFullYear(2008,7,9) 注意:表示月份的参数介于 0 到 11 之间。也就是说,如果希望把月设置为 8 月,则参数应该是 7。 将日期对象设置为 5 天后的日期: var myDate=new Date() myDate.setDate(myDate.getDate()+5) 注意:如果增加天数会改变月份或者年份,那么日期对象会自动完成这种转换。
JS数组
-
创建,赋值
var mycars = new Array() mycars[0] = "Saab" mycars[1] = "Volvo" mycars[2] = "BMW"
-
访问
document.write(mycars[0])
-
修改
mycars[0]="Opel";
JS math
对一个数进行四舍五入。
document.write(Math.round(4.7))
返回一个介于 0 和 1 之间的随机数
document.write(Math.random())
返回一个介于 0 和 10 之间的随机数:
document.write(Math.floor(Math.random()*11))
JS RegExp
-
正则表达式
-
定义
使用该 RegExp 对象在一个字符串中检索时,将寻找的是字符 "e"。 var patt1=new RegExp("e");
-
对象方法
test():检索字符串中的指定值。返回值是 true 或 false。 exec():检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配,则返回 null compile():用于改变 RegExp,可以改变检索模式,也可以添加或删除第二个参数
JS cookie
创建和存储cookie
function setCookie(c_name,value,expiredays)
{
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)//过期天数
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
}
JS注入攻击
方法
-
每当接受用户输入的内容并重新显示这些内容时,网站就很容易遭受 JavaScript 注入攻击。
-
能直接输入并提交,如
<script>alert(“Attack!”)</script> 此文本表示显示警告消息框的 JavaScript 脚本。在某人将此脚本提交,会显示Attack! 会在将来任何人访问网站时显示。
-
浏览器地址栏中输入一段js代码,用来改变页面js变量、页面标签的内容。
- 使用Javascript注入,用户不需要关闭或保存网页就可以改变其内容,这是在浏览器的地址栏上完成的
语法大致如下: javascript:alert(#command#) 如: 1. 站点上看到一个alert警告框,那么首先在地址栏上输入URL并等待页面加载完成,然后删掉URL并输入: javascript:alert("Hello World") 2. 例如一张图片。 它的源代码为: <IMG Name="hi" SRC="hello.gif"> 把它改成存储在另一个站点里的某一个文件中,一次完整的图片URL地址为: .jpeg 只需要在地址栏输入: javascript:alert(document.hi.src=".jpeg") 值得注意的是,此修改是暂时的,刷新网页后会消失 3. 修改变量的值 假设源代码如下: <SCRIPT LANGUAGE="JavaScript"> var a="test" </SCRIPT> 输入: javascript:alert(a="hello") 4. 更改表单属性 源代码: <form name="format" action="send.php" method="post"> <input type="hidden" name="mail" value="someone@somewhere.com"> <input type="text" name="name"> <input type="submit" value="submit"></form> 将表单发送到另一个邮箱: javascript:alert(document.format.mail.value="me@hacker.com") 解释:document+对象名+想修改的属性+值 如果新的属性值为字符串时,加上双引号,变量则不加 如果标签没有名字,则用下列命令: javascript:alert(document. .mail.value="me@hacker.com") 假如表单很多,又没有名字咋办? 加个序号即可,但是从0开始数哟! 使用如下命令: javascript:alert(document.forms[1].mail.value="me@hacker.com") 其他也是同理: 图片: javascript:alert(document.images[3].src="#the url of the picture you want#") 链接: javascript:alert(document.links[0].href="#the url you want#") cookie也行哦!
-
防御
-
重新在视图中显示数据时,用 HTML 编码任何网站用户输入的数据
如:<%=Html.Encode(feedback.Message)%>
在转换后,浏览器在解析编码的字符串时不再执行 JavaScript 脚本。而是显示无害的页面。
-
将数据提交到数据库之前使用 HTML 编码数据。
更多推荐
JavaScript简单总结学习
发布评论