首页 > > 网页制作 > Javascript >

Web前端——JS----细节

2018-06-24 00:49:27来源：未知阅读 ()

1、JavaScript可以做什么？

事件可以用于处理表单验证，用户输入，用户行为及浏览器动作：

1）页面加载时触发事件

2）页面关闭时触发事件

3）用户点击按钮执行动作

4）验证用户输入内容的合法性

可以使用多种方法执行JavaScript事件代码：

1）HTML事件属性可以直接执行JavaScript代码

2）HTML事件属性可以调用JavaScript函数

2、JavaScript有四种不同的方式输出数据：

1）使用windows.alert()弹出警告框。

2）使用document.write()方法将内容写到HTML文档中。

3）使用IinnerHTML写入到HTML元素。相比于document.write()更加精准。

4）使用console.log()写入到浏览器的控制台。

3、JavaScript共有7种数据类型：

1）字符串（String）　　

2）数字（Number）

3）布尔（Boolean）

4）数组（Array）————数组是一种特殊的对象类型

5）日期（Date）————日期也是一种对象类型

6）对象（Object）

7）函数（function）

8）空（Null）

9）未定义（Undefined）

4、常见的HTML事件：

1）onchange：HTML元素改变

2）onclick：用户点击HTML元素

3）onmouseover：用户在一个HTML元素上移动鼠标

4）onmouseout：用户从一个HTML元素上移开鼠标

5）onkeydown：用户按下键盘按键

6）onload：浏览器已完成页面的加载

5、JavaScript事件：HTML事件是发生在HTML元素上的事情。当HTML页面中使用JavaScript时，JavaScript可以触发这些事件。

HTML事件可以是浏览器行为，也可以是用户行为。HTML事件常在有以下行为时发生：

1）HTML页面完成加载。

2）HTML input字段改变时。

3）HTML按钮被点击。

6、JavaScript共有两种注释。单行注释以“//”开头。多行注释以“/*”开头，以“*/”结束。

1）单行注释用于阻止其中一行代码的执行。

2）多行注释用于阻止代码块的执行。

3）注释还可用于调试。

7、JavaScript创建数组共有3种方法。如下：

1）var cars=new Array();

cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";

2）var cars=new Array("Saab","Volvo","BMW");

3）var cars=["Saab","Volvo","BMW"]; 最后一个数组元素不能添加逗号，对象亦是。

注意：当数组中的个数较少时我们通常用2或3的方法，当数组中的个数较多时我们通常用1的方法。在JavaScript中，我们习惯数组下表从0开始。所以当我们用for语句遍历整个数组中的数值时只需变量i<car.length即可。

8、document.write()仅仅向文档输出内容，如果在文档已完成加载后执行document.write()，整个HTML页面将被覆盖。

9、在文本字符串中可以对代码行进行折行。

//这两行代码是等效的
document.write("你好世界")；
document.write("你好\
世界")；

10、应用注释符号验证浏览器是否支持JavaScript脚本功能。

如果用户不能确定浏览器是否支持JavaScript脚本，那么可以应用HTML提供的注释符号进行验证。HTML注释符号是以结束的。如果在此符号内编写JavaScript脚本，对于不支持JavaScript的浏览器，将将会把编写的JavaScript脚本作为注释处理。

11、在JavaScript中，用“var”声明变量。var会自动识别变量的类型。

1）变量是用于存储信息的“容器”。

2）JavaScript变量能保存不同的数据类型。比如文本值 (name="Bill Gates")。

3）JavaScript变量有很多种类型，现在我们只研究数字和字符串。

4）当我们向变量分配文本值时，应该用双引号或单引号包围这个值。

5）当我们向变量赋的值是数值时，不要使用引号。如果我们引用包围数值，该值会被作为文本来处理。

12、在JavaScript字符串中，字符串可以是任意的文本。可以使用单引号或双引号，并且我们可以在字符串中使用引号，只要不匹配包围字符串的引号即可。

13、布尔（逻辑）只能有两个值：true或false。布尔常用在条件测试中。

14、对象、日期、数组、布尔、算数（Math）、RegExp修饰符（正则表达式）（注意：一切事物皆对象）

1）JavaScript定义/创建对象：

//使用对象字面量，将函数用做方法     （形如如下所示，定义对象主要有其属性和方法。）
var person = {
    firstName: "John",
    lastName : "Doe",
    id : 5566,
    fullName : function() 
    {
       return this.firstName + " " + this.lastName;
    }
};


//javascript对象也可以先创建，再添加属性和属性值，比如：
var person=new Object();
person.name='小明'；
person.sex='男'；
person.method=function(){
  return this.name+this.sex;
}


//第三种方法
var Person=new Object();
Person["name"]="Sun";
Person["age"]=24;

注：最后的分号不能丢。

2）创建日期对象

var myDate=new Date();  //获取的是当前的日期

3）创建数组对象

//1.常规方式
var myCars=new Array(); 
myCars[0]="Saab";       
myCars[1]="Volvo";
myCars[2]="BMW";


//2.简洁方式
var myCars=new Array("Saab","Volvo","BMW");


//3.字面
var myCars=["Saab","Volvo","BMW"];

4）创建布尔对象

var myBoolean=new Boolean();

5）创建算数（Math）

var x=Math.PI;
var y=Math.sqrt(16);

6）创建RegExp对象

var patt=new RegExp(pattern,modifiers);

//或更简单的方法

var patt=/pattern/modifiers;

对象只是一种特殊的数据。对象拥有属性和方法。
访问对象的属性：属性是与对象相关的值　　语法：objectName.propertyName
访问对象的方法：方法是能够在对象上执行的动作语法：objectName.methodName()
在JavaScript中，this通常指向的是我们正在执行的函数本身，或者是指向该函数所属的对象（运行时）
通过指定数组名以及索引号码，你可以访问某个特定的元素。　　var name=myCars[0];

NaN-非数字值

1）NaN 属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。

2）用 isNaN() 全局函数来判断一个值是否是 NaN 值。如果 isNaN() 值为真，则返回true，否则返回false。

15、JavaScript作用域：

1）在JavaScript中，作用域为可访问变量，对象，函数的集合。作用域在函数内修改。

2）局部变量：在函数中通过var声明的变量。局部变量在声明的函数外不可以访问，只能在函数内部访问。

3）在函数外通过var声明的变量。全局变量所有脚本和函数均可使用。

4）如果变量在函数内没有声明（没有使用var关键字），改变量为全局变量。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript" src="js/new_file.js" ></script>
    </head>
    <body>
        <!--局部变量在声明的函数外不可以访问-->
        <p id="demo"></p>
        <p id="demo1"></p>
        <!--全局变量在任何脚本和函数内均可访问-->
        <p id="demo2"></p>
        <p id="demo3"></p>
        <!--如果你的变量没有声明，它将自动转换为全局变量-->
        <p id="demo4"></p>
    </body>
</html>

window.onload=function()
{
    //定义全局变量
    var carName1="Volvo"
    //调用函数
    myFunction();
    //函数外访问局部变量
    document.getElementById("demo").innerHTML="carName的类型是："+typeof carName;
    //函数外访问全局变量
    document.getElementById("demo2").innerHTML="我可以显示"+carName1;
    //如果你的变量没有声明，它将自动成为全局变量
    document.getElementById("demo4").innerHTML="我可以显示"+carName2;
    
    function myFunction(){
        //定义局部变量
        var carName="Volvo";
        //函数内访问局部变量
        document.getElementById("demo1").innerHTML="carName的类型是："+typeof carName;
        //函数内访问全局变量
        document.getElementById("demo3").innerHTML="我可以显示"+carName1;
        //没有声明变量
        carName2 = "Volvo";
    }
    
}

效果图如下图所示：

16、在JavaScript中，想要利用HTML标签使文档效果更好时要将HTML标签放在双引号或单引号之间。比如：document.write("<p>"+txt.length+"</p");

17、在JavaScript中，“==”和“===”的区别?

1）对于string、number等基础类型之间比较，==和===是有区别的

不同类型之间比较，==之间比较是“转换成同一类型”后看“值”是否相等。值相等则相等，值不等则不相等。===如果类型不同，其结果就是不相等。
同类型之间比较，直接进行“值”比较就行。

2）对于Array、Object等高级类型之间比较，==和===是没有区别的，直接进行“指针地址”比较。

3）对于基础类型与高级类型，==和===是有区别的

对于==，将高级类型转化为基础类型，进行“值”比较。
对于===，因为类型不同，其结果为false。

4）!=为==的非运算，!==为===的非运算。

var num = 1;
 
var str = '1';
 
var test = 1;
 
test == num   //true　相同类型　相同值
 
test === num  //true　相同类型　相同值
 
test !== num  //false test与num类型相同，其值也相同,　非运算肯定是false
 
 
num == str   //true 　把str转换为数字，检查其是否相等。
 
num != str   //false  == 的 非运算
 
num === str  //false  类型不同，直接返回false
 
num !== str  //true   num 与 str类型不同 意味着其两者不等　非运算自然是true啦

18、JavaScript运算符：

1）如需把两个或多个字符串连接起来，要使用+运算符。

2）要想在两个字符串之间增加空格，需要把空格插入在一个字符串中或者把空格插入在表达式中。

19、常见的不同类型运算的转换方式：

1）字符串和数字相加，数字转成字符串。

2）数字和布尔值相加，布尔值false转成0，true转成1。

3）字符串与布尔值相加，布尔值转化成字符串。

注意：

空文本+数字得到的运算结果都是把数字转成字符串，无论文本有多少个空格。但是空格会计入人长度。
数字与null（空值）相加，null转化为数字0。
字符串与null（空值）相加，null转化为字符串。
取模运算的结果符号只与左边的符号有关。

var one="This is a test";
var two=123;
var three=one+two;

// 结果：three:This is a test123


var one=13;
var two=true;
var three=one+two;
// 结果 three:14


var car=null+3+4;    // 结果为7


var car=null+"a";    // 结果为 nulla


var x = 7 % 3; // 结果为 1
var y = 7 % (-3); // 结果为 1
var z = (-7) % 3; // 结果为 -1

25、常见的几种数据类型之间的相互转换

1）将数字转换为字符串：

1. 1. 全局方法String()可以将数字转换为字符串。该方法可用于任何类型的数字、字母、变量、表达式。————String()
  2. toString()方法将数字转换为字符串。————toString()

2）将字符串转换为数字：全局方法Number()可以将字符串转换为数字。

1. 1. 字符串包含数字（如“3.14”）转换为数字（如“3.14”）。
  2. 空字符串转换为0。
  3. 其他的字符串会转换为NaN（不是数字）。

3）将布尔值转换为字符串：

1. 1. 全局方法String()可以将布尔值转换为字符串。————String()
  2. toString()方法将布尔值转换为字符串。————toString()

4）将布尔值转换为数字：全局方法Number()可将布尔值转换为数字。

5）将日期转换为字符串：Date 方法

1. 1. Date()方法返回字符串。————Date()
  2. 全局方法String()可以将日期对象转换为字符串。————String()
  3. toString()方法将日期对象转换为字符串。————toString()

6）将日期转换为数字：

1. 1. 全局方法Number()可将日期转换为数字。
  2. 也可用方法getTime()将日期转换为数字。

7）自动转换类型：当javascript尝试操作一个“错误”的数据类型时，会自动转换为“正确”的数据类型。

8）自动转换为字符串：当你尝试输出一个对象或一个变量时，javascript会自动调用变量的toString()方法。

20、break和 continue语句

1）break语句可用于跳出循环（break语句只能用在循环或switch中，continue语句只能用在循环中）

2）continental语句跳出循环后，会继续执行该循环之后的代码（如果有的话）

21、JavaScript标签

通过标签引用，break语句可用于跳出任何JavaScript代码块

<p id="bqian"></p>
<script type="text/javascript">
    outerloop:
    for(var i=0; i<10; i++){
        innerloop:
        for(var j=0; j<10; j++){
            if(j>3){
                break;
            }
                    
            if(j==2){
                break innerloop;
            }
                    
            if(j==4){
                break outerloop;  
            }
                    
                    
            document.getElementById("bqian").innerHTML="i="+i+" j="+j+"";
        }
    }    
</script>

结果：i=9 j=1

22、typeof 操作符

1）使用typeof 操作符可以检测变量的数据类型。

2）在javascript 中null表示“什么都没有”，null是一个只有值的特殊类型，表示一个空对象引用。故用typeof 检测null返回是object。

3）在javascript中，undefined是一个没有设置值的变量。typeof一个没有值的变量会返回undefined。

4）任何变量都可以通过设置值为undefined来清空。类型为undefined。

23、undefined和null的区别

24、javascript类型转换：javascript变量可以转换为新变量或其他数据类型。

1）通过使用javascript函数

2）通过javascript自身自动转换

26、javascript错误——try catch　

try......catch语句将能引发错误的代码放在try块中，并且对应一个响应，然后有异常抛出。

//语法
try {
      //需要被执行的语句        
} catch(err) {
      //如果在try块里有异常被抛出时被执行的语句
}

try......catch详细解读链接

27、href=“#”与href=“javascript:void(0)”的区别：

1）#包含了一个位置信息，默认的锚是#top也就是网页的上端。

2）而javascript:void(0)，仅仅表示一个死链接。

3）在页面很长的时候会使用#来定位页面的具体位置，格式为：#+id。

28、javascript代码规范

代码规范通常包括以下几个方面：（规范的代码可以更易于阅读与维护）

变量和函数的命名规则
空格、缩进、注释的使用规则。
其他常用规范...........

1）变量和函数：使用驼峰命名法（camelCase）　　即：除第一个单词的首字母为小写外其余单词的首字母都为大写。

　　　　特别地：全局变量为大写、常量为大写。

2）空格与运算符：通常运算符（= + - * /）前后需要添加空格。

3）代码缩进：通常使用4个空格符号来缩进代码块。（不推荐使用TAB键来缩进，因为不同编辑器TAB键的解析不一样。）

4）语句规则：

一条语句通常以分号作为结束符。
将左花括号放在第一行的结尾。
左花括号前添加一空格。
将右花括号独立放在一行。
不要以分号结束一个复杂的声明。

5）对象规则：

将左花括号与类名放在同一行。
冒号与属性值间有个空格。
字符串使用双引号，数字不需要。
最后一个属性-值对后面不要添加逗号。
将右花括号独立放在一行，并以分号作为结束符号。

29、JavaScript函数定义

1）函数声明

function functionName(parameters) {

　　执行的代码

}

2）函数表达式

javascript函数可以通过一个表达式定义，函数表达式可以存储在变量中。

var x = function(a,b) { return a*b };

上述函数以分号结尾，因为它是一个执行语句。

3）Function()构造函数

var myFunction = new Function("a","b","return a*b");

函数定义作为对象的属性，称之为对象方法。函数如果用于创建新的对象，称之为对象的构造函数。

如果函数调用前使用了new关键字，则是调用了构造函数。这看起来就像创建了新的函数，但实际上JavaScript函数是重新创建的对象。

4）函数提升（Hoisting）：提升应用在变量的声明与函数的声明。因此，函数可以再声明之前电调用。

5）自调用函数：

函数表达式可以 "自调用"。

自调用表达式会自动调用。

如果表达式后面紧跟 () ，则会自动调用。

不能自调用声明的函数。

通过添加括号，来说明它是一个函数表达式：

自调用函数是先计算前面括号的值，然后执行这个返回值。

基本语法如下：

例：

(function myFunction(a,b) {

　　document.getElementBId("xxx").innerHtml = a+b；

})(1，2);

30、arguments.length属性返回函数调用过程接受到的参数个数。

31、JavaScript函数调用隐式对象arguments

js在函数调用时会创建一个隐式的对象arguments。arguments包含了函数调用时实际传递给函数的参数数组对象。简单的说就是js在调用函数时，其函数的实参会产生一个隐式的数组对象。

例：通过这种方式可以找到被调用函数实参的“最大值”或者创建一个函数用来统计所有数值的和。

32、this关键字：一般而言，在JavaScript中，this指向函数执行时的当前对象。（this是保留关键字，不能修改this的值）

33、在HTML中默认的全局对象是HTML页面本身，所以函数是属于HTML页面。在浏览器中的页面对象是浏览器窗口（window对象）。

34、JavaScript的this用法

随着函数使用场合的不同，this的值会发生变化。但是有一个总的原则，那就是this指的是，调用函数的那个对象。

35、函数既可以访问由函数内部定义的变量也可以访问函数外部定义的变量。

36、在web页面中全局变量属于window对象，全局变量可应用于页面上的所有脚本。

37、JavaScript支持嵌套函数。嵌套函数可以访问上一层的函数变量。

38、当网页被加载时，浏览器会创建页面的文档对象模型（DOM）

通过可编程的对象模型，JavaScript获得了足够的能力来创建动态的HTML

1）JavaScript能够改变页面中的所有HTML元素

通过id找到HTML元素　　
通过标签名查找HTML元素
通过类名找到HTML元素

var x=document.getElementById("intro");
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
var x=document.getElementsByClassName("intro");

2）JavaScript能够改变页面中的HTML内容

document.write()
document.getElementById(id).innerHTML=新的 HTML

3）JavaScript能够改变页面中的所有HTML属性

document.getElementById(id).attribute=新属性值

4）JavaScript能够改变页面中的所有CSS样式

document.getElementById(id).style.property=新样式

5）JavaScript能够对页面中的所有事件做出反应。

onclick——————————————比如当用户在HTML元素上点击时
onload和onunload—————————在用户进入或离开页面时被触发
onchange—————————————常结合对输入字段的验证来使用
onmouseover和onmouseout—————用于在用户的鼠标移至HTML元素上方或移出元素时触发函数
onmousedown和onmouseup—————鼠标点击或者完成点击时（区别于4）
onfocus——————————————当输入字段获得焦点时发生相应的事件

....................................

字符串：

1）一个字符串可以使用单引号或双引号

2）使用位置（索引）可以访问字符串中任何的字符

var carname="Volvo XC60";

var character=carname[7];

3）字符串的索引从零开始, 所以字符串第一字符为 [0],第二个字符为 [1], 等等。

4）在字符串中使用转义字符(\)使用引号

var answer1='It\'s alright';

It's alright

5）字符串（String）使用长度属性length来计算字符串的长度

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：ES之各种运算符，for、while、do while 、switch case循环

下一篇：js时间戳与日期格式的相互转换

js调用刷新界面的几种方式 2020-03-05
高性能JavaScript循环语句和条件语句 2020-02-21
高效Web开发的10个jQuery代码片段 2020-02-15
web如何实现页面分页打印 2020-02-14
详解Webstorm 新建.vue文件支持高亮vue语法和es6语法 2020-02-07

IDC资讯：主机资讯注册资讯托管资讯 vps资讯网站建设

网站运营：建站经验策划盈利搜索优化网站推广免费资源

网站联盟：联盟新闻联盟介绍联盟点评网赚技巧

行业资讯：搜索引擎网络游戏电子商务广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器安全防护

软件技巧：其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识：网络协议网络安全网络管理组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条

最新资讯

热门关注

热门标签