javascript基础知识


Posted in Javascript onJune 07, 2016

1、var msg;//声明一个变量,在没有给此变量赋值以前,该变量名为:undefined

2、msg = "hello";//不适用var则可以声明一个全局变量,但是此变量因为是全局的,所以容易引起其他调用的一些问题,故不推荐

3、javaScript有5种基本数据类型,Undefined、Null、Boolean、Number和String;以及一种复杂数据类型:Object

4、var num=076;//代表的八进制,以0开头,假如后面的数值超出8的范围,例:08、079等,则按十进制解析

5、var num=0x22;//代表十六进制

6、NaN->Not a Number;//非数字,NaN不和任何值相等,包托它自己;判断一个值是否可以转换为数值的方式:isNaN(*),*为所要进行转化的数据

7、向Number转化时,false->0;true->1;""->0;"00022"->22;"helloworld"->NaN;注:采用的是Number()方式

8、假如采用parseInt()方式进行转化则与7(对字符串来说)不同,基本原理如下:

1)对String的第一个非空格字符进行解析,若是空格则跳过,假如是非数字或者负号,则直接返回NaN;
2)对接下去的字符继续解析,直到遇到非数字或者解析完成,返回已经解析的内容;
3)如果解析到字符串的非空格字符以0x开头且后面加16进制字符则转换成16进制,若是0开头且后面加8进制字符则转换为8进制;

例:"1234blue"->1234;""->NaN;"0xA"->10;"070"->56;" 22.5"->22;"   12 457 blue"->12;解析时只跳过1)中出现的空格

9、还可以采用parseInt(*,*)方式,后面一个变量代表的是所要转换的进制;可选16,10,8,2等,例parseInt("10",16)->16,此时不需要再添加0x或者0

10、toString()方法一般不必使用参数,true->"true",都是按照字符串来转换,但是当由数字转换为String时,可以添加参数,用于设置进制

例:var num = 10->String-------num.toString()->"10";num.toString(2)->"1010";num.toString(8)->"12";

11、在JavaScript中以32位数据表示一个数,左移<<不会改变符号位,例:2<<5;-->64即:10->1000000

12、右移分为两种:有符号右移和无符号右移:

1)有符号右移:>>只移动数据位,不移动符号位:-64>>5 ---->-2
2)无符号右移:>>>所有的都要移动,因此负数移动之后会变为正数,且此正数一般非常大

12、switch语句中的case非常强大,可以是数值,也可以是字符串甚至表达式

13、javaScript中function()中可以不添加参数,对于其来说其实是由arguments[]接收的

14、javascript没有块级作用域,如下例子:

if(true)

{

    var color = "blue";

}

alert(color);

会打印出blue出来,这个仅限于alert语句是位于全局环境中,但是在类C语言中则不会出现此种情况,一般都会销毁for函数等循环函数除外,在javascript中也会销毁。

15、instance of 语句用于判断是否属于某种数据类型,或者某种对象:person instanceof Object //变量person是Object?若是则返回true

16、将变量值设置为null可以解除对此变量的引用,javascript的垃圾收集器在下次运行时会将其回收

17、引用类型与类相似,但是不是一码事!创建一个引用类型有两种方法:
1)

var person = new Object();//Object是javascript中最常用的一个引用类型

person.name = "zhangsan";

person.age = 30;

2)

var person = {

    name : "zhangsan",

    age : 30    //注意此处没有","!

};

3) 是2)与1)的结合

var person = {};

person.name = "zhangsan";

person.age = 30;

上述3种方法中第二种是最常用的

18、对象有三种:user-defined-object(用户自定义对象),native-object(内置对象)和host-object(宿主对象)
其中native-object是内置在javascript中的对象,如Array、Math和Date等,而host-object是浏览器提供的对象。

19、JavaScript中打开一个新的窗口用:window.open(url,name,features),这三个参数都是可选择的,说明如下:

1)url是要打开的窗口的地址
2)name是新窗口的名字,可以通过name与新窗口进行通讯
3)features是一个以","分割的字符串,如"height:300,width:200",其内容是新窗口的各种属性

20、可以在html文档中直接调用javascript功能,这个得使用javascript:xxxxxx的方式,其中javascript被称为javascript伪协议
例,有某方法:function test(){}
<a href="javascript:test()">test</a>//此种方法就是使用javascript伪协议进行调用javascript方法,此种方法非常不提倡,因为不同浏览器对此种伪协议的支持是不一样的。

21、很多节点的内容并不在其value中,如:<p id="desc">Hello world</p>,此时可以用var text = document.getElementById("desc").firstChild.nodeValue;
此处text得到的值为:Hello World

22、在html文档中插入一个新元素的方法:

1)创建一个新的元素(包括其内容等)
2)把这个新元素插入节点数

说明:1)创建新元素的方法:var para = document.createElement("p");//创建一个<p></p>
此时这个元素已经具有了<p>的所有属性,但是里面还没有内容,并且并未插入到文档中
然后用var txt = document.createTextNode(text)方法创建一个文本节点内容,将这个文本节点内容插入到<p>中

2)parent.appendChild(child)//方法可以将某个child元素插入到parent元素下
包括两部分的工作:1-将文本节点插入到<p>节点下,para.appendChild(txt);2-将<p>节点插入到其他节点下

23、set和get方法也可以为一个对象设置属性,称之为存储器属性,它可以实现比较复杂的运算,如:

var m = {

    x : 1,//数据属性

    y : 1,
    get r() {return Math.sqrt(this.x*this.x + this.y*this.y);},//存储器属性,此种属性写法:set(或get) 属性名称(param(set方法有)) {函数体}

    set r(newvalue) {

      var oldvalue = Math.sqrt(this.x*this.x + this.y*this.y);

      var radio = newvalue/oldvalue;

      this.x *= ratio;

      this.y *= ratio;

    }

}

24、数组的操作:

1)length属性表示长度
2)join()方法:

var a = [1,2,3];

a.join()----->"1,2,3"

a.join(" ");----->"1 2 3"

a.join("");----->"123"

3)reverse()//将数组中的元素颠倒顺序
var a = [1,2,3];a.reverse().join()--->"3,2,1"

4)sort()//将数组中的元素排序并返回排序后的数组
sort()//按照字母表的顺序进行排序
sort(function(a,b){//a、b指的是数组中的元素

    if(a>b)

    {

        return 1;

    }

    else if()

    {

        return -1

    }

    else

    {

        return 0;

    }

}

)//此种方法可以自由定义自己所需要的排序方式

5)concat()//创建并返回一个新的数组,它用于连接数组,它连接的是数组中的元素而不是数组本身

var a = [1,2,3]

a.concat(4,5)----->[1,2,3,4,5]

a.concat([4,5])----->[1,2,3,4,5]

a.concat([4,5],[6,7])----->[1,2,3,4,5,6,7]

a.concat(4,[5,[6,7]])----->[1,2,3,4,5,[6,7]]

6)slice()返回指定数组的一个片段,可以写两个参数或者一个参数,一个参数代表是从参数当前位置开始一直到结尾,两个参数是指从第一个参数到第二个参数
参数-1,指定了最后一个元素,即倒数第一个元素,而-3则指定了倒数第三个元素

var a = [1,2,3,4,5];

a.slice(0,3);----->[1,2,3]

a.slice(3);----->[4,5]

a.slice(1,-1);----->[2,3,4]

a.slice(-3,-2);----->[3]

25、window.location = "https://3water.com/";//可以用于打开网页

26、setTimeout()//两个参数,一为回调函数,二为回调时间,说明是多少毫秒之后调用此回调函数,如:

setTimeout(function(){alert("Hello World");},2000);//两秒之后弹出对话框

clearTimeout(h);//用于取消setTimeout的调用,var h = setTimeout(func,time);

27、某个元素的单击事件:var tempelement = document.getElementById("xx");tempelement.onclick = function(){alert("Hello");};

28、var nowtime = new Date();nowtime.toLocaleTimeString();可以显示当前时间(注:是时间而不包含日期)

29、setInterval(func,time);//它用来注册指定的时间之后重复调用的函数,func是重复调用的函数,time是指定的时间,单位毫秒
而clearInterval(h);是用于取消注册的事件,其中的h是var h = setInterval(func,time);

30、无论是setTimeout还是setInterval放time设定为0时,都不是立即执行,而是将这个方法放入到队列中,等待前面的状态执行完毕之后才执行

31、window.location.href//可以获得当前document载入的URL地址,window.location.search//可以得到当前文档中?字符后面的内容,一般用于
检测键值对即name=value的情况

32、window的navigator属性可以包含多个属性:
1)appName----->Web浏览区的全称
2)appVersion----->浏览器厂商和版本
3)userAgent----->通常包含appVersion和其他的信息,没有一定的格式
4)platfrom----->在其运行浏览器的操作系统,甚至有可能使硬件
5)onLine----->此属性如果存在的话表示当前浏览器是否连接到网络
6)geolocation----->用于确定用户地理位置信息的接口

33、Screen对象可以获得有关窗口显示的大小和可用的颜色数量的信息

34、window提供了三种对话框
1)alert-->提示对话框
2)confirm()----->也是显示一条信息,但是要求用户确定或者取消,例:var correct = confirm("hello world"); if(correct){return true}
3)prompt()----->显示一条信息,等待用户输入并返回那个字符串

35、window提供了模态对话框的显示方案:showModalDialog(param1,param2,param3)//
参数一:用以指定提供对话框HTML内容的URL
参数二:可以是一个任意值,这个值在对话框里的脚本中可以通过window.dialogArguments属性的值访问。
参数三:是一个非标准列表,包含以分号隔开的name=value对,如果提供了这个参数就可以配置对话框的尺寸和其他属性,用dialogwidth和dialogheight来
设置对话框窗口的大小,用"resizable = yes"来允许用户改变窗口大小

36、name属性也可以用来获得某些元素,但是name属性只在少数html元素中有效:表单<form>,表单元素,<iframe>和<img>元素
document.getElementsByName();//获得所有name属性组成的数组

37、由于历史原因,只有<form>,<img>和那些有href属性的<a>,才有document.forms.id//name为form标签的id,其他元素是不可以的

38、getElementsByClassName();可以取得parent节点下的相同的className的子节点

39、Node节点的重要属性说明如下:
1)parentNode----->给节点的父节点,假如是document对象则它的父节点是null
2)childNodes----->只读的类数组节点,它是该节点的子节点
3)firstChild和lastChild,该节点的第一个子节点和最后一个子节点
4)nextSibling、previoursSibling,该节点的兄弟节点的前一个和后一个
5)nodeType----->该节点的节点类型,是返回一个数值,9代表document节点,1代表Element节点,3代表Text节点,8代表Comment节点,11代表DocumentFragment节点
6)nodeValue----->text节点或Comment节点的文本内容
7)nodeName----->元素的标签名,以大写形式表示

40、在Html中可以创建一个可编辑的区域元素,方法:

<div id="editor" contenteditable>Click to Edit</div>,可以通过innerHTML属性获取其中的内容;

var editor = document.getElementById("editor"); alert(editor.innerHTML);//显示所有内容,包括<br>等

41、window.onload中加载两个function的方法window.onload=function(){
    //此处写两个function
    func1();
    func2();
}

42、对Element设置css属性的方法:

var tip = document.createElement("dd");//创建一个元素

tip.style.cssText = "position:absolute;bottom:0;height:20px;width:380px;padding:10px;color:#fff;background:#fff;";//设置元素的css属性

查看更多JavaScript的语法,大家可以关注:《JavaScript 参考教程》、《JavaScript代码风格指南》,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 密码强度判断代码
Sep 05 Javascript
如何实现修改密码时密码框显示保存到cookie的密码
Dec 10 Javascript
javascript实现点击单选按钮链接转向对应网址的方法
Aug 12 Javascript
学习JavaScript设计模式之观察者模式
Apr 22 Javascript
javascript关于继承解析
May 10 Javascript
javascript超过容器后显示省略号效果的方法(兼容一行或者多行)
Jul 14 Javascript
IntersectionObserver API 详解篇
Dec 11 Javascript
JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)
Dec 14 Javascript
react-native组件中NavigatorIOS和ListView结合使用的方法
Sep 30 Javascript
Node.js实现批量下载图片简单操作示例
Jan 18 Javascript
JavaScript实现简易计算器小功能
Oct 22 Javascript
Web应用开发TypeScript使用详解
May 25 Javascript
jQuery+Ajax实现限制查询间隔的方法
Jun 07 #Javascript
JavaScript实现九九乘法表的简单实例
Jun 07 #Javascript
javascript如何定义对象数组
Jun 07 #Javascript
jQuery控制div实现随滚动条滚动效果
Jun 07 #Javascript
bootstrap输入框组代码分享
Jun 07 #Javascript
javascript 数组的定义和数组的长度
Jun 07 #Javascript
jQuery实现按钮点击遮罩加载及处理完后恢复的效果
Jun 07 #Javascript
You might like
PHP4实际应用经验篇(3)
2006/10/09 PHP
PHP4实际应用经验篇(4)
2006/10/09 PHP
php防止sql注入简单分析
2015/03/18 PHP
php中JSON的使用方法
2015/04/30 PHP
实现PHP搜索加分页
2016/10/12 PHP
ThinkPHP5.0框架结合Swoole开发实现WebSocket在线聊天案例详解
2019/04/02 PHP
jquery $.ajax各个事件执行顺序
2010/10/15 Javascript
Javascript中找到子元素在父元素内相对位置的代码
2012/07/21 Javascript
Javascript获取窗口(容器)的大小及位置参数列举及简要说明
2012/12/09 Javascript
js实现在字符串中提取数字
2013/11/05 Javascript
ExtJS自定义主题(theme)样式详解
2013/11/18 Javascript
最全面的百度地图JavaScript离线版开发
2016/09/10 Javascript
Javascript下拉刷新的简单实现
2017/02/14 Javascript
用vue和node写的简易购物车实现
2017/04/25 Javascript
详解JS中的柯里化(currying)
2017/08/17 Javascript
详解JSON Web Token 入门教程
2018/07/30 Javascript
基于Koa2写个脚手架模拟接口服务的方法
2018/11/27 Javascript
Element-UI中Upload上传文件前端缓存处理示例
2019/02/21 Javascript
原生js无缝轮播插件使用详解
2020/03/09 Javascript
vue+elementUI动态增加表单项并添加验证的代码详解
2020/12/17 Vue.js
[01:15:16]DOTA2-DPC中国联赛 正赛 Elephant vs Aster BO3 第一场 1月26日
2021/03/11 DOTA
python常见数制转换实例分析
2015/05/09 Python
python3音乐播放器简单实现代码
2020/04/20 Python
Python中模块string.py详解
2017/03/12 Python
Python实现抢购IPhone手机
2018/02/07 Python
python如何实现异步调用函数执行
2019/07/08 Python
Pycharm+Python+PyQt5使用详解
2019/09/25 Python
Python中SQLite如何使用
2020/05/27 Python
python 三种方法提取pdf中的图片
2021/02/07 Python
HTML5学习笔记之History API
2015/02/26 HTML / CSS
《长城和运河》教学反思
2014/04/14 职场文书
档案管理员岗位职责
2015/02/12 职场文书
接触艺术对孩子学习思维有益
2019/08/06 职场文书
不会写演讲稿,快来看看这篇文章!
2019/08/06 职场文书
标准版个人借条怎么写?以及什么是借条?
2019/08/28 职场文书
python神经网络Xception模型
2022/05/06 Python