JAVAscript

JAVAScript概述

为了统一三家,ECMA(欧洲计算机制造协会)定义了ECMA-262规范.国际标准化组织及国际电工委员会（ISO/IEC）也采纳 ECMAScript 作为标准（ISO/IEC-16262）。从此，Web 浏览器就开始努力（虽然有着不同的程度的成功和失败）将 ECMAScript 作为 JavaScript 实现的基础。EcmaScript是规范。

尽管 ECMAScript 是一个重要的标准，但它并不是 JavaScript 唯一的部分，当然，也不是唯一被标准化的部分。实际上，一个完整的 JavaScript 实现是由以下 3 个不同部分组成的：

核心（ECMAscript）

文档对象模型（DOM）

浏览器对象模型(BOM)

javascript在开发中绝大数情况下是基于对象的，也是面向对象的。

jS 基础

JS在HTML中的引入方式

直接编写

导入文件

1 直接编写 <script> alert('hello yuan') </script> 2 导入文件 <script src="hello.js"></script> View Code

JS变量

声明变量

var 标识符;

标识符

开头必须是字母或者下划线或者$符号，不能以数字开头

JS中一些保留字也不能做标识符。比如if  switch  with case else var

JScript数据类型

number

boolean

string

undefined ----undefined

null---------null

number数值型

不区分整数型和浮点型，全部由64位浮点格式存储，相当于C中的double

string

是由Unicode字符、数字、标点符号组成的序列；字符串常量首尾由单引号或双引号括起；JavaScript中没有字符类型；常用特殊字符在字符串中的表达；字符串中部分特殊字符必须加上右划线\；常用的转义字符 \n:换行 \':单引号 \":双引号 \\:右划线

boolean布尔型

只有true 和false 两个值，也代表1和0

undefined类型

只有一个值undefined;当声明的变量未初始化时，该变量的默认值是 undefined。当函数无明确返回值时，返回的也是值 "undefined";

null类型

也只有一个值null,

值 undefined 实际上是从值 null 派生来的，因此 ECMAScript 把它们定义为相等的。

尽管这两个值相等，但它们的含义不同。undefined 是声明了变量但未对其初始化时赋予该变量的值，null 则用于表示尚未存在的对象（在讨论 typeof 运算符时，简单地介绍过这一点）。如果函数或方法要返回的是对象，那么找不到该对象时，返回的通常是 null。

运算符

算术运算符 + - * / % ++ --比较运算符 >            <           >=    <=          ==       !=           ===     !===逻辑运算符   &&         ||             !赋值运算符   =字符串运算符： + 连接，两边操作数有一个或两个是字符串就做连接运算

jS 是一门弱类型语言，有时会进行隐式类型转换。

<script> var i=2; var j="2"; if(i==j){ console.log("ok"); } </script> View Code

结果为ok

 

<script> var i=2; var j="2"; if(i===j){ console.log("ok"); }else{ console.log("failed"); } </script> View Code

这个就显示failed  ===表明两边不能隐式类型转换

NaN:属于Number类型的一个特殊值,当遇到将字符串转成数字无效时,就会得到一个NaN数据

逻辑运算符

首先是&&，先计算左边表达式，如果它的值为false或可被转换为false(null、NaN、0或undefined),那么返回左边表达式的值，否则返回右边表达式的值

 

然后是||，先计算左边表达式，如果它的值为true或不可被转换为false(null、NaN、0或undefined),那么返回左边表达式的值，否则返回右边表达式的值

<script> var n=NaN; var x=NaN; alert(n==x); alert(NaN!=NaN); console.log(1&&3); console.log(0&&3); console.log(1&&"1"); console.log(true+1); console.log(null==undefined); console.log(0 || 3); var z=0||NaN; console.log(typeof z); console.log(z); console.log(1 || 3); </script> View Code

结果如下

 

 流程控制

顺序判断循环

条件if-else语句

if (表达式){ 语句１; ...... } else{ 语句２; ..... } View Code

条件if-else if -else语句

if (表达式1) { 语句1; }else if (表达式2){ 语句2; }else if (表达式3){ 语句3; } else{ 语句4; } View Code

三元表达式

var a=1; var b=3; (b>2)? a=true:a=false; console.log(a);

switch-case语句

switch基本格式 switch (表达式) { case 值1:语句1;break; case 值2:语句2;break; case 值3:语句3;break; default:语句4; } View Code

循环语句

其语法和C语言是一致的

for语句

语法规则： for(初始表达式;条件表达式;自增或自减) { 执行语句 …… } View Code

另一种for循环的方式

for( 变量 in 数组或对象) { 执行语句 …… } View Code

while语句

语法规则： while (条件){ 语句1； ... } View Code

异常处理

try { //这段代码从上往下运行，其中任何一个语句抛出异常该代码块就结束运行 } catch (e) { // 如果try代码块中抛出了异常，catch代码块中的代码就会被执行。 //e是一个局部变量，用来指向Error对象或者其他抛出的对象 } finally { //无论try中代码是否有异常抛出（甚至是try代码块中有return语句），finally代码块中始终会被执行。 } View Code

JScript对象

String对象

创建String对象的两种方式

var str1="hello world";

var str2=new String("hello beijing");

<script> var str1="hello world"; var str2=new String("hello Beijing!"); var str3="hello shandong"; console.log(str1); console.log(str2); console.log(str3); console.log(typeof str1); console.log(typeof str2); </script>

结果如下：

字符串对象的属性和函数

字符串的属性只有一个length

字符串.length   //获得这个字符串的长度

字符串的各种方法：

var str1="hello world"; var str3="hello shandong"; var str2=" china community party "; console.log(str1.toUpperCase());//将字符串转换为大写 var str_am=str1.replace("world","america"); console.log(str1.indexOf("l"));//从左边找'l'，返回第一个索引值 console.log(str1.lastIndexOf("l"));//从右边开始找，返回第一个索引值 console.log(str_am); console.log(str2.trim());//去除两边的空格 var a=str2.trim().split(" ");//按空格分割为一个数组 console.log(str1.charAt(1)); //返回索引为1的字符串的字符 var arr2=str1.match("wor");//match返回一个匹配字符串的数组，如果没有找到返回null console.log(arr2); console.log(typeof arr2); console.log(str1.search("llo"));//返回匹配字符串的首位置的索引 console.log(str2.concat(" is great","shuaishuaishuai",str1));//将1个或者多个字符串连接起来 var b=["1",2,3]; console.log(b); console.log(typeof b);//返回为object console.log(a); console.log(typeof a); console.log(str1.slice(0,5));//切片 console.log(str1.substr(0,3));//0为取得索引的起始位置，3为长度 console.log(str1.substring(0,5));//0为start索引，5为end索引位置 console.log(str1); console.log(str3); </script> <style type="text/css"> View Code

 创建对象

第一种方法

<script type="text/javascript"> //document.writeln("in china does not exit freedom"); //document.writeln("this is also a statement"); var myData=new Object(); myData.name="yuyang"; myData.weather="sunny"; document.writeln("my name is "+myData.name); document.writeln("today is "+myData.weather); View Code

2使用对象字面量创建对象

<script type="text/javascript"> var student={ name:"yuyang", age:18, gender:1, grade:99, info:function(){ //info是定义的方法的名字，在方法内部用对象的属性， //需要使用this 这个关键字 document.writeln(this.name+"'s grade is "+this.grade); } }; student.info(); </script> View Code

读取和修改对象属性值

<script type="text/javascript"> var student={ name:"yuyang", age:18, gender:1, grade:99, info:function(){ //info是定义的方法的名字，在方法内部用对象的属性， //需要使用this 这个关键字 document.writeln(this.name+"'s grade is "+this.grade); } }; //student.info(); student.name="longxiaoyun"; student["age"]=0; student.info(); </script> View Code

第一种是一种常见的方式对象名.属性名，

第二种类似索引的方法，这种方法很好用，因为可以用变量来表现属性名

var a="gender"; student.info(); document.writeln(student[a]);

枚举对象属性

<script type="text/javascript"> var student={ name:"yuyang", age:18, gender:1, grade:99, info:function(){ //info是定义的方法的名字，在方法内部用对象的属性， //需要使用this 这个关键字 document.writeln(this.name+"'s grade is "+this.grade); } }; //student.info(); student.name="longxiaoyun"; student["age"]=0; var a="gender"; student.info(); document.writeln(student[a]); for(var key in student){ document.writeln("Name:"+key+" Value:"+student[key]); }; </script> View Code

结果如下

longxiaoyun's grade is 99 1 Name:name Value:longxiaoyun Name:age Value:0 Name:gender Value:1 Name:grade Value:99 Name:info Value:function (){ //info是定义的方法的名字，在方法内部用对象的属性， //需要使用this 这个关键字 document.writeln(this.name+"'s grade is "+this.grade); }

增删对象的属性

增加属性直接用圆点.

增加对象的方法也可以用圆点.   

 增加对象的方法，删除对象属性，判断这个对象有没有这个属性

<script type="text/javascript"> var student={ name:"yuyang", age:18, gender:1, grade:99, info:function(){ //info是定义的方法的名字，在方法内部用对象的属性， //需要使用this 这个关键字 document.writeln(this.name+"'s grade is "+this.grade); } }; //student.info(); student.name="longxiaoyun"; student["age"]=0; var a="gender"; student.info(); document.writeln(student[a]); //for(var key in student){ //document.writeln("Name:"+key+" Value:"+student[key]); //}; student.grade="one grade";//add attribute student.read=function(){ // add method document.writeln(this.name+" gender is "+this.gender); }; student.read(); document.writeln(student["grade"]); delete student.grade; //delete attribute or method if("grade" in student){// 判断对象的这个属性是否在这个对象里，注意！要加双引号，返回true or false document.writeln("OK"); }else{ document.writeln("not found"); } </script> View Code

 ARRAY object

创建一个数组

创建一个空数组

向数组插入元素

从数组删除某个元素

数组切片

数组排序（sort 按照ASCII码表排序）

将数组中的元素用某个符号连接为字符串

<script> var a=[1,2,3,4,5,6,7];//create array var a3=[];// create empty array console.log(typeof a3);// object a3.push(10);//从数组的最后面添加一个new element console.log(a3); var s=a.join("-");//将数组的元素用-连接为一个字符串 console.log(s); var a2=a.concat([5,6]);//连接，返回一个新的数组 console.log(a2); //alert(a.reverse());//将array反转 console.log(a); a.push(["a",7]);//从数组的最后面添加一个xi你的元素 a.pop()//从数组的最尾部删除一个元素 console.log(a); a.unshift(0);//从数组的最前面放置一个元素 a.shift()//从数组最前面删除一个元素 console.log(a); a.splice(2,3);//删除a数组的元素，2代表起始位置，3代表从索引位置开始删除的元素个数 console.log(a); //a.slice(0,2); alert(a.slice(0,2));//切片不会对原数组造成影响，0 start 2 end //a.pop(); //console.log(a); </script> View Code

date 对象

创建一个date 对象

注：每个对象都有一个toString()方法

<script> var date=new Date();//创建一个date对象 alert(date.toString()); </script> View Code <script> var date1=new Date(); alert(date1.toString()); var date2=new Date("2017-1-12 03:00:00"); alert(date2.toString("2017/12/31")); alert(date3.toString()); </script> View Code

date对象的获取日期时间的方法

获取日期和时间 getDate() 获取日 getDay () 获取星期 getMonth () 获取月（0-11） getFullYear () 获取完整年份 getYear () 获取年 getHours () 获取小时 getMinutes () 获取分钟 getSeconds () 获取秒 getMilliseconds () 获取毫秒 getTime () 返回累计毫秒数(从1970/1/1午夜) View Code

Math对象

//该对象中的属性方法 和数学有关. abs(x) 返回数的绝对值。 exp(x) 返回 e 的指数。 floor(x)对数进行下舍入。 log(x) 返回数的自然对数（底为e）。 max(x,y) 返回 x 和 y 中的最高值。 min(x,y) 返回 x 和 y 中的最低值。 pow(x,y) 返回 x 的 y 次幂。 random() 返回 0 ~ 1 之间的随机数。 round(x) 把数四舍五入为最接近的整数。 sin(x) 返回数的正弦。 sqrt(x) 返回数的平方根。 tan(x) 返回角的正切。 //方法练习: //alert(Math.random()); // 获得随机数 0~1 不包括1. //alert(Math.round(1.5)); // 四舍五入 //练习：获取1-100的随机整数，包括1和100 //var num=Math.random(); //num=num*10; //num=Math.round(num); //alert(num) //============max min========================= /* alert(Math.max(1,2));// 2 alert(Math.min(1,2));// 1 */ //-------------pow-------------------------------- alert(Math.pow(2,4));// pow 计算参数1 的参数2 次方. View Code

DOM

DOM 文档对象模型

 HTML  Document Object Model（文档对象模型）    HTML DOM 定义了访问和操作HTML文档的标准方法    HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构（节点树)

DOM节点

节点类型

HTML 文档中的每个成分都是一个节点。

DOM 是这样规定的：    整个文档是一个文档节点     每个 HTML 标签是一个元素节点     包含在 HTML 元素中的文本是文本节点     每一个 HTML 属性是一个属性节点

其中，document与element节点是重点。

节点关系

节点树中的节点彼此拥有层级关系。父(parent),子(child)和同胞(sibling)等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。

    在节点树中，顶端节点被称为根（root）    每个节点都有父节点、除了根（它没有父节点）    一个节点可拥有任意数量的子    同胞是拥有相同父节点的节点

节点查找

 

<head> <title></title> <style type="text/css"> .p1{ width: 300px;height: 200px;background-color: red; } .p2{width: 300px;height: 200px;background-color: green;} </style> <script> function foo(){ var put=document.getElementById("put-1"); put.value=""; } function valish(){ var put=document.getElementById("put-1"); if(!put.value){ put.value="用户名"; } } </script> </head> <body> <div class="p1"> <div class="c2" id="c2"></div> <input type="text" name="user_name" value="用户名" id="put-1" οnfοcus="foo()" οnblur="valish()"> <button type="submit">提交</button> </div> <div class="p2"></div> <script> var c2_cl=document.getElementsByClassName("c2")[0]; var p1 = c2_cl.parentElement; console.log(p1); var child=p1.children; for(var i=0;i<child.length;i++){ console.log(child[i]); } </script> </body> </html> View Code

导航节点属性

''' parentElement // 父节点标签元素 children // 所有子标签 firstElementChild // 第一个子标签元素 lastElementChild // 最后一个子标签元素 nextElementtSibling // 下一个兄弟标签元素 previousElementSibling // 上一个兄弟标签元素 ''' View Code

 节点操作

创建，添加，删除，替换

创建一个节点

var ele=document.createElement("元素名字")

ele.setAttribute("property","value")

添加一个节点， 要通过父元素添加节点

somenode.appendChild(newnode)    //节点会被添加到最后儿子节点

把增加的节点放到某个节点的前边 somenode.insertBefore(newnode,某个节点); 删除一个节点，也是通过父元素来实现 removeChild(newnode) replaceChild(newnode,oldnode)//替换节点 节点属性操作 添加一个属性   someone_node.setAttribute("属性名","value") 获得属性对应的value   someone_node.getAttribute("属性名","value")    <————————> node.属性名="vlaue"; 删除某个属性     some_node.removeAttribute("属性名") 获取节点的string 值 innerText innerHTML value获取当前选中的value值        1.input           2.select （selectedIndex）        3.textarea   innerHTML 给节点添加html代码：        该方法不是w3c的标准，但是主流浏览器支持            tag.innerHTML = “<p>要显示内容</p>”;

关于class的操作：

classList.add("class_name")

classList.remove("class_name");

改变CSS样式

someone_node.style.color="blue";

DOM event 事件

onclick 当用户点击某个对象时调用的事件句柄。 ondblclick 当用户双击某个对象时调用的事件句柄。 onfocus 元素获得焦点。 练习：输入框 onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证. onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动） onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交. onkeypress 某个键盘按键被按下并松开。 onkeyup 某个键盘按键被松开。 onload 一张页面或一幅图像完成加载。 onmousedown 鼠标按钮被按下。 onmousemove 鼠标被移动。 onmouseout 鼠标从某元素移开。 onmouseover 鼠标移到某元素之上。 onmouseleave 鼠标从元素离开 onselect 文本被选中。 onsubmit 确认按钮被点击。

 

 

 

 

 

 

       

转载于:https://www.cnblogs.com/yuyang26/p/7300140.html

相关资源：JavaScript权威指南