javascript基础知识集锦
- 格式:docx
- 大小:71.12 KB
- 文档页数:29
js入门基础教程JavaScript(简称JS)是一种轻量级的脚本语言,广泛应用于Web开发中。
它可以与HTML和CSS一起使用,通过在网页中嵌入js代码,使页面具有更多的交互性和动态效果。
本文将为大家介绍Javascript的入门基础知识。
1. JavaScript的历史JavaScript是在1995年由网景公司的布兰登·艾奇(BrendanEich)设计和开发的。
最初的目的是作为网页脚本语言,用来实现网页的动态效果和交互功能。
之后,它逐渐发展成一个独立的编程语言,可用于服务器端开发、桌面应用开发和移动应用开发等众多领域。
2. JavaScript的语法JavaScript的语法与Java语言类似,但它并不是Java的简化版。
它是一种解释性语言,不需要经过编译,而是由浏览器直接解释执行。
JavaScript的语法包括变量的声明、条件语句、循环语句、函数的定义等基本元素。
下面是一个简单的JavaScript程序示例:```javascript// 声明一个变量var message = "Hello, world!";// 输出变量的值console.log(message);```3. 数据类型JavaScript支持多种数据类型,包括字符串、数值、布尔值、数组、对象等。
其中,字符串用于表示文本,数值用于表示数字,布尔值用于表示真假值。
数组用于存储一组有序的值,对象用于存储键值对。
JavaScript还具有动态类型的特性,即同一个变量可以在不同的上下文中表示不同的数据类型。
4. 控制流程JavaScript中的控制流程包括条件语句和循环语句。
条件语句用于根据不同的条件执行不同的代码块,包括if语句和switch 语句。
循环语句用于重复执行一段代码,包括while循环、do-while循环和for循环。
5. 函数在JavaScript中,函数是一段可重复使用的代码块,用于实现特定的功能。
JavaScript基础知识点总结//逗比小憨憨/*第一章*HTML引用js方法:*1,外部引用:HTML外部引用js:<script src='js/day1.js'></script>*2,内部引用:<script> alert('逗比小憨憨');</script>*3,元素事件引用:<input type='button' value='button' onclick='alert('welcome')' />*//*第二章* 变量定义:* 1,变量由数字,字母,下划线,$组成,且不能以数字开头* 2,变量不能使用系统关键词* 3变量定义语法:var 变量1=变量值,变量2=变量值,...;*///举例:var a = 10;document.write(a);//在页面输出一个内容/** 数据类型:* 1,基本数据类型:数字,字符串,布尔值,未定义值(undefined),空值(null)* 2,引用数据类型:数组,对象* 其中:数字不区分整型和浮点型*//** 运算符:* 1,算术运算符: - * / % --* 加法运算规则:数字数字=数字;数字字符串=字符串;字符串字符串=字符串* 2,*///举例:var a = 10;var str = '逗比小憨憨';document.write(str a, typeof(str a));/** 赋值运算符:= = -= *= /=* 比较运算符:> < >= <= == !=* 逻辑运算符:&& || !* 条件运算符:var b=条件?表达式1:表达式2;//相当于C语言中三目运算符*//** 表达式语句:一个分号对应一条语句* 类型转换:* 1,隐式类型转换(js自动完成的)* 2,显式类型转换* (1)字符串转数字:Number(),parseInt(),parseFloat()(字符串必须是数字字符串)* (2)数字转字符串:toString* (3)转义字符:\' \' \n等* 3,注释:单行注释和多行注释用法:与C语言注释一样*///举例:document.write('Number(\'123\'):' Number('123') '<br/>');document.write(parseInt(' 123.456px'));//第一个字符为或-也进行转换,从左往右取整数document.write(parseFloat('123.456px'));var num = 123;document.write(num.toString());/*第三章* 流程控制:* 1,顺序结构:程序代码从上到下,从左到右依次执行* 2,选择结构:* (1)if语句:(单重if)* <1>:if(条件){语句块}* <2>:if(条件){语句块} else{语句块}* <3>:if(条件){语句块} else if(条件){语句块} else{语句块} * (2)switch语句:* switch(判断值){ case 取值1:语句块1;break;* case 取值2:语句块2;break;* ...* default:语句块n;break;}* 3,循环结构:* (1)while循环:* while(条件){语句块}* (2)do...while循环:* do{语句块}while(条件);* (3)for循环:* for(初始化表达式;条件表达式;循环后操作表达式){语句块} *///举例:计算1 2 3 (100)var n = 1, sum = 0;while(n <= 100){sum = n;n ;document.write(sum);//找出100-1000中的水仙花数var str1 = '';for(var i = 100; i < 1000; i ){var a = i / 100; //取百位上的数字a = parseInt(a);var b = i % 100 / 10; //取十位上的数字b = parseInt(b);var c = i % 10; //取个位上的数字c = parseInt(c);if(i == (a * a * a b * b * b c*c*c)) {str1 = str1 i '、';}}document.write('水仙花数有:' str1); //判断一个数是不是整数window.onload = function(){var n = 3.14159;if(parseInt(n) == parseFloat(n)) {document.write(n '是整数');}else{document.write(n '不是整数');}/*第四章* 函数:* 1,函数的定义:函数名命名规则遵循变量命名规则* (1)没有返回值的函数定义:function(参数1,参数2,...){语句块}* (2)有返回值的函数定义:function(参数1,参数2,...){语句块; return 返回值}* 2,变量的作用域:全局变量,局部变量* 3,函数的调用:* (1)直接调用:函数名(实参1,实参2,...);* (2)在表达式中调用:例如:var sum = 函数名(实参1,...)* (3)在超链接中调用:<a href='javascript:函数名'> </a>* (4)在事件中调用* 4,函数嵌套* 5,内置函数:比如:parseInt()*///举例:function add_sum(e, f){var sum = e f;document.write(sum);}add_sum(10, 20);function test(){alert('doubi');}//供超链接调用测试的函数/*第五章* 1,js中对象分为:自定义对象和内置对象* 2,常用的内置对象:字符串对象,数组对象,日期对象,数值对象* 3,字符串对象相关知识点:* 3.1 获取字符串长度:语法:字符串名.length* 3.2大小写转换:字符串名.toLowerCase(),字符串名.toUpperCase()* 3.3获取一个字符:字符串名.charAt(n)* 3.4获取字符串:字符串名.substring(start, end)* 3.5替换字符串:字符串.replace(原字符串或正则表达式, 替换字符串)* 3.6分割字符串:字符串.split('分隔符')* 3.7检索字符串的位置:字符串.indexOf(指定字符串),字符串.lastIndexOf(指定字符串)* indexOf:返回首次出现的位置lastIndexOf:返回最后一次出现的位置没找到返回-1* 3.8删除字符串中的一个字符:*///举例var str = 'This is doubixiaohanhan';document.write('字符串长度为:' str.length);//空格也计算在内document.write('转为大写字母:' str.toUpperCase());document.write('转为小写字母:' str.toLowerCase());document.write('获取第3个字符: ' str.charAt(3));//字符串下标从0开始计算document.write(str.substring(8, 23));document.write(str.replace('doubixiaohanhan','hahahahahaha'));var str1 = str.split(' ');//以空格作为分隔符for(var i = 0; i < 3; i )document.write(str1[i]);document.write(str.indexOf('bi'));document.write(stIndexOf('han'));//找出字符串中所有字符b,不区分大小写var n = 0,str1 = 'doubixiaohanhan';document.write('源字符串:' str1);for(var j = 0; j < str1.length; j ){var char = str1.charAt(j);if('h' == char.toLowerCase()){document.write(char);n = n 1;}}document.write('字符串中有' n '个字符h');//统计字符串中数字的个数function get_number(str){var num = 0, i = 0;while(i < str.length){var char = str.charAt(i);if((char != ' ') && (!isNaN(char))){//isNaN:不是数字则返回true num ;}i ;}alert('执行完毕');return num;}var ret = get_number('dou120k53KDDD6656'); document.write(ret);/*第六章:数组对象* 1,数组的创建:(数组中可以存储不同类型的数据)* (1)完整形式:var 数组名=new Array(元素1,元素2,..)* (2)简写形式:var 数组名=[元素1,元素2,...]* 2,数组的获取:使用下标获取,下标从0开始* 3,数组的赋值:arr[i]=值;* 4,获取数组的长度:数组名.length* 5,截取数组:数组名.slice(start, end)* 6,为数组添加元素:* (1)在数组开头添加元素:数组名.unshift(元素1,元素2,...)* (2)在数组末尾添加元素:数组名.push(元素1,元素2,...)* (3)在数组首部删除元素:数组名.shift()* (4)在数组末尾删除元素:数组名.pop()* (5)数组排序:升序:数组名.sort(up) 降序:数组名.sort(down) * 其中:function up(a,b){return a-b;} function down(a,b){return b-a;}* (6)数组颠倒顺序:数组名.reverse()* (7)将数组元素连接成字符串:数组名.join('连接符')* (8)*///举例var arr = ['js','jquery'];document.write(arr '\n');arr.unshift('db');arr.push('ab');document.write(arr);arr.shift();arr.pop();document.write(arr);var arr1 = [3, 6, 2, 5, 8, 1];document.write(arr1);function up(a,b){return a-b;}arr1.sort(up);document.write(arr1);function down(a,b){return b-a}arr1.sort(down);document.write(arr1);var arr = ['js','jquery','abcd'];var re = arr.join('');document.write(re);document.write(typeof(re));//例题:将字符串所有字符颠倒顺序function test(str){var arr = str.split('');document.write(typeof(arr));arr.reverse();var re = arr.join('');document.write(typeof(re));return re;}document.write('javascript颠倒后: ' test('javascript'));/*第七章:时间对象* 创建一个日期对象必续使用new关键字:语法:var 日期对象名 = new Date();* Date对象的方法有很多,主要分为两大类:获取时间:getXxx() 和设置时间:setXxx()** getFullYear() 获取年份:取值4位数字* getMonth() 获取月份:取值0(一月)-11(十二月)整数* getDate() 获取日数:取值0-31整数* getHours() 获取小时:取值0-23整数* getMinutes() 获取分钟:取值0-59整数* getSeconds() 获取秒数:取值0-59整数* getMilliseconds() 获取毫秒* getDay() 获取星期几:0表示星期天* setFullYear(year,month,day) 设置年月日* setMonth(month,day) 设置月日* setDate(day) 设置日 : 1-31整数* setHours(hour,min,sec,millsec) 设置时分秒毫秒* setMinutes(min,sec,millsec) 设置分秒毫秒* setSeconds(sec,millsec) 设置秒毫秒*///举例var d = new Date();var myyear = d.getFullYear();var mymonth = d.getMonth();var myday = d.getDate();var myday1 = d.getDay();var weekend = ['星期天','星期一','星期二','星期三','星期四','星期五','星期六'];document.write(myyear '年' (mymonth 1) '月' myday '日' weekend[myday1]);/*第八章:数学对象* 数学对象不需要使用new关键字来创造,而是直接使用它的属性和方法* 语法: Math.属性 Math.方法* 注:属性往往都是常量,比如:圆周率:PI (常用格式:度数*Math.PI/180)* Math中方法常用有:* max min sin cos tan asin acos atan floor ceil random atan2 * Math中方法不常用有:* abs sqrt log pow exp* random():用于生成0-1之间的随机数,即: [0,1)* 随机生成某个范围的任意数:* 1,Math.random()*m:生成0~m之间的随机数* 2,Math.random()*m n:生成n~m n之间的随机数* 3,Math.random()*m-n:生成-n~m-n之间的随机数* 4,Math.random()*m-m:生成-m~0之间的随机数*///举例var a = Math.max(3,9,10,2,4,6,12,67,9);document.write(a);var b = 0.6;document.write(Math.floor(b));//floor向下取整document.write(Math.ceil(b)); //ceil向上取整document.write(Math.random()*10);//例题:生成随机验证码function random_validate(str){var arr = str.split('');var result = '';for(var i = 0;i < 4; i ){var n = Math.floor(Math.random()*arr.length);result = arr[n];}return result;}document.write(random_validate('asjcbakavbavakvhakjbvkv JASSDKABKAVAVJ24123435'));/*第九章:DOM基础* DOM:document object model文档对象模型(W3C定义的一个标准)* DOM操作:理解:元素操作;DOM采用树形结构* 重点:每一个元素就是一个节点,每个节点就是一个对象。
DAY01:一、基本特点:1、JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。
通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。
2、是一种解释性脚本语言(代码不进行预编译)。
3、主要用来向HTML(标准通用标记语言下的一个应用)页面添加交互行为。
4、可以直接嵌入HTML页面,但写成单独的js文件有利于结构和行为的分离。
5、跨平台特性,在绝大多数浏览器的支持下,可以在多种平台下运行(如Windows、Linux、Mac、Android、iOS等)。
6、avascript脚本语言同其他语言一样,有它自身的基本数据类型,表达式和算术运算符及程序的基本程序框架。
Javascript提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。
而变量提供存放信息的地方,表达式则可以完成较复杂的信息处理。
二、日常用途:1、嵌入动态文本于HTML页面。
2、对浏览器事件做出响应。
3、读写HTML元素。
4、在数据被提交到服务器之前验证数据。
5、检测访客的浏览器信息。
6、控制cookies,包括创建和修改等。
7、基于技术进行服务器端编程。
DAY02:javascript的放置和注释1.输出工具();("","")如何在html页面当中进行放置A.<script></script>***************************************javascript可以在html页面当中的任何位置来进行调用,但是他们还是一个整体,是相互联系,相互影响。
***************************************B.可以在超链接或是重定向的位置调用javascript代码格式:"javascript:alert('我是超链接')"重定向格式:action="javascript:alert('我是表单')"3.在事件后面进行调用A.格式:onclick="alert('我是事件')"B.<scriptfor="two"event="onclick">alert("我是DIV2");</script>4.调用外部javascript文件格式:<scriptsrc=""></script>******************************************************************* 在调用页面<script>标签对当中不能有任何代码在js脚本中不能出现<script>标签对但是他们还是一个整体,是相互联系,相互影响。
JavaScript脚本语言教程第一章:引言JavaScript是一种用于编写交互式网页的脚本语言。
它是一种强大而灵活的语言,在现代Web开发中得到了广泛应用。
本教程将介绍JavaScript的基本语法、数据类型和常用功能,帮助初学者快速入门。
第二章:JavaScript语法基础2.1 变量与数据类型JavaScript的变量使用关键字"var"声明,并且不需要提前声明变量类型。
JavaScript有多种数据类型,包括数字、字符串、布尔值、数组和对象等。
本节将详细介绍变量的声明和数据类型的使用。
2.2 运算符与表达式JavaScript中包含多种运算符,包括算术运算、赋值运算、比较运算和逻辑运算等。
作者将逐个介绍这些运算符的使用方法,并给出示例代码。
2.3 控制流程语句JavaScript的控制流程语句包括条件语句、循环语句和函数等。
本节将详细介绍这些语句的用法,并通过实例讲解其具体应用场景。
第三章:JavaScript高级特性3.1 对象与原型JavaScript是一种面向对象的语言,它通过对象和原型来实现封装和继承。
本节将介绍JavaScript中对象的创建、属性的添加和访问,以及原型的使用方法。
3.2 函数和闭包函数是JavaScript中的一等公民,它具有多个强大的特性,如函数的嵌套、匿名函数和闭包等。
这些特性使得JavaScript在处理复杂逻辑时非常灵活。
本节将讲解函数的定义、调用和参数传递,并详细介绍闭包的概念和用法。
3.3 异步编程与事件驱动JavaScript采用单线程执行模型,但通过异步编程和事件驱动的方式来处理并发任务。
本节将介绍异步编程的原理和常用的异步编程模式,包括回调函数、Promise和async/await等。
第四章:JavaScript与浏览器交互4.1 DOM操作JavaScript可以通过Document Object Model (DOM)来操作网页的结构和内容。
js基础知识点js基础知识点1、javascript概述JavaScript是一种弱类型,以对象为基础,定义的脚本语言,它可以给网页添加各种动态特性,JavaScript不需要编译就能运行,有丰富的内置函数和对象,可以在Web中读写数据,用于在Web中编写客户端脚本。
2、javascript应用JavaScript可以用在各种浏览器上,可以实现网页中的事件处理、表单处理、客户端检验、图形界面效果等。
通常JavaScript使用的目的是增强用户体验,提高网页的交互性和可用性3、javascript变量JavaScript变量有全局变量和局部变量。
它们的区别在于:1)全局变量在JavaScript脚本的所有部分都可以访问,而局部变量只能在声明它的函数内部访问。
2)局部变量只在函数内部有效,函数外部无法访问,而全局变量在函数内部外部都可以访问。
3)全局变量在整个网页的所有脚本都可以访问,只要这个网页被打开就可以,而局部变量只能在它声明的函数或语句块内访问。
4、javascript数据类型JavaScript支持6种数据类型:Undefined、Null、Boolean、Number、String 和Object。
Undefined 表示未定义,它的值是undefined。
Null 表示空值,它的值是null。
Boolean 表示布尔值,它的值是true或false。
Number表示数字,它的值是整数或小数String 表示字符串,它的值是由一系列字符组成的文本Object 表示对象,它的值是一组数据和功能的集合5、javascript函数JavaScript函数可以看作是一段可以重复使用的代码,它由一系列语句组成,用于完成特定的任务。
函数有四个特点:1)可以重复使用2)可以接收参数3)可以返回值4)可以封装函数的声明和调用函数可以使用function来声明:function functionName (parameters) {// code to be executed}函数使用functionName()来调用:functionName(parameters);函数默认有返回值,如果使用return语句来返回值,则忽略默认值,否则,函数返回值为undefined。
快速掌握JavaScrip编程语言快速掌握JavaScript编程语言第一章:JavaScript简介及历史背景JavaScript是一种高级编程语言,主要用于为网页添加交互功能。
它是与HTML和CSS一起使用的一种前端技术,是目前最常用的编程语言之一。
JavaScript最早在1995年由Netscape公司的Brendan Eich开发而成,最初被称为LiveScript。
后来,为了与Java关联,更名为JavaScript。
随着JavaScript的不断发展,ECMAScript标准逐渐形成,现在我们常说的JavaScript实际上是ECMAScript的一种实现。
第二章:JavaScript语法基础JavaScript的语法与Java、C++等语言有些相似,但也有自己独特的语法规则。
在这一章节中,我们将介绍JavaScript的变量、数据类型、运算符、条件语句、循环语句等基础知识点。
变量是存储数据的容器,JavaScript的变量没有具体类型限制,可以同时存储不同类型的数据。
常见的数据类型包括数值、字符串、布尔值、数组、对象等。
运算符用于对数据进行操作,包括算术运算符、比较运算符、逻辑运算符等。
条件语句if-else用于根据条件执行不同的代码块,而循环语句可以重复执行某段代码。
除了基本的语法知识,了解一些常用的JavaScript内置对象也是很重要的。
如Math对象提供了数学计算相关的方法,Date对象用于处理日期和时间,String对象用于字符串操作等等。
第三章:DOM操作与事件处理DOM(Document Object Model)是JavaScript操作网页元素的接口,通过DOM,我们可以实现动态地修改HTML元素的内容、样式和结构。
在这一章节中,我们将学习如何使用DOM来访问、创建、修改和删除HTML元素。
我们将介绍如何通过ID、类名、标签名等方式获取元素,并演示如何修改元素的文本内容、样式、属性等。
JavaScript技术手册JavaScript是一种高级的、解释型的编程语言,主要用于为网页添加交互和动态特效。
它与HTML和CSS并列作为前端开发的三大基础技术之一。
本篇技术手册将从基础知识到高级应用,系统地介绍JavaScript的各个方面。
一、JavaScript的基础知识1. JavaScript简介JavaScript的发展历史、应用领域和特点。
2. 开发环境准备JavaScript开发所需的工具和环境配置。
3. JavaScript语法JavaScript的变量、基本数据类型、流程控制语句、函数等基本语法规则。
二、DOM操作与事件处理1. DOM简介Document Object Model(文档对象模型)的基本概念和作用。
2. DOM元素选择与操作使用JavaScript选择和操作HTML元素的方法和技巧。
3. 事件处理绑定、监听和处理用户的交互事件,实现动态响应的效果。
三、JavaScript的函数与面向对象编程1. JavaScript函数函数的定义、调用、参数传递和返回值等相关知识。
2. JavaScript对象对象的创建、属性和方法操作以及原型链等内容。
3. 面向对象编程使用JavaScript实现面向对象编程的方法和技巧。
四、数据存储与异步编程1. 数据存储使用JavaScript操作本地存储、Cookie和Web Storage等机制。
2. 异步编程JavaScript中的异步操作、回调函数和Promise等概念和用法。
五、Ajax与前后端交互1. Ajax简介Asynchronous JavaScript and XML(异步JavaScript和XML)的基本概念和原理。
2. 使用XMLHttpRequest对象进行数据交互通过JavaScript发起HTTP请求并处理服务器的响应结果。
3. 使用Fetch API进行数据交互使用新的Fetch API简化Ajax请求的编写和处理。
简单实用的JavaScript编程教程JavaScript是一门广泛应用于Web开发的脚本语言,它可以使网页更加动态和交互性。
本篇文章将从基础到高级介绍JavaScript 的编程教程,帮助读者快速入门和掌握JavaScript编程技巧。
第一章:JavaScript的基础知识JavaScript的基础知识包括变量、数据类型、运算符、控制结构等。
首先,我们介绍JavaScript中的变量声明与赋值,并讲解JavaScript的数据类型和类型转换。
接着,我们详细讲解JavaScript 中的算术运算符、比较运算符和逻辑运算符,并介绍JavaScript中常用的控制结构,如条件语句和循环语句。
第二章:JavaScript中的函数函数是JavaScript中非常重要的组件,它可以使代码更加模块化和可复用。
我们将介绍如何声明和调用函数,并讲解函数的参数及其作用。
另外,对于JavaScript中的匿名函数和箭头函数,我们也会进行详细解释,并给出实例演示其用法。
第三章:JavaScript中的面向对象编程面向对象编程是一种程序设计的范式,也是JavaScript中广泛应用的编程方式。
我们将讲解JavaScript中的类和对象的概念,以及如何创建和使用类和对象。
此外,我们还会介绍JavaScript中的继承和多态的实现方式,并给出相应的代码示例。
第四章:DOM操作与事件处理DOM(文档对象模型)操作是JavaScript中处理网页元素的重要手段,它可以通过JavaScript来动态地修改网页元素的样式、内容和结构。
我们将讲解如何通过JavaScript访问和操作DOM,并给出常用的DOM操作示例。
此外,我们还会介绍JavaScript中的事件处理,包括事件监听、事件触发和事件处理函数的编写。
第五章:AJAX与异步编程AJAX(Asynchronous JavaScript and XML)是一种在不重新加载整个网页的情况下与服务器进行数据交互的技术。
JavaScript 是一种广泛应用于Web 开发的脚本语言,是前端开发人员必须掌握的技能之一。
学习 JavaScript 需要掌握哪些基础知识呢?本文将从以下几个方面进行详细阐述。
一、HTML 和 CSS 基础在学习 JavaScript 之前,必须对 HTML 和 CSS 有一定的了解。
HTML 是 Web 页面的基础,CSS 是用来美化页面的样式表语言。
JavaScript 可以用来操作 HTML 和 CSS,使页面更加动态和交互。
学习 JavaScript 前必须掌握 HTML 和 CSS 的基础知识。
HTML 是一种标记语言,用于描述 Web 页面的结构和内容。
学习 HTML 的基础知识包括标签、属性、元素、文本、链接等。
CSS 是一种样式表语言,用于描述Web 页面的外观和样式。
学习 CSS 的基础知识包括选择器、属性、值、盒模型、布局等。
二、编程基础学习JavaScript 还需要掌握编程基础知识,包括变量、数据类型、运算符、条件语句、循环语句、函数等。
JavaScript 是一种弱类型的语言,变量的数据类型可以动态变化。
常见的数据类型包括字符串、数字、布尔值、数组、对象等。
运算符包括算术运算符、比较运算符、逻辑运算符等。
条件语句包括if、else、switch 等,循环语句包括for、while、do-while 等。
函数是JavaScript 的核心,可以用来封装重复使用的代码块,提高代码的复用性和可维护性。
三、DOM 和 BOMDOM(文档对象模型)是 JavaScript 操作 HTML 和 XML 的接口,可以用来操作页面的内容和结构。
BOM(浏览器对象模型)是JavaScript 操作浏览器的接口,可以用来操作浏览器的窗口、历史记录、定时器等。
掌握DOM 和BOM 的基础知识可以使开发人员更加灵活地操作页面和浏览器,实现更加丰富的交互效果。
四、异步编程JavaScript 是一种单线程语言,无法同时处理多个任务。
JavaScript 基础知识 - 入门篇(一)最近一直有小伙伴跟我说JS有很多知识点经常不用,已经忘记的差不多了。
平时找一个小问题都要在网上找半天,希望能有一套比较全面的笔记或者文章。
但是网上的文章太过于分散,学习起来不是很方便。
恰巧最近比较闲,所以为大家整理出来了一套比较全面的JS基础阶段的文章,对于初学者还是很有帮助的,如果你是一名熟练掌握JS的攻城狮,你可能会觉得文章写得太过于啰嗦,但是为了照顾大家,啰嗦一点还是有必要的。
由于是自己所写,所以里面有些语言可能表达的有些不明确,不明白的可以给我留言。
1. 初识JS1.1 什么是JS语言javascript是一种运行在客户端的脚本语言客户端:即接受服务的一端,与服务端相对应,在前端开发中,通常客户端指的就是浏览器。
脚本语言:也叫解释型语言,特点是执行一行,解释一行,如果发现报错,代码就停止执行。
1.2 JS的三个组成部分javascript的三个组成部分:ECMAScript、BOM、DOMECMAScript:定义了javascript的语法规范。
BOM:一套操作浏览器功能的API。
DOM:一套操作页面元素的API。
1.3 script 标签1、script标签的书写方式书写Javascript代码有两种方式,第一种是直接在script标签中书写,第二种是将代码写在js文件中,通过script的src属性进行引入。
直接在script中书写javascript代码:!-- type="text-javascript" 可以省略 --script type="text-javascript"alert("今天天气真好呀");通过script标签引入一个JS文件,需要指定src属性:!-- 表示引用了test.js文件,并且script标签内不可以继续写代码--script src="test.js"-script如果script标签指定了src属性,说明是想要引入一个js文件,这个时候不能继续在script标签中写js代码,即便写了,也不会执行。
目录Js基础知识集锦(一) (1)Javascript文件上传时检测文件大小 (27)js遍历json数组 (28)Js基础知识集锦(一)主要知识点:js数组,数字函数,字符串函数,表单验证,hashMap,堆栈,日期函数,call 函数等。
next:js正则表达式,闭包,apply,callee,事件相关函数,Cookie等1.javascript的数组APIJs代码1.//定义数组2. var pageIds = new Array();3. pageIds.push('A');4.5.数组长度6. pageIds.length;7.8.//shift:删除原数组第一项,并返回删除元素的值;如果数组为空则返回undefined9.var a = [1,2,3,4,5];10.var b = a.shift(); //a:[2,3,4,5] b:111.12.//unshift:将参数添加到原数组开头,并返回数组的长度13.var a = [1,2,3,4,5];14.var b = a.unshift(-2,-1); //a:[-2,-1,1,2,3,4,5] b:715.//注:在IE6.0下测试返回值总为undefined,FF2.0下测试返回值为7,所以这个方法的返回值不可靠,需要用返回值时可用splice代替本方法来使用。
16.17.//pop:删除原数组最后一项,并返回删除元素的值;如果数组为空则返回undefined18.var a = [1,2,3,4,5];19.var b = a.pop(); //a:[1,2,3,4] b:520.21.//push:将参数添加到原数组末尾,并返回数组的长度22.var a = [1,2,3,4,5];23.var b = a.push(6,7); //a:[1,2,3,4,5,6,7] b:724.25.//concat:返回一个新数组,是将参数添加到原数组中构成的26.var a = [1,2,3,4,5];27.var b = a.concat(6,7); //a:[1,2,3,4,5] b:[1,2,3,4,5,6,7]28.29.//splice(start,deleteCount,val1,val2,):从start位置开始删除deleteCount项,并从该位置起插入val1,val2,30.var a = [1,2,3,4,5];31.var b = a.splice(2,2,7,8,9); //a:[1,2,7,8,9,5] b:[3,4]32.var b = a.splice(0,1); //同shift33.a.splice(0,0,-2,-1); var b = a.length; //同unshift34.var b = a.splice(a.length-1,1); //同pop35.a.splice(a.length,0,6,7); var b = a.length; //同push36.37.//reverse:将数组反序38.var a = [1,2,3,4,5];39.var b = a.reverse(); //a:[5,4,3,2,1] b:[5,4,3,2,1]40.41.//sort(orderfunction):按指定的参数对数组进行排序42.var a = [1,2,3,4,5];43.var b = a.sort(); //a:[1,2,3,4,5] b:[1,2,3,4,5]44.45.//slice(start,end):返回从原数组中指定开始下标到结束下标之间的项组成的新数组46.var a = [1,2,3,4,5];47.var b = a.slice(2,5); //a:[1,2,3,4,5] b:[3,4,5]48.49.//join(separator):将数组的元素组起一个字符串,以separator为分隔符,省略的话则用默认用逗号为分隔符50.var a = [1,2,3,4,5];51.var b = a.join("|"); //a:[1,2,3,4,5] b:"1|2|3|4|5"2.dom最常用APIJs代码1.document方法:2.getElementById(id) Node 返回指定结点的引用3.getElementsByTagName(name) NodeList 返回文档中所有匹配的元素的集合4.createElement(name) Node Node5.createTextNode(text) Node 创建一个纯文本结点6.ownerDocument Document 指向这个节点所属的文档7.documentElement Node 返回html节点8.document.body Node 返回body节点9.10.element方法:11.getAttribute(attributeName) String 返回指定属性的值12.setAttribute(attributeName,value) String 给属性赋值13.removeAttribute(attributeName) String 移除指定属性和它的值14.getElementsByTagName(name) NodeList 返回结点内所有匹配的元素的集合15.16.node方法:17.appendChild(child) Node 给指定结点添加一个新的子结点18.removeChild(child) Node 移除指定结点的子结点19.replaceChild(newChild,oldChild) Node 替换指定结点的子结点20.insertBefore(newChild,refChild) Node 在同一层级的结点前面插入新结点21.hasChildNodes() Boolean 如果结点有子结点则返回true22.23.node属性:24.nodeName String 以字符串的格式存放结点的名称25.nodeType String 以整型数据格式存放结点的类型26.nodeValue String 以可用的格式存放结点的值27.parentNode Node 指向结点的父结点的引用28.childNodes NodeList 指向子结点的引用的集合29.firstChild Node 指向子结点结合中的第一个子结点的引用stChild Node 指向子结点结合中的最后一个子结点的引用31.previousSibling Node 指向前一个兄弟节点;如果这个节点就是兄弟节点,那么该值为null32.nextSibling Node 指向后一个兄弟节点;如果这个节点就是兄弟节点,那么该值为null3.网上搜藏的一个map对象:Js代码1.function HashMap()2. {3. /** Map 大小 **/4. var size = 0;5. /** 对象 **/6. var entry = new Object();7.8. /** 存 **/9. this.put = function (key , value)10. {11. if(!this.containsKey(key))12. {13. size ++ ;14. }15. entry[key] = value;16. }17.18. /** 取 **/19. this.get = function (key)20. {21. return this.containsKey(key) ? entry[key] : null;22. }23.24. /** 删除 **/25. this.remove = function ( key )26. {27. if( this.containsKey(key) && ( delete entry[key] ) )28. {29. size --;30. }31. }32.33. /** 是否包含 Key **/34. this.containsKey = function ( key )35. {36. return (key in entry);37. }38.39. /** 是否包含 Value **/40. this.containsValue = function ( value )41. {42. for(var prop in entry)43. {44. if(entry[prop] == value)45. {46. return true;47. }48. }49. return false;50. }51.52. /** 所有 Value **/53. this.values = function ()54. {55. var values = new Array();56. for(var prop in entry)57. {58. values.push(entry[prop]);59. }60. return values;61. }62.63. /** 所有 Key **/64. this.keys = function ()65. {66. var keys = new Array();67. for(var prop in entry)68. {69. keys.push(prop);70. }71. return keys;72. }73.74. /** Map Size **/75. this.size = function ()76. {77. return size;78. }79.80. /* 清空 */81. this.clear = function ()82. {83. size = 0;84. entry = new Object();85. }86. }87.88. var map = new HashMap();89.90. /*91. map.put("A","1");92. map.put("B","2");93. map.put("A","5");94. map.put("C","3");95. map.put("A","4");96. */97. /*98. alert(map.containsKey("XX"));99. alert(map.size());100. alert(map.get("A"));101. alert(map.get("XX")); 102. map.remove("A");103. alert(map.size());104. alert(map.get("A"));105. */106.107. /** 同时也可以把对象作为 Key **/108. /*109. var arrayKey = new Array("1","2","3","4");110. var arrayValue = new Array("A","B","C","D");111. map.put(arrayKey,arrayValue);112. var value = map.get(arrayKey);113. for(var i = 0 ; i < value.length ; i++)114. {115. //alert(value[i]);116. }117. */118. /** 把对象做为Key时,自动调用了该对象的 toString() 方法其实最终还是以String 对象为Key**/119.120. /** 如果是自定义对象那自己得重写 toString() 方法否则 . 就是下面的结果 **/ 121.122. function MyObject(name)123. {124. = name;125. }126.127. /**128. function MyObject(name)129. {130. = name;131.132. this.toString = function ()133. {134. return ;135. }136. }137. **/138. var object1 = new MyObject("小张");139. var object2 = new MyObject("小名");140.141. map.put(object1,"小张");142. map.put(object2,"小名");143. alert(map.get(object1));144. alert(map.get(object2));145. map.remove("xxxxx");146. alert(map.size());147.148. /** 运行结果小名小名 size = 1 **/149.150. /** 如果改成复写toString()方法的对象 , 效果就完全不一样了 **/151.152. </script>4.常用的数字函数:Js代码1.·数字型(Number)2. 1.声明3. var i = 1;4. var i = new Number(1);5.6. 2.字符串与数字间的转换7. var i = 1;8. var str = i.toString(); //结果: "1"9. var str = new String(i); //结果: "1"10. i = parseInt(str); //结果: 111. i = parseFloat(str); //结果: 1.012.13. //注意: parseInt,parseFloat会把一个类似于"32G"的字符串,强制转换成3214.15. 3.判断是否为有效的数字16. var i = 123; var str = "string";17. if( typeof i == "number" ){ } //true18.19. //某些方法(如:parseInt,parseFloat)会返回一个特殊的值NaN(Not a Number)20. //请注意第2点中的[注意],此方法不完全适合判断一个字符串是否是数字型!!21. i = parseInt(str);22. if( isNaN(i) ){ }23.24. 4.数字型比较25. //此知识与[字符串比较]相同26.27. 5.小数转整数28. var f = 1.5;29. var i = Math.round(f); //结果:2 (四舍五入)30. var i = Math.ceil(f); //结果:2 (返回大于f的最小整数)31. var i = Math.floor(f); //结果:1 (返回小于f的最大整数)32.33. 6.格式化显示数字34. var i = 3.14159;35.36. //格式化为两位小数的浮点数37. var str = i.toFixed(2); //结果: "3.14"38.39. //格式化为五位数字的浮点数(从左到右五位数字,不够补零)40. var str = i.toPrecision(5); //结果: "3.1415"41.42. 7.X进制数字的转换43. //不是很懂 -.-44. var i = parseInt("0x1f",16);45. var i = parseInt(i,10);46. var i = parseInt("11010011",2);47.48. 8.随机数49. //返回0-1之间的任意小数50. var rnd = Math.random();51. //返回0-n之间的任意整数(不包括n)52. var rnd = Math.floor(Math.random() * n)5.网上搜藏的js堆栈:Js代码1.function stack(){2. if(this.top==undefined){3. //初始化堆栈的顶部指针和数据存放域4. this.top=0;5. this.unit=new Array();6. }7. this.push=function(pushvalue){8. //定义压入堆栈的方法9. this.unit[this.top]=pushvalue;10. this.top+=1;11. }12. this.readAllElements=function(){13. //定义读取所有数据的方法14. if(this.top==0){15. alert("当前栈空,无法读取数据");16. return("");17. }18. var count=0;19. var outStr="";20.21. for(count=0;count<this.top;count++){22. outStr+=this.unit[count]+",";23. }24. return(outStr);25. }26. this.pop=function(){27. //定义弹出堆栈的方法28. if(this.top==0){29. alert("当前栈空,无法弹出数据");30. return("");31. }32. var popTo=this.unit[this.top-1];33. this.top--;34. return(popTo);35. /* 从堆栈弹出数据,顶部指针减一,不过这里没有做到资源的释放,也36.就是说数据仍然存在于this.unit的数组中,只不过无法访问罢了。