Web基础之JavaScript(一)

JavaScript概述:

  • 是一种网页编程技术,用来向HTML页面添加动态交互效果;
  • 是一种基于对象和事件驱动的解释性脚本语言,具有与Java和C语言类似的语法;
  • 可直接嵌入HTML页面,由浏览器解释执行,不进行预编译。
    发展史
  • 正式名称是“ECMSCript”,由ECMA组织发展和维护;
  • CMA-262是正式的JavaScript(Netscape)和JScript(Microsoft)。
  • 网景公司在Netscape2.0首先推出了JavaScript。微软公司从IE3.0开始提供对客户端JavaScript的支持,并另取名为JScript。
    特点
  • 可以使用任何文本编辑工具编写,只需要浏览器就可以执行程序。
  • 解释执行:事先不解释,逐行执行。
  • 基于对象:内置大量现成对象。
  • 适宜:客户端数据计算、客户端表单合法性验证、浏览器事件的触发、网页特殊显示效果制作。
    定义方式
  • 直接定义在事件中。如:
<input type="button" value="第一个按钮" onclick="alert('hello world');"/>

在<head>标签中嵌入<script language=“javaScript” type=“text/javscript”></script>标签,在其中放置javaScript代码;

  • 将代码写在单独的.js文件中,在html页面的<head>里使用<script>引入。如:
<head> <script language="javascript" src="myScript.js"></script> </head>

错误查看

  • 解释性代码,若代码错误,则页面无任何效果。
  • 使用浏览器里的开发者工具;

注释:单行使用// ; 多行使用:/**/

JavaScript基础语法
编写

  • 由Unicode字符集编写。
  • 语句:表达式、关键字、运算符组成;大小写敏感;使用分号结束。
    常量、标识符和关键字
    1)常量:直接在程序中出现的数据值(字面量),用完就丢弃了。如alert(“hello");
    2)标识符:由不以数字开头的字母、数字、下划线、$组成。常用于表示函数、变量等的名称。不能和保留关键字重复,如break、if等。
    3)关键字:只有系统才能用的标识符。
    变量
    1)声明:使用关键字var声明变量,如var x,y;
    【注意:以var关键字声明,声明的时候不确定类型,变量的类型以赋值为准。如:var x,y,z; x=10; y="mary"; z=true;】
    2)变量初始化:使用等号赋值。
    【注意:没有初始化的变量则自动取值为undefined,如:var count = 0;】
    3)变量命名同标识符的规则,大小写敏感。
    数据类型
    1)基本类型:number数字、string字符串、boolean布尔
    2)特殊类型:null空、undefined未定义
    3)复杂类型:array数组、object对象
    number数字
    —> 不区分整型数值和浮点型数值:所有数字都采用64位浮点格式存储,类似于double格式。
    —> 整数:16进制数前面加上0x,8进制前面加0。
    —> 浮点数:使用小数点记录数据,如3.4,5.6;使用指数记录数据,如4.3e23=4.3X10^23
    string字符串:
    —> 表示文本:由Unicode字符、数字、标点符号组成的序列。
    —> 首尾由单引号或双引号括起来。
    —> 特殊字符需要转义,用转义符\,如:\n,\,\’,\“
    【注意:可用在正则表达式,只允许录入汉字[^\u4e00-\u9fa5$],每个汉字都有转义符。】
    boolean布尔
    —>仅有两个值:true和false;实际运算中true=1,false=0

数据类型的转换
1)转换方式
—> 隐式转换:使用隐式自动转换规则直接转换
—> 显式转换:利用系统提供的函数
【注意:不建议使用隐式转换】
隐式转换
1)JavaScript属于松散类型的程序语言
—> 变量在声明时不需要指定数据类型。
—> 变量由赋值操作确定数据类型。
2)不同类型数据在计算过程中会自动进行转换
—> ①数字+字符串:数字转换为字符串
—> ②数字+布尔值:true转换为1,false转换为0
—> ③字符串+布尔值:布尔值转换为字符串true或false
—> ④布尔值+布尔值:布尔值转换为数值1或0
显式转换
toString:转成字符串,所有数据类型均可转换为string类型。
parseInt:强制转换成整数,如果不能转换,则返回NaN。(去尾法)
parseFloat:牵制转换成浮点数,如果不能转换,则返回NaN。
typeof:查询数值当前类型,返回string/number/boolean/object。
NaN:not a number,非常特殊,它不是数字,所以任何数跟它都不相等,甚至NaN本身也不等于NaN
isNaN(str):is not a number,判断文本是否为数值,false为数值,true为非数值
null:null在程序中代表“无值”或者“无对象”。可以通过给一个变量赋值null来清除变量的内容。
undefined:声明了变量但从未赋值或这对象属性不存在。

  • 算术运算:+ - * / %
  • 关系运算:> < <= >= == != ===(严格相等,值与类型都相等) !==(非严格相等)
  • 逻辑运算:! && ||
  • 条件运算:? :
  • 流程控制:switch-case for while

JavaScript常用内置对象
*概念:
1)JavaScript是一种基于对象的语言,对象是JavaScript中最重要的元素。
2)JavaScript包含多种对象:内置对象、自定义对象、浏览器对象、HTML DOM对象、ActiveX对象

  • 使用:
    1)对象由属性和方法封装而成。
    2)属性的引用:使用点“.”运算符、通过下标的方式引用。
    3)对象的方法的引用:ObjectName.methods()。
  • 常用内置对象
    1)简单数据对象:String、Number、Boolean
    2)组合对象:Array、Date、Math
    3)复杂对象:Function、RegExp

String
1)创建:var str1 = "hello world”; var str2 = new String("hello world”);
2)属性:length;如:str1.length;
3)方法:
—> toLowerCase():转为小写;
—> charAt(index)/charCodeAt(index):获取index处的字符/Unicode编码
—> indexOf(str) / lastIndexOf(str):查询位置,没有则返回-1
—> substring(start,end):截取
—> substr(start,length):截取
—> replace(oldStr,newStr):替换
—> split(bystr):分割
正则相关
—> replace(regexp,newstr):根据正则替换
—> match(regexp):返回匹配字符串的数组
—> search(regexp):返回匹配的首个字符串的索引值
匹配模式:JavaScript中使用正则表达式:使用两个斜杠, / 表达式 / 匹配模式
① g:global,全局匹配;② m:multilin,多行匹配;③ i:忽略大小写匹配。
如:var array=str1.match(/\d/g); //即全局匹配数字

  • Array
    一列有多个数据。可以有不同类型的数据。JavaScript只有数组没有集合;
    1)创建:
    ① var arr = [“mary”,10,true];//用中括号!不是大括号;常用;声明的同时并赋值。
    ② var arr = new Array(“mary",10,true);//声明的同时并赋值。
    ③ var arr = new Array();或var arr = new Array(7);//可有长度也可没有长度。即便写了长度,也能把第8个数据存入!先声明后赋值。
    2)属性:length;
    3)二维数组:通过指定数组中的元素为数组的方式可以创建二维甚至多维数组。week[0][1] = “Monday”;
    4)方法:
    —> join(str):以bystr作为连接数组中元素的分隔字符,返回拼接后的数组。
    //也可直接使用新的下标赋值,如:var arr = new Array(4);arr[5]=5;
    —>** toString():输出数组的内容(以逗号隔开)。
    —> concat(value,…):value作为数组元素连接到数组的末尾(数组连接),返回连接后的一个新数组。原数组内容不变。
    —> slice(start,end):截取从start开始到end结束(不包含end)的数组元素。end省略代表从start开始到数组结尾。
    —> reverse():数组反转,改变原数组元素的顺序。
    —> pop(): 删除并返回最后一个元素
    —> shift():删除并返回第一个元素
    —>
    unshift():向数组开头添加一个或更多元素,并返回新的长度
    —> push():向数组末尾添加一个或更多元素,并返回新的长度
    —> splice():删除元素,并向数据添加新元素
    —>
    toSource()**:返回该对象的源代码。
    —> valueOf():返回数组对象原始值。
    —> sort():数组排序,默认按照字符串的编码顺序进行排序。
    —> sort(sortfunc):sortfunc用来确定元素顺序的函数名。函数的形式如:
function(a,b) { return a-b; }

Math
用于执行数字相关。
1)没有构造函数Math()。
2)不需要创建,直接把Math作为对象使用就可以调用其所有属性和方法。如:不需要创建var data=Math.PI; 直接使用Math.PI;像Java中的静态类一样。
3)常用属性:都是数学常数,如:Math.E(自然数)、Math.PI(圆周率)、Math.LN2(ln2)、Math.LN10(ln10)等
4)常用方法:
①三角函数:Math.sin(x)、Math.cos(x)、Math.tan(x)等
②反三角函数:Math.asin(x)、Math.acos(x)等
③计算函数:Math.sqrt(x)、Math.log(x)、Math.exp(x)等
④数值比较函数:Math.abs(x)、Math.max(x,y,…)、Math.random()、Math.round(x)等
【注意:①Math.random():是一个 >=0 且 <1 的正小数;②Math.floor(x):地板,小于等于x,并且与它最接近的整数。注意:将负数舍入为更小的负数,而不是向0进行舍入。③Math.ceil(x):天花板,返回大于等于x,并且与它最接近的整数。注意:不会将负数舍入为更小的负数,而是向0舍入。】

Number
是对原始数值的包装对象。
1)创建:
① var myNum=new Number(value);
② var myNun=Number(value);
2)方法:
—>toString:数值转换为字符串
—>toFixed(n):数值转换为字符串,并保留小数点后n位数,多了就截断,四舍五入。少了就用0补足,常用作数值的格式化。

RegExp
正则表达式对象。JavaScript中,正则表达式的应用分为两类:
① 和String对象的三个方法结合使用,实现对string的操作,如:replace/match/search
② 调用正则表达式对象的常用test方法测试,RegExpObject.test(string):如果字符串string中含有与RegExpObject匹配的文本,则返回true,否则返回false;
1)创建:
① var reg1=/^\d{3,6}$/;
② var reg2=new RegExp("^\d{3,6}$");

Date
用于处理日期和时间
1)创建:
① var now = new Date();//当前日期和时间
② var now = new Date("2013/01/01 12:12:12”)/(“Oct 1, 2013”)/(2013,1,1);
2)方法:
—> 读取相关:getDay()(星期)、getDate()、getMonth()、getFullYear()…
—> 修改相关:setDay()、setDate()、setMonth()、setHours() ……
—> 转换字符串:得到某种格式的字符串显式,常用于页面显式,如:toString()、toDateString()、toLocaleTimeString()

Function
函数。是一组可以随时随地运行的语句。Function对象可以表示开发者定义的任何函数。函数实际上是功能完整的对象。
1)定义::function 函数名(参数){ 函数体; return; }
【注意:由关键字function定义;函数名的定义规则与标识符一致,大小写敏感;可以使用变量、常量或表达式作为函数调用的参数;返回值必须使用return。】
2)调用:函数可以通过其名字加上括号中的参数进行调用。如果有多个参数,则参数之间用逗号隔开。
3)创建:
① 使用function关键字明文的声明一个方法(最常用,用于功能相关的方法)
② 使用Function对象创建函数,语法:
var functionName=new Function(arg1,...argN,functionBody);//最后一个参数是方法体,前面的其它参数是方法的参数。

<input type="button" value="使用Function对象创建函数" onclick="testFunction();" />
function testFunction(){
var f = new Function("a","b","alert(a+b);");
f(10,20);
}

【注意:需求:有些方法不需要显式的存在,只是为其他方法里所使用(类似于java中的内部类);缺陷:方法体不能复杂。】

③ 创建匿名函数,语法:
var func=function(arg1,...argN){ func_body; return value; }
4)全局函数 :可用于所有内建的JavaScript对象。常用的全局函数有:
—> encodeURI(str):把字符串作为URI进行编码(大写i)。
—> decodeURI(str):对encodeURI()函数编码过的URI进行解码。
—> parseInt/parseFloat:
—> isNaN(str):判断文本是否为数值
—> eval(str):用于计算某个字符串,以得到结果;或者用于执行其中的JavaScript代码。【注意:eval(str)只接受原始字符串作为参数,如果参数中没有合法的表达式和语句,则抛出异常;如eval(“2+3”)。】

Arguments

  1. 是一种特殊对象,在函数代码中,代表当前方法被传入的所有的参数,形成一个数组。
    2)在函数代码中,可以使用arguments访问所有参数。
    ①arguments.length:函数的参数个数; ②arguments.[i]:第i个参数
    3)JavaScript中,没有传统意义上的重载(方法名相同,但是参数不同),即:如果方法名相同,则以最后一次定义的为准。如果想在JavaScript中实现类似于重载的效果,就需要使用arguments对象。即在同名方法体中判断参数的个数来确定方法体。如
function(){ if(argumtents.length==1){…} else{…} }

博客地址:Web基础之JavaScript(一)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,921评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,635评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,393评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,836评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,833评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,685评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,043评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,694评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,671评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,670评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,779评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,424评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,027评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,984评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,214评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,108评论 2 351
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,517评论 2 343

推荐阅读更多精彩内容