JavaScript语言基础
一、JavaScript编写基本格式说明
1、行内写法（javascript:具体代码流程），一般用于调试
2、HTML嵌入式写法：通过<script></script>标签囊括
3、外部js文件引入写法：通过<script src="路径"></script>标签方式引入
Script标签三个属性：type:当前语言类型：text/javascrip;language:注明当前script代码块类型：javascript jscript vbscript; src：为文件路径
4、注：Script代码应该放置到页面什么位置？
a) 编码位置可以是当前页面的任何一个位置
b) 同一个页面的script代码块作用域是共享的，位置不一样，只是代表执行顺序不一样
c) Script代码一般会写在当前页面的body标签最后一行
d) 跟当前page的标签元素无关的script代码一般会往head里面写（第三方js库）
二、JavaScript入门语法介绍
1.属性的定义
i. 声明统一用var进行声明（弱类型的一种表现），不需要具体到指定类型
ii. 赋值的时候才确定指定类型是什么
iii. 属性类型分两大类：
1. 原始类型、对象类型
2. 原始类型：Number、String、Boolean、undefine
typeof：用于校验当前变量的类型是什么
对象.instanceof(类型)：判断是否为该类型
3. 对象类型：一些对象定义，比如说Array、window、document、Math、null
iv. 在js当中，部分变量会自然转为false来进行识别
1. 0 -0 null undefine 空字符串
2. 判断某个内容是否为数字，可以使用一个方法，isNaN函数
校验内容：可以是字符串也可以是number
2.方法的定义
a) 方法的定义
i. 定义方法格式：三种
1. 常规定义法：function方法名(参数1，参数2,...){}
2. 函数赋值法：var 方法名 =fucntion(参数1，参数2,...){}
3. 对象构造法：var 变量名 = newFunction(参数1，参数2,...,过程)
ii. 方法定义
1. 返回类型不需要定义，直接在函数体中返回即可
2. 参数定义为弱类型，直接根据调用时候，进行匹配
所有的参数传递对象，都会通过arguments属性来进行封装
iii. Js中，所有的函数定义，都可以理解为过程的赋值
3. javascript基于对象编程
Function体现的是函数：能够表示两种（函数过程、构造方法）
var f1 = function(){}
①实例化对象过程：var obj = new fun();
obj:当前的对象实例名
fun:当前的对象名
function过程：当前对象的构造函数
②给对象实例赋属性和函数:
动态赋值法：把对象实例构造出来后，动态把属性绑定上去
构造方法初始化法：通过this关键字来初始化属性的内容
③调用对象的属性：对象.属性 或者 对象[“属性”]
还可以用with：封闭js对象作用域的功能 例如：with(对象){操作属性名 }
4. This关键字：
1）在js中，有个全局对象window
2）业务场景一：在普通函数中使用this，this指代的是调用当前函数的对象
3）业务场景二：在对象方法中使用this，this指代的是当前对象
4）业务场景三：在构造函数中使用this，this指代当前构造出来的实例对象
5）业务场景四：call和apply业务场景下使用this
a) Call和apply，把指定的方法作用到指定的对象上
b) 功能：1）移植属性的作用对象
2）构造方法中属性和函数的继承体现
c) 使用：方法名.call(对象，参数1，参数2)；
方法名.apply(对象，参数数组)；
5. JSON:
定义：javascript中的一个对象使用
可以初始化信息导对象中
JSON格式：{键：值，键：值，键：值....}
6. JS中数组
定义格式：
var 数组名 = [值，值，值,....];
var 数组名 = new Array(10);
JS中的数组是不定长的
7.JS常用内置对象
Global：作用是将全局方法集中在一个对象中，常规可以和windows对象混用。
常用方法：isNaN(判断对象是否为“非数字”) 、 parseFloat(将字符串对象转换为浮点数)、parseInt(将字符串对象转换为整数值)。
String:可用于处理或格式化文本字符串以及确定和定位字符串中的子字符串。
常用方法：
str1.concat(str2)：返回一个 String 对象，该对象包含了调用对象和参数对象字符串的连接。
strVariable.indexof(substring,startindex):返回 String 对象内第一次出现子字符串的字符位置,从startindex初开始找。lastIndexOf相反。
stringObj.slice(start, [end])/strVariable.substring(start,end):根据索引截取字符串。(从start开始不包含第end个字符)。
stringvar.substr(start [, length ]) :截取字符串，返回一个从指定位置开始的指定长度的子字符串。
mach()：使用正则表达式对象对字符串进行查找，并将结果作为数组返回。匹配不到返回null。
search()：返回与正则表达式查找内容匹配的第一个子字符串的位置。
Math:stringObj.replace(rgExp,replaceText):将obj中与表达式相匹配的位置用replaceText替换。
常用方法：pow(base,exponent)：返回底表达式的指定次幂。
sqrt(number):返回平方根
random():返回介于 0 和 1 之间的伪随机数。
abs(number):返回number的绝对值。
round():四舍五入
ceil():向上取整
floor():向下取整
Date:启用基本存储器并取得日期和时间
四、js练习（json存歌词、随机图案、自定义数组）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>index1</title> <style type="text/css"> .map{ width: 200px; height: 200px; } .mapblock{ width: 18px; height: 18px; border:1px solid #fff; float: left; } .bgblack{ background-color: black; } .bgred{ background-color: red; } .bggreen{ background-color: green; } </style> </head> <body> <script type="text/javascript"> document.write("-------------JSON歌词------------"+"<br>"); //定义jons歌词 var lyrics = { "lyr1":{"m":'00',"s":'53',"ms":'68',"cont":"一起醉一回"}, "lyr2":{"m":"00","s":"56","ms":'68',"cont":"男人为什么不回家"}, "lyr3":{"m":"00","s":"58","ms":'86',"cont":"只因家里那个她"}, "lyr4":{"m":"01","s":"01","ms":'19',"cont":"独自一人闯天涯"}, "lyr5":{"m":"01","s":"03","ms":'33',"cont":"天不怕地不怕"}, "lyr6":{"m":"01","s":"05","ms":'65',"cont":"男人他一肩挑霜华"}, "lyr7":{"m":"01","s":'07',"ms":'84',"cont":"只因压力如山大"}, "lyr8":{"m":"01","s":'10',"ms":'22',"cont":"你负责贤惠美如花"}, "lyr9":{"m":"01","s":'12',"ms":'38',"cont":"我就负责赚钱养家"} } //遍历歌词 for(var att in lyrics){ var lyr = lyrics[att]; document.write("<p>["+lyr.m+":"+lyr.s+"."+lyr.ms+"]"+lyr.cont+"</p>"); } document.write("-------------游戏地图------------"+"<br>"); // 定义数组 var map = new Array(10); for(var index=0;index<map.length;index++){ var map_ = new Array(10); for (var index_=0;index_<map_.length;index_++) { map_[index_] = parseInt(Math.random()*3); } map[index] = map_; } // 遍历数组画地图 function drawmap(m){ document.write("<div class='map' bgcolor ='rgb(255,0,0)'>"); for(var index1 in m){ for (var index2 in m[index1]) { if (m[index1][index2] == 0) { document.write("<div class='mapblock bgblack' ></div>"); }else if(m[index1][index2] == 1) { document.write("<div class='mapblock bgred' ></div>"); }else if(m[index1][index2] == 2) { document.write("<div class='mapblock bggreen' ></div>"); } } document.write("<br>"); } document.write("</div>"); } drawmap(map); document.write("-------------自定义数组------------"+"<br>"); var MyArray = function(){ //构造数组 this.length = 0; for (var i = 0; i < arguments.length; i++) { this[i] = arguments[i]; this.length++; } // 尾部增加元素 this.add=function(value){ this[this.length++]=value; } // 移除元素 this.remove = function(index){ var value = this[index]; for (var i = index; i < this.length-1; i++) { this[i] = this[i+1]; } delete this[this.length-1]; this.length--; return value; } // 插入元素 this.insert = function(index,value){ this[this.length++]=this[this.length-2]; for (var i = this.length-1; i >index; i--) { this[i] = this[i-1]; } this[index]=value; } // 插入/删除元素 this.splice=function(index,del){ var newarray = new MyArray(); for(var i =0; i<del;i++){ newarray.add(this[index]); this.remove(index); }; for (var i = arguments.length-1; i>1; i--) { this.insert(index,arguments[i]); } return newarray; } //数组合并 this.concat=function(array){ var newarray = new MyArray(); for(var index=0; index<this.length;index++){ newarray.add(this[index]); } for(var index=0; index< array.length;index++){ newarray.add(array[index]); } return newarray; } //数组截取 this.slice = function(index){ var newarray = new MyArray(); for(var i = index;i<this.length;i++){ newarray.add(this[i]); } return newarray; } // 元素排序 this.sort=function(){ var newarray = new MyArray(); for(var index=0; index<this.length;index++){ newarray.add(this[index]); } for (var i = 1; i < newarray.length; i++) { for(var j=0;j<i;j++){ if (newarray[i]>newarray[j]) { continue; }else{ var value = newarray.remove(i); newarray.insert(j,value); break; } } } return newarray; } } //测试数组方法 var arr = new MyArray(1,2,3); var arr1 = new MyArray(4,5); //arr.add(4); //arr.insert(0,5); //arr.remove(1); //arr.splice(1,2,4,5); //arr=arr.concat(arr1); //arr=arr.slice(1); for(var index=0;index<arr.length;index++){ document.write(arr[index]+"<br>"); } console.log(arr); //测试排序数组 var arr2 = new MyArray(5,50,22,10,7,100,73); arr2 = arr2.sort(); document.write("排序数组<br>"); for(var index=0;index<arr2.length;index++){ document.write(arr2[index]+"<br>"); } console.log(arr2); </script> </body> </html>
4869
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
