JS 初探

作者: SmogZhang | 来源:发表于2017-12-05 23:56 被阅读0次

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种：

Undefined 只声明，不初始化的variable
Boolean
Null
数值型
整型、浮点型、NaN、finite（无限大）
字符串
对象类型

类型转换的方法：
String（）转为字符串类型
Boolean（）转为布尔类型
Number（）转为数值类型

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

类型自动转换的规则：

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

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

分支语句
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中的数组很灵活。
数组长度可变，元素类型可不唯一。

定义数组：

var arr1 = new Array();
Var arr2 = new Array(size);
Var arr3 = new Array(elemet1,element2,...,elements);
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 原型继承还有其它五种，不想看下去了。任性

每个对象都有prototype ，利用prototype可以实现继承：创建一个父类，在其构造器中添加属性，创建其行为函数，也可以在其prototype中添加属性和方法。
创建一个子类，其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

go()：加载history列表中的某个具体页面
Location对象：该对象包含当前URL的信息。访问方式：window.location
属性：1. href 设置或返回完整的URL（都是基于当前页面的）
host 当前主机名加URL端口号
Hostname 当前主机名
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啦。。。不吹了
结点：
可以说，文档就是由层次不同的多个节点组成，结点就代表了全部内容。

结点的类型：

元素结点element，也就是标签，
属性结点 attribute，标签的属性，
文本结点：文本内容，注意，空格也要算是文本内容

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

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

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

拿到引用，处理结点：

处理属性结点：
--元素结点”.”属性名称（可以读写属性值）这个只能操作元素默认的属性，自己添加的属性不能被获取，但是可以获取修改后的值。
--使用setAttribute（）、getAttribute设置和使用属性，这个只能操作固定的属性值，改变后，不能再获得修改后的值。

处理文本结点：
innerHTML：获取结点中所有内容，如果节点里面是html语句，会将它一起获取。
InnerText：只能获得text，无视html语句，专注文本。

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

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

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

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

document.getElementById(“formId”);
Document. FormName属性值
表单的属性
Id
Name
Action
Method
Enctype
Elements 获取所有表单域对象的一个数组：input textarea select
表单的方法
submit（）提交表单，调用这个方法可能不会运行onsubmit事件，设计缺陷
Reset（）重置表单
表单的事件：再表单对象上添加
onsubmit（）表单提交之前触发该事件
Onreset（）表单重置之前触发该事件

表单域

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

最后，利用Javascript改变文档的层次结构 API：

创建新节点 document.createElement(“tagName”);
插入子节点 fatherObject.appendChild(“newChild”);
在某个结点前插入子节点 fatherObject.insertBefore(“newChild”,”oldChild”);
替换子节点 fatherObject.replaceChild(“newChild”,”oldChild”);
删除子节点 fatherObject.removeChild(”node”);

JS 初探

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读