JS 初探

JavaScript简单介绍
① JavaScript是一种可以与HTML标记语言混合使用的脚本语言,其编写的程序可以直接在浏览器中解释执行。
② JavaScript与Java没有必然的联系。
③ JavaScript的国际标准时ECMAScript。

JavaScript是一种基于对象和事件驱动并且相对安全性的客户端脚本语言。同时也是一种广泛用于客户端web开发的脚本语言,常用来给HTML网页添加动态功能,比如响应用户的各种操作。它最初是由网景公司的设计人员设计,是一种动态、弱类型、基于原型的语言,内置支持类。JavaScript是sun公司的注册商标。
JavaScript实现包含三个部分:ECMAScript、文档对象模型、字节顺序记号。

如何使用js?
在HTML文档中插入脚本语言可以使用<script>标记。
使用要点:
<script>标记可以置于页面的任意位置
<script>定义函数一般置于<head>中
<script>可以直接写js语句
Jscript的变量和数据类型
变量
全局变量:
1)在方法外部定义的变量是全局变量
2)在方法内部不加var关键字的变量是全局变量

局部变量:
1)在方法内部定义的变量是局部变量

补充:
Javascript:void(0); 用于超链接(表示点击超链接,执行完函数后,不会跳转)
Javascrpt 伪协议

变量命名规则:
和Java保持一致即可

数据类型 6种:

  1. Undefined 只声明,不初始化的variable
  2. Boolean
  3. Null
  4. 数值型
    整型、浮点型、NaN、finite(无限大)
  5. 字符串
  6. 对象类型

类型转换的方法:
String() 转为字符串类型
Boolean()转为布尔类型
Number()转为数值类型

“===” 等同符,不会发生数据类型的自动转换
“==” 等值符,会发生数据类型的自动转换

类型自动转换的规则:

  1. 对于string、number、Boolean这三者来讲,他们之间互相比较时,不为数字的那一方自动调用Number()方法;
  2. 对于undefined和null来讲,这两者互相相等,除此之外,与其它任何数据都不等;
  3. NaN非常特殊,与别的类型都不等,甚至连自身也不相等;
  4. 对象和对象之间的比较,比较的是引用地址。对象和非对象之间的比较,对象会先调用toString()方法转为字符串;
  5. 对象加!表示强转Boolean,任何对象加上!都表示false。
  6. 以上都是类型不同时才会自动转换,如果类型相同,不用转换的哟。

表达式与运算符
....
运算符的优先级:
在复杂的表达式中往往会综合各种不同类型的运算符,而表达式的运算顺序有一定的规则:首先应该按照运算符的优先次序从高到低的顺序,其次,优先级相同的运算符按照事先约定的结合方向进行。(废话)

分支语句
If...else语句
Switch (expression)case constant:语句块 break;...default 语句块n
循环语句
While
Do...while
Break与continue;

For 与 foreach

增强for循环:for(var a in list) 注意,a是list的索引(下标)

数组
数组即一组数据的集合,JavaScript中的数组很像Java中的list。JavaScript中的数组很灵活。
数组长度可变,元素类型可不唯一。

定义数组:

  1. var arr1 = new Array();
  2. Var arr2 = new Array(size);
  3. Var arr3 = new Array(elemet1,element2,...,elements);
  4. Var arr4 = [element1,element2,...,elements];

属性:
Length:JS数组长度随时可变!随时可以修改,可以利用数组长度清空数组。Length=0;

方法:
Concat() 拼接数组
Join(String) 参数为数组元素分隔符,tostring默认时’,’
Push() 在数组结尾添加元素,并返回新数组的长度
Pop() 弹出最后一个元素,返回最后一个元素的值
Shift() 弹出头部的元素,即第一个元素
Unshift() 从数组头部插入元素,返回新数组长度
Slice() 相当于java中字符串的subString()方法

函数
一个典型得JavaScript函数定义如下:
Function fName(parameter...) {

函数体;
}
参数列表直接写参数名即可,不用写var

Return 语句:
Return 返回函数得返回值并结束函数运行
Return 语句的语法:
Return 表达式

当使用return语句的时候,要得到函数的返回值,只要利用函数名对一个变量赋值就可以了。
函数也是对象。
函数的另一种定义方式 var fName = function(){}
函数可以作为参数传递,当函数作为实参传递给一个方法时,直接在后面加()表示调用该方法。
对象机制
JS中所有都是对象,可以看成是object的衍生物。
JS只是基于对象并非面向对象。它的面向对象特性没有Java那么强大

JS中类的典型定义方式
function Person(name , age) {
This.name = name;
This.age = age;
This.study = function(){
Alert(“lalala”);
}
}
Var student = new Person(“aa”,19);

继承的实现
JS中继承的实现:prototype 原型继承 还有其它五种,不想看下去了。任性

  1. 每个对象都有prototype ,利用prototype可以实现继承:创建一个父类,在其构造器中添加属性,创建其行为函数,也可以在其prototype中添加属性和方法。
  2. 创建一个子类,其prototype指向父类,经过proto链,能在其prototype中与其父类的属性和方法链接起来,当然也包括父类的prototype中的属性和方法。

具体测试方法及代码我在下面贴出来,是自己探讨JS内存的第一步!
<script type="application/javascript">

    //定义一个动物类
    function Animal(name) {
        //属性
        this.name = name;
        //实例方法
        this.sleep = function () {
            console.log(this.name + " is sleeping !");
        }
    }
    //原型方法 prototype
    Animal.prototype.eat = function (food) {
        console.log(this.name + " is eating: "+ food);
    };
    /*var animal = new Animal("laow");
    console.log(animal);*/
    /*
        创建一个类Animal,自身属性和方法是name和sleep,然后给其prototype添加一个eat方法
        new一个Animal出来,会在内存中创建一个对象,其属性和方法分别是name和sleep,然后它的
        prototype属性里面有一个方法eat。其最终指向一个object。。继续
    */
    //创建一个类 Cat 用来继承Animal
    function Cat() {

    }

// Cat.prototype = new Animal("Asan"); // Cat类的prototype指向一个Animal对象
//看一下这个Cat
//console.log(Cat);
//output: f Cat(){} 但是查看内存会发现,里面有一个Animal对象,说明这个Cat的prototype指向了该内存
//现在创建一个cat
/var cat = new Cat();
console.log(cat);
/
//输出一只cat,查看内存发现,cat没有自身属性,除了prototype,其中有name和sleep方法,还有一个prototype
//这个属于Animal的,这个proto含有eat方法和Animal的constructor。
//现在创建子类的属性,看能否覆盖父类的属性,或者方法。
/function Dog(name) {
this.name = name;
this.sleep = function() {
console.log(this.name + " Dog is sleeping !");
}
}
/
function Dog() {

    }

// Dog.prototype = new Animal("Asi");//创建父类对象,dog类prototype指向其内存空间,实现继承
var dog = new Dog("LaoW");
console.log(dog);//创建dog对象并打印
//output:原型类中的属性和方法并没有丢失,现在调用该类方法,证实自己的猜测,prototype用不上。
console.log(dog.name);
// console.log(dog.sleep());
//output: LaoW Dog is sleeping ! 事实证明原型中的属性和方法虽然没有丢失,但是会跳过
//接下来dog调用eat方法,
// console.log(dog.eat("shit"));
//output:LaoW is eating: shit 有点意外,没想到LaoW是这样的。但是可以证明这里this.name指的是调用者dog的name

    /*
       结论:还不能妄下结论,,,还得继续往下看
    */
    //现在利用cat来修改原型中Animal的值
    var cat = new Cat();
    //cat.name = "TangW";
    console.log(cat.name);
    function Pig() {

    }
    var pig = new Pig();
    pig.name = "XiaoZ";
    console.log(pig);
    /*
    我有点写不下去了,目前探究为止,我觉得JS真是个奇葩的语言,是不是我理解不够深入。
    这个继承有点让人难受,或者我可以这么做。不过我得先说一下现况。
    我利用Cat和Dog分别继承了Animal,记住:是伪类,其实是对象。cat和dog对象都能拿到animal中的值,但是
    你若在创建子类对象重新赋值了属性,那么不会得到这个父对象的值。又因为是对象,所以内存中会占有它的
    内存空间,但是它的属性又用不上,而且是继承的对象,所以每个子类都有可能是继承不一样的对象值。
    最主要的是,我们好像不能修改这个父对象,你只能取它的值,因为你在用相同的属性,希望修改它时,其实
    是在自己的对象中新添了一个与其属性名一样的属性。我觉得很尴尬,如果能修改,我觉得更尴尬。
    下面我将cat和dog继承一个“类”试试。
     */
    var animal = new Animal("LaoMei");//注释掉前面的prototype指向,顶头的注释
    Cat.prototype = animal;
    Dog.prototype = animal;
    var catSameProto = new Cat();
    var dogSameProto = new Dog();
    console.log(catSameProto);
    console.log(dogSameProto);
    catSameProto.name = "zhangsan";
    dogSameProto.name = "lisi";
    catSameProto.age = 22;
    dogSameProto.age = 24;
    console.log(catSameProto.name);
    console.log(dogSameProto.name);
    console.log(catSameProto.age);
    console.log(dogSameProto.age);
    /*
    事实证明,之前没有理解new 一个父类的具体含义,其实是开辟一块内存空间,然后子类指向这个对象,也可以多个都指向它,共享它的属性和方法
    到目前为止,我还不知道怎么修改这个prototype里面的值。
    倘若子类对象中也有这个属性,则会跳过prototype里面的属性。子类对象的赋值很简单,直接"对象.属性名=值"就好。
    子类对象可以调用prototype中的方法,并且其中的this会指向这个子类对象,很方便。
    所以我觉得,其作用更像接口,可以公用方法,因为属性大多数的对象都是不会相同的。
     */
    //最后试一下修改prototype中的属性
    Cat.prototype.name="XiaoRiBen";
    console.log(Cat.prototype.name);//output:XiaoRiBen
    console.log(Dog.prototype.name);//output:XiaoRiBen
    //好吧,这个共享"父类"其实是可以修改的,只是并不是用对象,而是使用类修改的,类名.prototype.属性名=value。
</script>

更多memory 总结看:JSmemory.doc

常见内置对象
时间对象
Math对象
String对象

时间对象Date 需要new
Math对象 不需要new 都是静态方法之类的
String对象就是对字符串的各种操作,

没啥好写的,不懂翻API好吧。
Pass!

Bom 与 Dom
Bom与Dom才是主题,有一个图,我扒过来的,可以很好说明我们后端需要学哪些。

Bom :Browser object model 也就是浏览器对象模型,主要是理解浏览器,所以我们得知道window对象
Window对象
Window对象:W3C中的解释:
window对象表示一个浏览器窗口或一个框架(frame,iframe标签)。在客户端JavaScript中,window对象是全局对象,所有的表达式都在当前的环境中计算。也就是说,要引用当前窗口根本不需要特殊的语法,可以把那个窗口的属性作为全局变量来使用。
从我扒过来的图也可以看得出来,window对象是浏览器对象中其它大部分对象的共同的祖先,所以很多JS程序中都省略了window对象。例如:可以只写document,不必写window.document。
学习一个对象无非是学习它的属性和方法,在w3c中,可以很清楚的知道各个属性和方法的含义,这里我列举一些比较重要的。也就是上图中的(document放在Dom中总结)

Window对象属性:
History: history对象包含用户在浏览器窗口中访问过的URL(有点像前进、后退的那两个箭头。)
这里只看它的方法:1. back():加载history列表中的前一个URL
2. forward() : 加载history列表中的下一个URL

  1. go():加载history列表中的某个具体页面
    Location对象:该对象包含当前URL的信息。访问方式:window.location
    属性:1. href 设置或返回完整的URL(都是基于当前页面的)
  2. host 当前主机名加URL端口号
  3. Hostname 当前主机名
  4. Port 当前端口号
    方法:reload() 重新加载当前文档
    Navigator对象:Navigator 对象包含的属性描述了正在使用的浏览器。
    知道一个属性:userAgent 用户代理
    Window.navigator.userAgent 返回由客户机发送服务器的user-agent头部值。

Window方法:
Alert():警告框
Confirm():确认框
Prompt():提示输入框
SetTimeout():定时器
SetInterval():间隔提示器
clearTimeout():取消定时,需要定时器返回的id
ClearInterval():取消间隔提示,同样需要其返回的id

具体不说了,没意思,不记得了可以去w3c中看
Bom结构
Bom结构就是文档对象,可以看成树形结构,其实这个有点像以前学的dom4j解析技术,应该是一样的,只是一个用在JavaScript 一个用于Java。
Dom是重点,在Ajax开发中,DOM模型其实是最核心结构,是所有Ajax开发的基础架构。如果没有DOM模型,就没有办法在客户端改变页面的内容,所有的局部刷新,异步请求也就无从实现。所以,好啦我还没学过Ajax啦。。。不吹了
结点:
可以说,文档就是由层次不同的多个节点组成,结点就代表了全部内容。

结点的类型:

  1. 元素结点element,也就是标签,
  2. 属性结点 attribute,标签的属性,
  3. 文本结点 :文本内容,注意,空格也要算是文本内容

中间的text就是文本结点,文本结点和属性结点都看作元素结点的子节点

元素结点的引用,也可以看出是选择器吧,个人觉得。就是根据某个特征定位选取结点。
直接引用:

  1. document.getElementById(“id”);
  2. Document.getElementByName(“name”);
  3. Document.getElementByTagName(“tagName”);
    间接引用(说实话,这个引用很。。。不知道Ajax中使用情况怎么样)
  4. 引用子节点:childNodes、firstChild、lastChild
  5. 引用父节点:parentNode
  6. 引用兄弟结点:element.nextSibling、element.previousSinling;

拿到引用,处理结点:

  1. 处理属性结点:
    --元素结点”.”属性名称(可以读写属性值)这个只能操作元素默认的属性,自己添加的属性不能被获取,但是可以获取修改后的值。
    --使用setAttribute()、getAttribute设置和使用属性,这个只能操作固定的属性值,改变后,不能再获得修改后的值。
  1. 处理文本结点:
    innerHTML:获取结点中所有内容,如果节点里面是html语句,会将它一起获取。
    InnerText:只能获得text,无视html语句,专注文本。

当然,DOM模型不会这么简单,还有各种操作结点的方法,以及改变文档的层次结构,动态的添加、删除、修改标签。其实DOM是最适合对文档结构修改的技术,像XPath这种解析技术,适用与查询。用到再深入学习吧。

最后有个很有用的技术,利用Javascript操作CSS,即动态改变标签的衣服。

  1. 通过style对象改变结点的css
    --利用style对象来控制元素的css,每个style对象对应为该元素指定的css,而每个css属性一一对应于style对象的属性。
    对于单个单词的css属性,再style对象中的属性名称不变。
    对于双单词或多单词的属性改写为驼峰写法。例如:css中的font-size对应style属性为fontSize。
  2. 使用className属性指定结点样式
    --结点的className属性对应于css中的类选择器

我觉得这个bom还是值得练习,好好试一番的。还是写一下表单吧,我们用的最多的也就是表单了。
表单对象的获取

  1. document.getElementById(“formId”);
  2. Document. FormName属性值
    表单的属性
  3. Id
  4. Name
  5. Action
  6. Method
  7. Enctype
  8. Elements 获取所有表单域对象的一个数组:input textarea select
    表单的方法
  9. submit() 提交表单,调用这个方法可能不会运行onsubmit事件,设计缺陷
  10. Reset() 重置表单
    表单的事件:再表单对象上添加
  11. onsubmit() 表单提交之前 触发该事件
  12. Onreset() 表单重置之前 触发该事件

表单域

  1. document.getElementById(“id”)
  2. Document.formName.fieldName document.formname.inputname
    表单域的通用属性
  3. readonly=”readonly” 只读,不能修改但可以提交该数据
  4. Disabled=”disabled” 不可用,不能提交数据
  5. Type like text password button and so on
  6. Value
  7. Name
  8. Id
  9. Form 过去表单域对象所在的表单对象
  10. Focus() 某个表单域对象获取焦点
  11. Blur() 某个表单域对象丢失焦点

最后,利用Javascript改变文档的层次结构 API:

  1. 创建新节点 document.createElement(“tagName”);
  2. 插入子节点 fatherObject.appendChild(“newChild”);
  3. 在某个结点前插入子节点 fatherObject.insertBefore(“newChild”,”oldChild”);
  4. 替换子节点 fatherObject.replaceChild(“newChild”,”oldChild”);
  5. 删除子节点 fatherObject.removeChild(”node”);
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,511评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,495评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,595评论 0 225
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,558评论 0 190
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,715评论 3 270
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,672评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,112评论 2 291
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,837评论 0 181
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,417评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,928评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,316评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,773评论 2 234
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,253评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,827评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,440评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,523评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,583评论 2 249

推荐阅读更多精彩内容

  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 7,615评论 2 17
  • 上期链接 原文于2016-7-20首发 第二周的学习跌跌撞撞地继续,完成了港科大布置的JavaScript的大作业...
    feiben阅读 639评论 1 3
  • 今天被自己的个性扎痛了。 还是自己太蠢了。 这算什么,我微笑面对吧 。
    疏瘦阅读 151评论 0 0
  • 我们应该祝贺别人的优秀 正如我们自己渴望变好
    灼见阅读 83评论 0 0
  • 本来今晚由我为大家分享咖啡冥想内容,由于意外事件,延迟分享,未来得及报告群主宝凤老师,深深忏悔!感恩惠兰老师救场,...
    如意宝阅读 173评论 2 4