js基础

js的结合方式

1 直接在script标签中书写

 

2 通过script标签的src属性

首先新建一个文件名为：02_js结合方式02.js  里面直接书写js代码:

         alert(“a”);

然后在html中引入

 

注意：

         1->位置任意，但是位置越靠前执行越早(重要)

         2->js外部文件推荐扩展名是.js但是其实任何后缀名都可以

         3->使用script标签引入外部文件，那么该script标签中就不要书写js代码了

 

js基本语法

变量声明:

         无论变量的类型是什么一律使用var

         varnum = 10;

         varstr = “哈哈”;

         变量区分大小写，字符串使用双引号或单引号包裹 都可以

         变量的类型可以随时改变

         varnum = 10;

         num= “哈哈”;

         变量声明可以省略掉var，不加var该变量是全局变量

         js推荐使用匈牙利类型标记法

                  variMyTestValue = 0;

                  varsMyTestValue = “呵呵”;

                  数组         a

                  布尔         b

                  浮点         f

                  函数         fn

                  整型         i

                  对象         o

                  正则表达式    re

                  字符串    s

                  变型(任何类型)      v

行尾使用 ; 作为结束符号，可以没有 ; 没有 ; 时使用回车作为结尾

js中的注释：  //单行注释    /* */多行注释

封装代码块与java相同使用{}封装

         functionfun1{

                  alert(“a”);

}

 

js中类型&原始类型

js中类型分为原始数据类型和对象数据类型，与java的基本数据类型和引用数据类型相同

java中基本数据类型有:byte shortint long float double boolean char

js中原始数据类型有:

number(数字,包含浮点型和整型)

string(js的突破 没有char类型)  boolean(布尔，true和false)

null(用来表示引用数据类型的占位符) var person = null 代表以后给person的是一个引用值，都是人为赋值，系统不会给变量或其他默认设置为null而会设置为undefined

undefined(未定义类型)

         没有给该变量赋值，系统默认赋值为undefined

         函数没有返回值，默认返回undefined

原始数据类型，判断符:

         typeof判断变量的类型

为什么null的类型是object?

         是js中的一个bug，但是这个bug被认为很贴切所以保留了该bug，因为null就是对象类型的占位符 所以比较贴切

 

js中的语句:

         java中有哪些语句:

                  循环：for  while-do do-while

                  判断：if  switch

         js中语句和java中的一模一样!

                  唯一特殊：java中的增强for循环在js中没有

                                   js中有for(var **in xxx) 语法用来遍历对象的属性

 

js中的运算符

一元运算符:

         void==> 学完函数讲

         i++  ++I --i  i--

一元加法，减法

         vara = +1;   就是a=+1(正1)

         varb = -1    就是b等于负1

         在js中的高级应用:

var c = +”1”;   在进行类型转换   c会转换为数字类型

  此时会弹出：number  c:1240

         varc = -“123”;  //得到-123 也是number类型

         varc = +”abc”;  //会转换，但是会转换失败，转换失败c的类型也是number只不过值为NaN(not a number 不是一个数字)

 

位运算NOT 使用~表示

         位运算NOT实质上时对数字求负，然后减1

         variNum1 = 25;

         variNum2 = ~iNum1;   //得到的结果是-26

 

boolean运算符(重要)

! 非  && 与  || 或

js中自动类型转换

if(“abc”){ js中if的括号里可以写入任何值如果传入的不是布尔值  就会自动去转

         alert(“true”);

}

转换的规律:

         string: “”为false  其他都是true

         number: 除了0其他都是true  NaN也是false

                  NaN参与的任何布尔运算返回值都是false  除了!=

         因为undefined是null衍生出来的  所以  undefined == null 为true

null 和 undefined都转换为false

alert(null || “abc”);  //返回true 因为:”abc”是true  null是false

 

数学运算符： + - * / %

比较数字和字符串

 alert(11>3);  true

 alert(“11” > 3);  当运算符两端，一端是数字 一端是其他类型时 其他类型会向数字类型转换 true

 alert(“11” > “3”); 字符串再进行比较时，规律是比较首字符asc码，如果首字符asc码一样就比较第2位.. false 3的asc码大于1的asc码

 alert(“11” > “1”);  第一位相同 第二位的第一个是1第二个没有了 说明1大 所以为true

 alert(“abs” > 7);  abs转为数字类型 但是会失败所以为NaN   所以为false

 

 

等性运算符:

         ==:

         !=:

                  表达式                      值

                  null== undefined    true

                  “NaN”== NaN                 false

                  5== NaN                  false

                  NaN== NaN            false

                  NaN!= NaN             true

                  false== 0                          true

                  true== 1                   true

                  true== 2                   false

                  undefined== 0        false

                  null== 0                    false

                  “5”== 5                    true

         ===:                 比较时也会比较类型，并且不会类型转换

三元运算符:

         条件?结果1:结果2;

 

函数对象

Object对象(了解)

和java中的object一样，是所有类的超类

         toString()方法,因为object有该方法所以所有对象都有该方法

 

function函数对象

java中方法,函数

         publicvoid ***(){}

javaScript:

         functionfun1(){} 严格上来说这是一个对象，特殊之处就是像java中的方法一样可以执行

证明fun1是一个对象的代码:

结果图

因为fun1是一个对象所以才可以调用toString()方法，toString()方法会将fun1的所有代码转为字符串

js中函数对象的创建方式：

         方式1：

                  varfun1 = new Function(“a,b”,”alert(a+b)”);

var fun1 = new Function(“a”,”b”,”alert(a+b)”);    只限于学习，一般不这样

                          函数对象的构造方法中，最后一个参数是定义函数的体，前面的都是定义函数的参数

         方式2:

                  function fun2(){

                          代码

}

         方式3：

                  varfun3 = function(){

                          alert(“aa”);

}

 

错误提示:

因为function a(a,b){}相当于var a = new Function(…);

而后面有定义了一个a,var a = 10;  由于javaScript不很严格，所以下面定义的a变量会替代掉a函数对象。后面又调用a但是此时a已经不是函数对象 所以会报错

 

函数的调用：

js中函数调用只看函数名称，不看参数列表

 

函数中的内置对象:arguments

arguments是函数运行时的实际参数列表

         arguments.length  获取长度

         arguments[0]   取得第一个参数

js中存在函数的重载吗?

         存在重载，重载方式:

函数的返回:

1.     如果函数没有显式指定返回值，默认返回undefined

2.     使用return关键字返回

3.     return在js中也可以作为结束方法运行的功能

运算符void的使用:

         用来拦截函数的返回值

 

效果图:

实际使用的地方:

因为如果函数有返回值的话a标签会跳转到另一个页面，第二个a标签是为了阉割掉href的功能使href和onclick事件不产生冲突!

 

 

 

对象的分类

本地对象(自己定义的对象):

         内建对象(比较特殊):不同于其他本地对象的地方是内建对象可以直接使用无需创建实例

                  Global   Math

object  function   String   Boolean  Number   Array  Date RegExp

主机对象(不是自己定义的对象):

BOM

DOM

 

 

3个包装类:  String  Boolean Number

string boolean  number   原始类型

String Boolean  Number   对象类型

js中也提供了一个特性，原始类型string可以直接使用对象类型的方法和属性,所以string boolean number被定义为伪对象

 

 

String对象:

         属性:

                  length  字符串的长度

                  第二个打印objecct

         方法:

                  1没用的方法

                          big()  给文字加上<big>标签

                          sub()  sub标签…..

                  2重要的方法

                          indexOf

                          lastIndexOf

                          charAt:

                                   str1.charAt(0);返回字符串中指定索引的字符

                          charCodeAt:

                                   str1.charCodeAt(0);  返回字符串中指定索引的字符的asc码

                          subString

                                   截取字符串:str1.subString(0,1);  //从0截取到1

                          slice

                                   str1.slice(0,1);  //从0截取到1 支持负数str1.slice(0,-1);

                  3与正则结合的方法

                          split

                          replace

                          match

                          search

 

3个包装类的构造方法应用&instanceof运算符

通过调用包装类的构造方法进行强制类型转换:

instanceof运算符:

         typeof  运算符判断原始类型的

         instancef运算符判断属于那种对象的

var num1 = new Number(1);

alert(num1 instanceof Number);  //true

 

 

Global对象  内建对象

         6个方法  -- 关于解码，编码的方法

         encodeURI  编码

         decodeURI  解码

会将传入的中文进行编码

         encodeURIComponent  编码，当提交的值中有url中的敏感符号时，使用该方法对url敏感符号进行编码

         decodeURIComponent  解码

使用encodeURIComponent时不仅将中文编码还会将关键符号进行转码(//  :  都会被转码) 因为当参数里有关键符号时会让浏览器出错 比如传的参数是:?张/三:  浏览器找到该参数值的时候又找到了?还以为重新开始传入值然后又看到了/以为资源还没有完就会混乱

         escape  已经过时

         unescape已经过时

 

isNaN() 判断某个值是不是NaN,因为NaN == NaN 都是false 所以就没办法判断，只能使用该方法

         isNaN(NaN);   //返回true

parseInt()  转换成整数

parseFloat()  转换成浮点数

         varstr = “123”;

         varnum =parseInt(str);  //将”123”转换为123

         转换的三种方式:

1.     使用+号

2.     使用new Number();

3.     parseInt();

三种转换方式的不同

var str = “123abc”;

alert(+str);  //显示NaN

alert(newNumber(str));  //显示NaN

alert(parseInt(str));  //显示123

区别：1,2两种方式属于将字符串整体进行转换，如果字符串中包含一个或以上转换不了的字符时返回NaN,第三种方式从左到右依次转换（能转换一个是一个）直到遇到不能转换的值停止转换

 

Math对象  内建对象

该对象的方法和属性需要加上类名  Math

PI  圆周率   (属性)

方法:

         random()  返回随机数（0-1）包括0不包括1  Math.random();

         round()    四舍五入方法

 

实例:  求0-100的随机数

  注意前面必须套一个四舍五入的方法

 

max(num1,num2)  / min(num1,num2)   最大值和最小值

 

Array对象  数组

创建方式

         创建方式1:

                  vararr1 = [1,2,3];   //创建数组并初始化值

         创建方式2:

                  vararr2 = new Array(1,2,3);  //创建数组并初始化值

         创建方式3:

                  vararr3 = new Array(3);   //创建的数组有3个元素，并不是赋值

                  构造函数如果只传一个参数，并且是整数那么这个参数就是数组的长度

属性

         length      长度

        

 

js中数组的特点:

1.     数组中的于是元素类型没有限制，如一个数组中可以同时有多个不同类型

a)      var arr1 = [“ss”,1,true];

2.     如果在改变数组元素的时候，下标越界是不会有错误的，会自动更改数组长度

a)      var arr1 = [1,2];

b)      arr1[5] = 10;   //自动将arr1的数组长度变为6

                                           i.           此时[0]=1 [1] = 2 [5] = 10  那么其他的那?  其他的是undefined

                                          ii.           数组的长度不是固定的，用到哪里就有多长

方法:

         join():

                  将数组中的每个元素连接起来返回一个字符串，参数就是连接符(默认连接符是,)

                  arr1.join(“--”);  //以—为连接符

                  字符串拼接优化 可以使用join方法:

                          把需要拼接的字符串写在数组里 然后调用join方法传入空字符串就可以拼接

                  普通的用+号拼接会产生5个字符串对象

                  首先str1,str2,str3各占一个 然后str1+str2生成一个  再用str1+str2生成的加上str3再生成一个，就会是5个对象

         push()- - pop():  模拟栈结构的

                  队列:  先进先出      栈：先进后出

                  push(): 向数组末位添加一个元素

                  pop()  : 把数组末位最后一个删除

         shift()== unshift()  模拟队列结构

         reverse()将数组的元素顺序倒置

         sort()    将数组的元素排序,该方法默认排序规则按照字符串规则排序，从左向右比较字符的aasc码排.

                  如果按照数字排就需要一个比较器(函数对象):

                  functionabc(a,b){   //函数名可以随意

return a-b;  //a大就返回正数 b大就返回负数 否则返回0

}

arr1.sort(abc);

 

Date对象:

方法:

        

月份是0-11月  要把得到的月份+1

getDay() 获取星期

new Date(10000);  表示获取的时间是格林内置时间过去多少毫秒之后的时间

RegExp对象:  正则表达式对象

构造方法:

         varreg1 = new RegExp(“正则表达式”,”匹配模式”);

                  匹配模式分为两种:

                          1.“i”  忽略大小

                          2.“g”  全局匹配

                                   如果又忽略大小 又全局匹配 就写gi

方法

 

作业和相关知识

对数组进行排序(不要使用sort()方法)

打印9 9 乘法表   整齐工整

         document.write(“输出的文本”);  向文档中写内容,是可以输出标签的

猜数字的游戏

         输出提示: alert(“提示框”);

         输入值：使用

prompt(“请输入一个值”,”输入框的默认内容”);  //返回用户输入的值

         确认框:

                  confirm(“提示内容”);  //点击确认返回true  否则返回false

         窗口关闭:

                  window.close();