JavaScript基础和升级

JS简介:

JavaScript 是一种面向对象的动态脚本语言,是微软对ECMAScript规范的实现。它包含类型、运算符、标准内置( built-in)对象和方法。和java没啥关系。算是侵权了。

文档对象模型(DOM):
DOM描述了处理网页内容的方法和接口。
浏览器对象模型(BOM):
BOM描述了与浏览器进行交互的方法和接口。

js被引入的方式

    (1)内嵌脚本
        <input type="button" value="button" onclick="alert('xxx')" />           
    (2)内部脚本
        <script type="text/javascript">
            alert("xxx");
        </script>
    (3)外部脚本
        首先先创建一个js文件
        其次在html中引入
            <script type="text/javascript" src="demo1.js"></script>

    js代码放在哪?
        放在哪都行 但是在不影响html功能的前提下 越晚加载越好

JavaScript常用输出方式

document.write()
向文档写入
console.log()
将信息输出到浏览器的控制台
alert()
将信息以警告框的形式展现
innerHTML document.getElementById("placeholder").innerHTML = 'Hello World!!';
获取或者设置对象的HTML内容
javascript以分号作为结束符。漏掉分号可能会引起意想不到的错误。

JavaScript数据类型

ECMAScript的变量是松散类型的,所谓松散类型就是可以用来保存任何类型的数据。换句话说,每个变量仅仅是一个用于保存值的占位符而已。
ag.
1. var flag;
2. var flag = true;

JavaScript数据类型
1、String 可以使用单引号或双引号声明。
2、Number 它即可以表示32位整数,也可以表示64位浮点数。八进制首数字必须是0,十六进制使用0x开始。
3、Boolean true和false
4、Undefined 表示的是未初始化的变量
alert(message);//undefined
5、Null 表示尚未存在的对象,可以通过将变量的值设置为 null 来清空变量
null==undefined得到的结果是true.

var message = null;
alert(typeof message); // "object"

如果定义的变量准备在将来用于保存对象,那么最好将该变量初始化为null而不是其他值。这样只要直接
检查null值就可以知道相应的变量是否已经保存了一个对象的引用。如:
if(message != null){
// 对message进行某些操作
}

6、对象
var obj={"name":"javascript","age":21};
var obj2={};
访问对象属性,obj[‘name’]
判断name属性是否在obj对象中 ‘name’ in obj

创建对象时,如果任何一个属性需要添加引号,则所有引号必须添加引号。如果所有属性均不可添加引号,则所有属性不得添加引号。
可以使用instanceof运算符来判断对象的类型。

数据类型转换

自动转换规则

自动转换为布尔值
当JavaScript遇到预期为布尔值的地方,会将非布尔值的参数自动转换为布尔值,比如if语句的条件部分。

在使用==操作符时:
自动转换为字符串
字符串的自动转换,主要发生在加法运算时。当一个值为字符串,另一个值为非字符串,则后者转为字符串。
转换成String时,使用+‘’。
自动转换为数值
通常在执行算数运算的时候会自动转换成数值类型。
如果有一个操作数是布尔值,则在比较相等性之前先将其转换为数值——false转换为0,而true转换为1;
如果一个操作数是字符串,另一个操作数是数值,在比较相等性之前先将字符串转换为数值。
如果一个操作数是对象,另一个操作数不是,则调用对象的valueOf方法,用得到的基本类型值按照前面的规则进行比较。

全相等运算符(===) ,不发生数据转换

var a = 5;
var b = "5";
console.log("a === b ? " + (a === b));
//判断字符串是否为空
if(!name){
}

函数重复声明,会出现覆盖。以最后一次声明为准,和调用时间没关系。
变量只有全局作用域和局部作用域。
在局部作用域,就是把定义在后面的东东(变量或函数)的声明提升到前面中定义。
函数提升仅适用于函数声明,而不是用于函数表达式。
ag

var v="hello";
(function(){
    console.log(v);
    var v="world";
})();
结果显示undefined

说明:在函数作用域中,变量声明得到提升。
但是JS没有块作用域,ag

var v="hello";
if(true){
    console.log(v);
    var v="world";
};
显示hello

类型转换方法:

1.转换成String时,使用+‘’。
2.string 转换成 number,要转换的字符串结尾包含非数字并期望忽略时,使用 parseInt。
console.log(parseInt('200px'),10);
使用 parseInt 时,必须指定进制。
3.转换成 number 时,通常使用 +。
ag. +str;
number 去除小数点,使用 Math.floor / Math.round / Math.ceil,不使用 parseInt。
4.转换成 boolean 时,使用 !!。
var num=3.14; !!num;

关于Number类型:

有三个函数可以把非数值转换为数值:Number()、parseInt()、parseFloat()。
Number()可以用于任何数据类型,parseInt()和parseFloat()则专门用于把字符串转换成数值。
Number()函数的转换规则如下:
如果是Boolean值,true和false分别被转换为1和0。
如果是数字值,只是简单的传入和返回。
如果是null值,返回0。
如果是undefined,返回NaN。
如果是字符串,遵循以下规则:
如果只包含数字,忽略前导0将其转换为十进制,如果包含有效的浮点数,转换为十进制浮点数。
如果包含有效16进制,将其转换为10进制。
如果是空字符串,转换为0。
如果包含上述规则之外的字符,将其转换为NaN。

NaN,即非数值。与任何值都不相等,包括NaN自己。
isNaN()函数接收任何类型的参数,然后尝试转化为数值,不能转化的值导致函数返回true

其他类型转化为Boolean类型
Boolean(非空字符串) ;//true
Boolean(空字符串);//false
Boolean(非零数值);//true
Boolean(0和NaN);//false
Boolean(任何对象); //true
Boolean(null);//false
Boolean(undefined类型);//false

JSON

JSON 的全称是 JavaScript Object Notation(JavaScript 对象表示法)
是一种数据交换格式
JSON.stringify方法用于将一个值转为字符串
JSON.parse方法用于将JSON字符串转化成对象

BOM常用对象

document对象
每个载入浏览器的HTML文档都会成为Document对象
使我们可以从脚本中对HTML页面中的所有元素进行访问
可通过 window.document 对其进行访问

getElementById()返回对拥有指定 id 的第一个对象的引用
getElementsByName() 返回带有指定名称的对象集合

location对象 document.write(location.href);

DOM对象

innerHTML属性
获取指定节点中html内容
var elementsHTML = HTMLElementObject.innerHTML;
设置指定节点中html内容
HTMLElementObject.innerHTML= newHtmltext;

事件类型

load事件

window.onload = function () {
    console.log('loaded');
}

click事件
change事件

javascript输出
使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。

编程规范

1.不要在块内声明一个函数

//不要这样
if(x){
function foo(){}
}
这与ECMAscript原则相违背。如果确实需要,则建议使用函数表达式来初始化变量。
if(x){
var foo=function(){}
}

2.不要在循环体中包含函数表达式,事先将函数提取到函数体外

function clicker(){
}
for(var i=0,len=ele.length;i<len;i++){
    var ele = ele[i];
    addEle(ele,'click',clicker);
}

3.for-in语句是一种精准的迭代语句,可以用来枚举对象的属性。以下是for-in语句的语法。
for(property in expression) statement
ECMAScript中对象的属性没有顺序,因此,通过for-in循环输出的属性名的顺序是不可以预测的。
举例: Safari和Chrome遍历对象顺序不一致。

4.函数
匿名函数

一、
function square(number){
    ...
};
二、
var square = function(number){
    return number*number; };
var x = square(4);//16

三、
var fac = function fac(n){
    reurn n<2?1:n*fac(n-1);
};

升级-名字解析的顺序

语言内置>形式参数>函数声明>变量声明
如果名字相同,名字声明的优先级别高的会覆盖优先级别低的。但是名字初始化是按照书写顺序执行的。

var foo;
console.log(typeof foo);
function foo(){};
foo="123";
console.log(typeof foo);
结果是:
fuction
string

升级-arguments对象

函数的实际参数会被保存在一个类似数组的arguments对象中。在函数内,你可以按如下方式找出传入的
引数。
其中i是引数的序数编号,以0开始。所以第一个传来的参数会是arguments[0]。参数的数量由
arguments.length表示。

function myconcat(sepa){
var result="",
    i;
for(i=0;i<arguments.length;i++){
result=result+arguments[i]+sepa}
};
myconcat("-","red","green","black");
结果:
red-green-black-

另外 还有闭包,立即执行函数,放大模式,严格模式,构造函数等需要进一步学习和总结

升级-闭包:

找到比较通俗的对闭包的理解,闭包就是能够读取其他函数内部变量的函数。
由于在Javascript语言中,只有函数内部的子函数才能读取局部变量,因此可以把闭包简单理解成”定义在一个函数内部的函数”。

 function f1(){
    var n=999;
    function f2(){
      alert(n); //999
    }
    return f2;
  }
  var result=f1();
  result(); // 999

f2可以获得f1的n,f1外面可以获得f2的返回值。先简单理解到这儿。

发布了137 篇原创文章 · 获赞 123 · 访问量 25万+

猜你喜欢

转载自blog.csdn.net/lz20120808/article/details/76219917
今日推荐