一、JS概念
JavaScript ：简称 JS ；是一门基于对象的和事件驱动的，用于实现页面动态效果的脚本语言。
**页面效果：**页面的数据/样式可以改变。
基于对象：
- JS中所有的内容都是对象。
- JS编程中使用的大部分对象内存中以创建好了。
事件驱动： 在页面中进行的所有操作 ------ 事件，操作发生，就会执行此事件上注册的JS代码。
脚本语言： 用于实现页面动态效果的解析性编程语言。
JS和Java的区别：
-
相同点： 都是编程类语言。
-
不同点：
a. JS是解析性语言，JS代码通过浏览器解析就可以执行。
Java是编译型语言，Java代码需要被编译器编译为.class二进制文件才能执行。
b. JS是基于对象：JS中所有的内容都是对象，并且需要的大部分对象，浏览器内存已创建好。
Java是面向对象：一种编程思想，通过调用具有帮助我解决问题功能的对象来解决问题。
c. JS是弱类型语言：变量在内存中的空间大小可以更改。
Java是强类型语言，不同的数据类型在内存中的空间大小是固定的。
d. JS是脚本语言，实现页面的动态效果。
Java是程序开发的编程语言，实现程序的后台业务逻辑。
二、JS与HTML的结合方式
<script type="text/javascript"> /* 1 script标签可以在页面的任意位置 可以定义多个 2 script标签中的代码就是js代码 3 浏览器可以对js代码进行解析和执行 4 js的注释和java完全相同 5 通过srcipt的src属性来引入外部js文件 */ alert("我是一个弹出框");//alert方法：弹出框 </script> <script type="text/javascript" src="first.js"> alert("我呦呦呦是一个弹出框");/*引入了外部js文件的script标签中不能再写代码*/ </script>三、JS语法:(与Java不同的地方)
-
关键字：被赋予特殊含义的单词字符。
-
标识符：所有的名字。
-
运算符：实现数学运算的所有符号。
1).算术运算符
//算术运算符：+ - * ／ ％ ＋＋ －－ //alert("1/2="+1/2);//在js中所有的数字都是number类型 //alert(1+1);//2 //alert(1+'1');//"11" 运算中 字符串两边的+是连接符 //alert(5-"2");//3 如果字符串前后是其他运算符 会把字符串自动转换为数字 然后运算 //alert(5-'a');//NaN number类型的常量值 not a number //alert((5-'a')==(5-'a')); //false 在js中判断相同/相等 统一用== // NaN==NaN 为false //alert(isNaN(5-'A'));//true //判断是否为NaN 通过方法 isNaN // 1, 加法运算 // 字符串和数字相加会把数字转化成字符串,然后拼接起来 console.log(name + age); // 李四30 console.log("12" + 30) ; // 1230 // 字符串和布尔类型相加, 会把布尔转成字符换,然后拼起来 console.log(name + sex); //李四false // 数字和布尔类型相加, 会把布尔转成数字(false=0,true=1),然后数字相加 console.log(age + sex); // 31 // 各编程语言中对小数的运算都会存在微小的误差, 无法避免 console.log(0.1 + 0.2); // 0.30000000004 // 2, 减法,乘法和除法 // 字符串和数字相减会试图把字符串转化成数字,然后相减, 如果转化失败,会得到NaN: not a number 非数字 console.log(name - age); // NaN console.log("12" - 30) ; // -18 // 字符串和布尔类型相减, 会试图把布尔(false=0,true=1)和字符串都转成数字,然后相减,如果转化失败,会得到NaN console.log(name - sex); // NaN console.log("12" - sex); // 11 // 数字和buer类型相减, 会把布尔转成数字(false=0,true=1),然后数字相减 console.log(age - sex); // 29 // 3, 取余 % console.log(5 % 3 ) ; // 2 console.log(5.2 % 3); // 2.2 console.log(5 % 3.2); // 1.8 // 4, 自增++ 自减 -- // 一般用于整数的加1 或者减1 var number = 3; // 整数增加1的三种写法 number ++; number += 1; number = number + 1; // 如果把++符号放在变量前, 也是自增1 ++ number; // 区别是: ++在前表示先加1然后打印结果 // ++在后表示先打印变量值,再加1 console.log(number); console.log(++ number); console.log(number ++); number = 3; console.log(++ number * number -- / number); // 5.33 // 第一步: 第一个number先加1得到4 console.log(4 * number -- / number); // 第二步: 第二个number先参与乘法4*4, 然后number再减1得3 console.log(16 / 3); // 第三步: 第三个number此时的值是3 2). 赋值运算符
3). 比较运算符
4).逻辑运算符
/* //2 赋值运算符： = += -= *= /= %= 和java完全相同 //3 比较运算符： > >= < <= == != 和java完全相同 //4 逻辑运算符： && || ^ ! //所有的数据都可以作为boolean来使用 除了null "" 0 NaN undefined 其他都是true var a;a=true;a=1;a=1.1;a='1';a="aaa";a=[];a=new Date();a=new Object();//都是true a=false;a=0;a=0.0;a=null;a="";a=NaN;a=undefined;//false if(a){ alert(a+"可以作为true"); }else{ alert(a+"可以作为false"); } */ // 并且 && : 所有条件全部为true,结果为true, 有一个为false,结果就是false console.log( 2 && 2 > 3 && true); // 或者 || : 所有条件全部为false,结果为false, 有一个为true,结果就是true console.log( 2 == 2 || 2 > 3 || true); // 非 ! : 针对bool类型值取反, 如果不是bool类型,会隐式转换为bool值再取反 console.log( !true ); console.log( !"0" ); 5).位运算符
//5 位运算符：操作的是数字的二进制 0当false 1当true // | & ^ >> << //alert(11|3);// //alert(11>>3);//1011 删除后面三位 1 //alert(11<<3);//1011 在后面添加三个0 1011000 // 按位与 & 按位或 | 不是判断符,是运算符 只针对整数计算 console.log( 3 & 6 ); //结果3 console.log( 3 | 6 ); // 原理: 指的是二进制上相同位之间的且/或 // 3 用二进制表示是 011 // 6 用二进制表示是 110 // 011 & 110 == 010 转成10进制 2 // 011 | 110 == 111 转成10进制 7 // 移位 左移<< 右移>> : 二进制之间的位移 console.log(20 << 3); // 160 // 20 转化为二进制 0001 0100 // 左移三位: 把所有的1向左移三位 1010 0000 // 1010 0000 转成10进制 是 160 console.log(20 >> 3); // 20 转化为二进制 0001 0100 // 左移三位: 把所有的1向右移三位, 超出最右侧一位会被忽略 0000 0010 //0000 0010 转成10进制 是 26).三元运算符//6 三元运算符 var a=2,b=4; var maxab=a>b?a:b;//在定义变量名/方法名 名字不要太正宗 alert(maxab);-
数据类型：
/* //数据类型： typeof(n) 判断参数数据的类型 //在js中数据类型： number boolean string object undefined alert("typeof(1)="+typeof(1));//number alert("typeof(1.1)="+typeof(1.1));//number alert("typeof('a')="+typeof('a'));//string alert("typeof(\"abc\")="+typeof("abc"));//string alert("typeof(true)="+typeof(true));//boolean alert("typeof([1,2,3,4])="+typeof([1,2,3,4]));//object alert("typeof(new Date())="+typeof(new Date()));//object alert("typeof(new Object())="+typeof(new Object()));//object alert("typeof(NaN)="+typeof(NaN));//number alert("typeof(null)="+typeof(null));//object alert("typeof(undefined)="+typeof(undefined));//undefined */ -
常量和变量
/* //常量和变量 var i;//定义变量通过关键字var variable js是弱类型语言 变量的类型可以更改 i=1;//number i="abc";//string var j; alert("j="+j);//变量定义了 但没有赋值 默认值undefined k=i;//变量可以不定义 直接使用 但不规范 j=null; //引用j 地址栏存放是常量值null 表示j没有指向任何对象 j=""; //引用j地址栏存放的是字符串对象""的地址 j指向的是对象"" j=undefined; //变量j没有赋值 */ -
流程控制：
//1 顺序结构 //2 选择结构 var i=1; if(i=2){//所有的数据都可以当boolean来使用 //alert("先把2赋值给i 然后判断i是不是true"); } if(2==i){//为了防止少写一个= 把常量写在左边 //alert("2==i"); } //switch 穷举法 java中switch表达式的值之内是int/string // js中switch表达式的值之内可以是number/string i=1.1; switch(i){ case 1.1: alert("case 1.1 成立！"); break; default: alert("case 1.1 不成立！"); break; } i="abc"; switch(i){ case "abc": alert("case abc 成立！"); break; default: alert("case abc 不成立！"); break; }//循环结构：for while dowhile var sum = 0; for (var n = 1; n <= 100; n++) { var m = 1; m++; sum += n; } alert("sum="+sum+",n="+n+",m="+m);//sum=5050 n=101在js中变量有两种：全局变量+局部变量
全局变量 ： 方法外面定义的变量 》》》作用域是整个页面。
局部变量 ： 方法体/参数列表定义的变量 》》》作用域是当前方法。
//使用for求质数 var n = 101; for (n = 1; n <= 100; n++) { var b = true;//定义变量作为标签 记录n是否被除尽过 for (var m = 2; m < n; m++) {//定义变量m让其从2跑到n-1 循环判断m是否可以除尽n if (n % m == 0) { b = false;//除尽就更改标签的值 } } //m跑完后 通过判断标签的值是否更改来判断n是否被除尽过 进而来判断n是不是质数 if (n > 1 && b) { //alert("n="+n+" 是质数！"); } } //使用js在页面打印九九乘法表 document.write("document.write方法 是把数据显示到页面<br/>"); for (var i = 1; i <= 9; i++) { for (var j = 1; j <= i; j++) { document.write(i + "*" + j + "=" + i * j + " " + (i * j >= 10 ? "" : " ")); } document.write("<br/>"); } //使用表格来实现打印九九乘法表 document.write("<hr/>"); document.write("<table>"); for (var i = 1; i <= 9; i++) { document.write("<tr>"); for (var j = 1; j <= i; j++) { document.write("<td>" + i + "*" + j + "=" + i * j + "</td>"); } document.write("</tr>"); } document.write("</table>");//跳转结构： //break: 1用在switch中表示结束switch结构 // 2 用在循环中结束本层循环 //continue: 用在循环中 结束本次循环 继续++ 进行下次循环 -
数组：装多个数据的容器。
-
语句：可以执行的计算机命令。
-
方法：定义的具有指定功能的代码块。
方法： 具有指定功能的代码块；作用是提高代码的复用性。
java方法格式： 修饰符 返回值类型 方法名(参数列表){
方法体;
return 返回值;
}
js方法格式: function 方法名(参数列表){
方法体;
return 返回值;
}
关键字function: 声明在定义方法。
JS是弱类型语言 , 不需要声明返回值类型 。
注意事项1： 等待方法没有返回值 调用者接受 获取的是undefined。
注意事项2： 方法参数列表+方法体中定义的变量是局部变量 作用域是当前方法。
注意事项3: 变量名=方法名(); 是在对应方法并接受方法的返回值。
变量名=方法名 是给方法又起个名字。
注意事项4: js中不存在方法重载 实参个数可以和形参个数不一致。
js方法中默认数组arguments来接受所有的实参。
形参： 定义方法时 参数列表定义的变量。
实参： 方法调用时 传递的数据 。
//求两个数的和 function add1(a, b){//参数列表：定义变量接受方法执行需要的原始数据 不需要写var var sum=a+b; return sum; } var sum2=add1(1,3);//调用方法 //alert("sum2="+sum2); function add2(a, b){//参数列表：定义变量接受方法执行需要的原始数据 不需要写var var sum=a+b; alert(a+"+"+b+"="+(a+b)); //return;//结束方法 把返回值返回给调用者 } //sum2=add2(1,3); //alert("sum2="+sum2);//undefined 当方法没有返回值 调用者接受 获取的是undefined //sum2=add2;//给方法add2又起个名字叫sum2 //alert("sum2="+sum2); //var sum3=sum2(1,3);function add3(a,b){ alert("a="+a+",b="+b); for(var i=0;i<arguments.length;i++){//每个方法中有个默认的数字 arguments 来接受方法的参数列表 alert("arguments["+i+"]="+arguments[i]); } } //add3(1);//b=undefined //可以不给参数列表传值 //add3(1,2);//可以给方法传递比参数列表多的参数 //add3(1,2,3); -
对象：数据和功能的封装体。
-
四、JS已有的学习
Array类 数组
js数组特点：
- js不存在下标越界 数组长度可变
- js数组元素默认值是undefined
- js数组元素类型可以不同
js数组方法：
属性：length 获取元素个数
方法：
- string join(separator) 使用参数字符拼接所有元素 返回一个字符串
- void push([item1 [item2 [. . . [itemN ]]]]) 把参数元素添加到数组末尾
- void reverse( ) 元素反转
- void sort([fn]) 对数组排序 默认从小到大排序; 如果参数fn有值 按参数fn排序法则
- void pop() 移除最后一个元素 并返回此元素
- void shift() 移除第一个元素 并返回此元素
var arr;
arr=new Array();//创建一个数组 没有元素
arr=new Array(5);//创建一个数组 有5个元素
arr=new Array(1,2,3,5,6,7);//创建一个数组 元素是指定的值
arr=[1,4,5];//简化写法
String 字符串
属性：length 获取字符个数
java相同方法：
- char charAt(index); 获取idnex处的字符
- string string1.concat([string2[, string3[,]]) 字符串拼接 形成一个新的字符串
- int indexOf(subString[, startIndex]) 获取subString第一次出现的位置
- int lastIndexOf(substring[, startindex]) 倒着找，找不到返回-1
- string replace(rgExp, replaceText) 使用replaceText替换第一个rgExp
- string[] split(separator) 分割字符串
- string substr(start [, length ]) 截取子串从start开始总共length个字符
- string substring(start, end) 截取子串从start开始到end-1处的字符
- string toLowerCase( ) 转换为小写
- string toUpperCase( ) 转换为大写
js特有的方法：
- string bold(); 在字符串两边加b标签
- string fontcolor(colorValue);设置font的color属性
- string fontsize(sizeValue);设置font的size属性
var str;
str=new String("123");//创建字符串方式1 通过new 调用String的构造方法
str="123";//创建字符串方式2 通过""
537
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
