概述
JavaScript
概述：
JavaScript是基于对象和事件驱动的脚本语言，主要应用在客户端。
特点：
1.交互性
2.安全性
3.夸平台性
与java的区别：
1.js是Netscape公司的
产品，前身是livescript；Java是sun公司的产品，现在是Oracle公司的产品
2.js是基于对象，java是面向对象
3.js只需要解释就可以执行，java需要先编译成字节码文件，再执行
4.js是弱类型，java是强类型
语法
<?xml version="1.0" encoding="UTF-8"?>
<!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" lang="en">
<head>
<title>Title</title>
</head>
<body>
<!--js和html结合的方式
1.将JavaScript代码封装到<script>标签中
2.将JavaScript代码封装到js文件中，并通过<script>中的src属性进行导入
注意：如果<script>标签中使用src属性，那么该标签中封装的JavaScript代码不会被执行
所以通常导入js文件都是用单独的<script>来完成-->
<!--导入一个js文件-->
<script type="text/javascript" src="demo.js"></script>
<!--封装JavaScript代码-->
<script type="text/javascript">
alert("hello javascript");
</script>
<script type="text/javascript">
/*通常高级程序设计语言所包含的语法内容
* 1.关键字：被赋予特殊含义的单词
* 2.标识符：用于标识数据表达式的符号，通常理解为 程序中自定义的名称
* 3注释：说明解释程序，用于调试程序
* 4.变量：用于表示内存中的一片空间。用于存储数据，该空间的数据是可以变化的
* 5.运算符：可以放数据进行运算的符号
* 6.语句：用于对程序的运行流畅进行控制的表达式
* 7.函数：对于功能代码进行封装，提高复用性
* 8.数组：对多数据进行存储，便于操作
* 9.对象：只要是基于对象的语言，或者是面向对象的语言，就存在着对象的概念。对象就是一个封装体，既可以封装数据也可以封装函数
*
* 这些都是高级程序设计语言具备的共性内容，只不过各种语言对这些内容的表现形式有所不同
* 但是使用基本思想是一致
* */
</script>
<script type="text/javascript">
/*js中定义变量，使用到关键字
* 这个关键字就是var */
//定义变量:js是弱类型的，
var x=3;//var不写也行，因为js是非严谨的语言，但是我们开发的时候都按照严谨的方式定义
x="abc";//弱类型（弱类型的体现）
x=true;//赋值为boolean类型
x='c';//复制为字符串
alert("x="+x);//这是一个函数，将具体的参数通过对话框进行展示
</script>
<script type="text/javascript">
/*运算符：
* 1.算数运算符
* + - * / % ++ --
* 2.赋值运算符
* = += -= *= /= %=
* 3.比较运算符
* 4.逻辑运算符
* 5.位运算符
* 6.三元运算符*/
//算数运算符演示
var a=3710;
alert("a="+a/1000*1000);//a=3710
var a1=2.3,b1=4.7;
alert("a1+b1="+(a1+b1));//结果是7，不是7.0，弱类型
alert("12"-1);//11
alert("12"+1);//121
alert(true+1);//2
alert(2%5);//2
var n=3,m;
m=++n;
alert("n="+n+",m="+m);//n=4;m=4
alert(12+1); //13
//===============================================
//赋值运算符
var i=3;
i+=2;
alert("i="+i);//5
//===============================================
//比较运算符
var z=3;
alert(z==4);//false
//===============================================
//逻辑运算符
var t=4;
alert(t> && t<5);//true
alert(!true);//false
//===============================================
//位运算符
var c=6;
alert(c&3);//c=110 3=010 10=2
alert(5^3^3);//5
alert(c>>>1);//6/2(1)
alert(c<<2);24
//===============================================
//三元运算符
alert(3>10?100:200);
</script>
<script type="text/javascript">
/*一些细节
* 1.underfined:未定义,其实他就是一个常量*/
var xx;
alert(xx);//underfined
alert(xx=undefined);//true
//想要获取具体值得类型，可以通过typeof来完成
alert(typeof ("abc"));//string
alert(typeof (2.8));//number
alert(typeof (true));//boolean
alert(typeof (78));//number
alert(typeof '9');//string
</script>
</body>
</html>语句
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Title</title>
</head>
<body>
<script type="text/javascript">
/*语句：
* 1.顺序结构
* 2.判断结构
* 3.选择结构
* 4.循环结构
* 5.其他语句*/
//顺序结构
alert("abc1");
alert("abc2");
//判断结构
var x=4;
if (x=4){
alert("yes");
}else {
alert("no");
}
//选择结构
var x="abc";
switch (x) {
case "kk":
alert("a");
break;
case "abc":
alert("b");
break;
default:
alert("c");
break;
}
//循环结构
var x=1;
document.write("<font color='blue'>");
while (x<3){
//alert("x="+x);
//将数据直接写到当前页面中
document.write("x="+x+"<br/>");
x++;
}
document.write("</font>");
//其他语句 break;continue;
w:for (var x=0;x<3;x++){
for (var y=0;y<3;y++){
document.write("x="+x);
break w;//continue w;
}
}
</script>
</body>
</html>语句练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="table.css">
</head>
<body>
<script type="text/javascript">
/*练习：
* 在页面中显示一个99乘法表*/
document.write("<table>");
for (var x=1;x<=9;x++){
for (var y=1;y<=x;y++){
document.write("<td>"+y+"*"+x+"="+y*x+"</td>");
}
document.write("</tr>")
}
document.write("</table>");
</script>
</body>
</html>table,table td{
border: #0000ff double 1px;
width: 400px;
}结果：
数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript">
/*javascript中的数组演示
* 数组用于存储更多的数据，是一个容器
* 特点：
* 1.长度是可变的
*
* 2.元素的类型时任意的
*
* js中的数组定义的两种方式
* 1.var arr=[]; var arr=[3,1,5,8];
* 2.使用了JavaScript中的array对象来完成的定义
* var arr=new Array();//var arr=[];
* var arr1=new Array(5);//数组定义并长度是5
* var arr2=new Array(5,6,7);//定义一个数组，元素是5,6,7
* */
var arr=[23,78,100];
alert("len:"+arr.length);
arr[0]="abc";
arr[1]=true;
arr[4]=348;
//遍历数组
for (var x=0;x<arr.length;x++){
document.write("arr["+x+"]"+arr[x]+"<br/>");
}
</script>
</body>
</html>函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript">
/*js中的函数演示
* 函数：就是一个功能的封装体
* 定义功能需要两个明确
* 1.功能的结果
* 2.功能实现中的参与运算的位置的内容
* 3
*
* js中的定义函数的格式
* 通过制定的关系来定义
* function 函数名(参数列表){
* 函数体：
* return 返回值;//如果没有具体的返回值，return语句可以省略不写
* }*/
function demo() {
alert("demo run");
return ;
}
//demo();//调用函数
/*加法运算*/
function add(x,y) {
return x+y;
}
var sum=add(1,2);
alert(sum);
</script>
<script type="text/javascript">
/*函数的一些细节
* 1.只要使用了函数名称，就是对这个函数的调用
* 2.函数中有一个数组在对传入的参数进行存储，这个数组的名字叫做argument*/
function show(x,y) {
//alert(arguments.length);
//alert(x+":"+y);
for (var a=0;a<arguments.length;a++){
document.write(arguments[a]);
}
}
show(4,5,6);//建议函数中定义几个参数就传递几个实参
</script>
<script type="text/javascript">
/*函数的细节2：
* */
function getSum() {
return 100;
}
var sum=getSum();//getSum函数运行，并将返回的结果给sum
var sum=getSum;//getSum本身就是一个函数名，而函数本身在js中就是一个对象，getSum就是这个函数对象的引用
//将getSum这个引用的地址赋予给sunm。这时sum也指向了这个函数对象
//相当于这个函数对象有两个函数名称
alert("sum="+sum);
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript">
/*js函数的其他表现形式
*
* 动态函数：使用的是js中内置的一个对象Function
* 只不过用的不是很多
* 参数列表，函数都是通过字符串动态指定的*/
var add=new Function("x,y","var sum;sum=x+y;return sum;");
var he=add(4,8);
alert("he="+he);
/*function add2(x,y) {
var sum;
sum=x+y;
return sum;
}*/
</script>
<script type="text/javascript">
/*匿名函数：没有名字的函数
* 通常是函数的简写形式
* */
var add3=function(a,b) {
return a+b;
}
alert(add3(7,8));
/*function haha() {
alert("haha run");
}
var xixi=haha;*/
//上述代码可以简化成下面
var xixi=function () {
alert("haha run");
}
alert(xixi());
</script>
</body>
</html>函数练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript">
/*综合练习
* 1.定义功能，完成对数组最值得获取
* 2.对数组排个序
* 3.对数组查个数
* 4.对数组元素进行反转*/
//1.取最值
var arr=[5,56,12,67,84];
function getMax(arr) {
var max=0;
for (var x=1;x<arr.length;x++){
if (arr[x]>arr[max]){
max=x;
}
}
return arr[max];
}
var maxValue=getMax(arr);
alert("maxValue="+maxValue);
//2.排序
function sortArray(){
for (var x=0;x<arr.length-1;x++){
for (var y=x+1;y<arr.length;y++){
if (arr[x]>arr[y]){
swap(arr,x,y);
}
}
}
}
function swap(arr,x,y) {
var temp=arr[x];
arr[x]=arr[y];
arr[y]=temp;
}
function println(val){
document.write(val+"<br/>")
}
println("排序前"+arr);
sortArray(arr);
println("排序后"+arr);
</script>
<script type="text/javascript">
//3.对数组查个数
function searchElement(arr,key) {
for (var x=0;x<arr.length;x++){
if (arr[x]==key){
return x;
}
return -1;
}
}
//折半查找，必须有前提，必须是有序的数组
function binarySearch(arr,key) {
var max,min,mid;
min=0;
max=arr.length-1;
while (min<max){
mid=(max+min)>>1;
if (key>arr[mid])
min=mid+1;
else if (key<arr[mid])
max=mid-1;
else
return mid;
}
return -1;
}
//对数组的反转
function reverseArray(arr) {
for (var start=0,end=arr.length-1;start<end;start++,end--){
swap(arr,start,end);
}
}
reverseArray(arr);
println("反转后"+arr);
</script>
</body>
</html>全局变量和局部变量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript">
/*for (var x=0;x<3;x++){//在脚本片段中定义的变量，是全局变量
document.write("x="+x);
}*/
/*function show(){
var x=6;//局部变量
}
document.write("x======"+x);*/
var x=3;//全局变量x
function show(x) {//函数局部变量x
x=8;
}
show(x);
document.write("x="+x);//x=3
</script>
<script type="text/javascript">
document.write("xx="+x);
</script>
</body>
</html>常见对象Object
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript">
/*演示一下object对象
* toString();将对象编程字符串
* valueOf();*/
function show() {
alert("show run");
}
// alert(show().toString());//show run
var arr=[1,2,3,4];
// alert(arr.toString());//1,2,3,4
var abc=function () {
alert("abc run");
}
// alert(abc);//function () {alert("abc run");}
alert(abc.valueOf());
</script>
</body>
</html>常见对象String
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript" src="out.js"></script>
<script type="text/javascript">
/*演示string对象
* 表现形式
* var str=new String("abc");
* var str="abc"*/
var str="abcde";
println(str.length);
println(str.bold);//加粗
println(str.fontcolor("red"));//字体颜色
println(str.link("http://www.baidu.com"));//超链接
println(str.substr(1,3));//bcd 从1开始，取三个
println(str.substring(1,3));//bc 包含头，不包含尾
/*
* 发现js中string对象的方法有限，想要对字符串操作的其他功能
* 对开始位置的字符串进行判断，如果是空格，就进行递增，知道不是空格为止
* 对结束的位置的字符串进行判断，如果是空格，就进行递减，知道不是空格为止
* 必须要保证开始《=结束，这样才可以进行截取*/
function trim(str) {
var start,end;
start=0;
end=str.length-1;
while (start<=end && str.charAt(start)==" "){
start++;
}
while (start<=end && str.charAt(end)==" "){
end--;
}
return str.substring(start,end+1);
}
var s=" ab c ";
alert("-"+trim(s)+"-");
alert("abc".bold);
</script>
</body>
</html>out.js
/*打印指定参数数据到页面上，并换行*/
function println(param) {
document.write(param+"</br>");
}
/*打印指定参数数据到页面上*/
function print(param) {
document.write(param);
}原型练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript" src="../out.js"></script>
<script type="text/javascript" src="../stringtool.js"></script>
<script type="text/javascript">
/*练习一：给字符串添加一个功能，字符串编程一个字符数组
*
* 练习二：给字符串添加一个功能，将字符串进行反转*/
var str="abcde";
//println(str.toCharArray());
println(str.reverse());
</script>
</body>
</html>stringtool.js
/*字符串对象新功能，去掉字符串两端的空格*/
String.prototype.trim=function(){
var start,end;
start=0;
end=this.length-1;
while (start<=end && this.charAt(start)==" "){
start++;
}
while (start<=end && this.charAt(end)==" "){
end--;
}
return this.substring(start,end+1);
}
/*
* 字符串新功能，添加一个将字符串转成字符数组
* 返回一个数组*/
String.prototype.toCharArray=function () {
//定义一个数组
var chs=[];
//将字符串中的每一位字符串存储到字符数组中
for (var x=0;x<this.length;x++){
chs[x]=this.charAt(x); //字符串的索引 charAt(int index);
}
return chs;
}
/*将字符串反转的方法*/
String.prototype.reverse=function () {
var arr=this.toCharArray();
//将数组位置置换功能进行封装，并定义到了反转功能内部
function swap(arr,a,b) {
var temp=arr[a];
arr[a]=arr[b];
arr[b]=temp;
}
for (var x=0,y=arr.length-1;x<y;x++,y--){
swap(arr,x,y);
}
return arr.join("");//返回字符串值，其中包含了连接到一起的数组的所有元素，元素由指定的分隔号分隔开来
}Array
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript" src="out.js"></script>
<script type="text/javascript" >
/*演示数组*/
var arr=["nab","haha","cba","aaa","abc"];
var arr2=["qq","xiaoqiang",70];
println(arr);
println(arr2);
//在arr数组上连接一个元素"mm",再连接一个arr2数组
var newArr=arr.concat("mm",arr2);//将mm作为数组中的元素,将arr2也作为新数组中的元素
println(arr.join("+"));
println(newArr.join("+"));
println(myIoin(arr,"+"));
//模拟一下join的实现
function myIoin(arr,sperator) {
var str="";
for (var x=0;x<arr.length;x++){
if (x!=arr.length-1)
str+=arr[x]+sperator;
else
str+=arr[x];
}
return str;
}
//移除数组中的元素，并返回该元素,pop
println("<ha/>");
println(arr);
//println(arr.pop());//移除数组中最后一个元素
//arr.push(arr,arr2);//将新元素添加到一个数组中，并返回数组的新长度值
//println(arr.reverse());//将数组元素进行反转
//println(arr.shift());//删除第一个元素
//println(arr.slice(1,-2))//数组截取包含头，不包含尾
//println(arr.sort());//排序
//println(arr.splice(1,3,8080,9527));//删除，从第一个参数开始，删第二个参数的数值个，后面添加
println(arr.unshift("uuuu"));//将指定的元素插入数组开始位置并返回该数组
println(arr);
</script>
</body>
</html>原型练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript" src="../out.js"></script>
<script type="text/javascript" src="../arraytool.js"></script>
<script type="text/javascript">
/*数组练习
* 用数组实现js中的堆栈或者队列数据结构*/
var arr=["kk"];
arr.unshift("abc1");
arr.unshift("abc2");
arr.unshift("abc3");
println(arr);//abc3,abc2,abc1,kk
/* println(arr.pop());//kk
println(arr.pop());//abc1
println(arr.pop());//abc2*/
/*println(arr.shift());//abc3
println(arr.shift());//abc2
println(arr.shift());//abc1*/
</script>
<script type="text/javascript">
/*给数组对象添加新功能，使用到原型属性*/
var array=["nna","haha","cba","aaa","abc"];
var maxValue=array.getMax();
println("maxValue:"+maxValue);
println(array.toString());
</script>
</body>
</html>arraytool.js
/*数组最大值的方法*/
Array.prototype.getMax=function () {
var temp=0;
for (var x=1;x<this.length;x++){
if (this[x]>temp[x]){
temp=x;
}
}
return this[temp];
}
/*数组的字符串表现形式
* 定义toString方法*/
Array.prototype.toString=function () {
return "["+this.join(",   ")+"]";
}Math
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript" src="out.js"></script>
<script type="text/javascript">
/*演示Math对象。该对象中的方法都是静态的。不需要new，直接Math调用即可*/
var num1=Math.ceil(12.34);//返回大于等于指定参数的最小整数
var nmu2=Math.floor(12.34);//返回小于等于指定数据的最大整数
var num3=Math.round(12.34);//四舍五入
println("num1="+num1);
println("num2="+nmu2);
println("num3="+num3);
var num4=Math.pow(10,2);
println("num4="+num4);
for (var x=0;x<10;x++){
println("<hr/>");
for (var x=0;x<10;x++){
var num=Math.floor(Math.random()*10+1);
println(num);
}
}
</script>
</body>
</html>全局方法&Number对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript" src="out.js"></script>
<script type="text/javascript">
/*paseInt("123");
* 演示global的全局方法*/
println(parseInt("123"+1));//1231
var val=parseInt("abc");
println("value="+val);//NaN//通过isNaN来判断结果是否非法
var num=parseInt("110",2);//将指定进制的字符串转化成10进制
println("num="+num);//6
/*将10进制转换成其他进制,使用数字对象来完成*/
var num3=new Number(6);
println("num3="+num3.toString(2));
var num4=60;
println("num4="+num4.toString(16));
/*js中特有的语句 for in
*
* 格式：
* for(变量 in 对象)//对对象进行变量的语句
* {
* }*/
var arr=[32,80,65];
for (i in arr){
println("i="+arr[i]);
}
var numObj="abc";
for (x in numObj){
println(x);
}
</script>
</body>
</html>自定义对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript" src="out.js"></script>
<script type="text/javascript">
/*js自定义对象
* 如果要想自定义对象，应该先对对象进行描述
* js是基于对象，不是面向对象的。不具备描述事物的能力
* 我们还想按照面向对象的思想编写js
* 就要先描述，在js中，可以用函数来模拟面对对象中的描述
*
* */
//用js来描述人
/*function Person() {//相当于构造器。
alert("person run");
}
//通过描述进行对象的建立 new
var p=new Person();
//动态给p对象添加属性。可直接使用p.属性名即可。
p.name="zhangsan";
p.age=29;
//如果定义的p对象的属性赋值为一个函数，即是给p对象添加一个方法
p.show=function () {
alert("show:"+this.name+":"+this.age);
}
p.show();
var obj=new Object();
obj.name="god fatger";
obj.age=2012;
alert(obj.name+":"+obj.age);*/
/* function Person(name,age) {
//在给Person对象添加了两个属性
this.name=name;
this.age=age;
this.setName=function (name) {
this.name=name;
}
this.getName=function () {
return this.name;
}
}
var p=new Person("旺财",20);
//p.setName("小强");
//alert(p.name);
//alert(p.getName());
for (x in p){
println(x+p[x]);
}*/
//直接使用{}定义属性和值得键值对方式，键值键通过：连接，键语键之间用，隔开。
/* var pp={
//定义一些成员
"name":"小明","age":38,
"getName":function () {
return this.name;
}
}
//对象调用成员有两种方式：对象.属性 对象["属性名"]
alert(pp["age"]+":"+pp.name);*/
/*var map={
8:"小明",3:"旺财",7:"小明"
}
var val1=map[8];
alert("val1="+val1);//小明
var val2=get[7];
alert("val2:"+val2);
function get(key) {
return map[key];
}*/
// name="list";
// age=30;
/*var myobj={
myname:"lisi",myage:30
}
alert(myobj.myname+":"+myobj["myage"]);
var myobj2={
myname2:"hahahaha",myage2:48
}
alert(myobj2.myname2+":"+myobj2["myage2"]);
*/
var myMap={
//name:["lisi1","lisi2","lisi3"],nuyms:[34,10,48]
names:[{name1:"zhangsan "}, {name2:"qwer"}]
}
//alert(myMap.name[1]);
alert(myMap.names[0].name1);//zhangsan
</script>
</body>
</html>
最后
以上就是深情哑铃为你收集整理的javascriptJavaScript的全部内容，希望文章能够帮你解决javascriptJavaScript所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复