03 Javascript初识

时间:2021-01-07 03:14:30
Javascript语言(★★★★★)
     Javascript是基于对象和事件驱动的脚本语言,作用在客户端。
              特点: * 交互性 * 安全性(不能访问本地的硬盘)   * 扩平台性(浏览器就能解析js)
                   
      javascript和java根本不同
          Netscape(网景)     开发livesrcipt(javascript前身)
                    java语言,升级内核,(改名livescript改成javascript)                   
                    微软(巨头)开发一套语言(jscript)                   
                    弹劾:微软 SUN ECMA(欧洲计算机制造协会)
                   
                    ECMASciprt(标准)                   
                          * javascript是基于对象,java是面向对象。
                          * javascript是解析可以执行,java先编译再执行。
                          * javascript是弱类型语言,java是强类型语言。
                   
               * javascript的组成
                    * ECMAScript(标准)
                    * BOM(Browser Object Model)     浏览器对象模型
                    * DOM(Document Object Model) 文档对象模型         
         
          * javascript与html的结合方式(★★★★)
               * js与html的结合方式(自己编写)
               * html提供了标签,<script type="text/javascript">js的代码</script>,
              
               * 引入外部文件的方式(工具类)
                    * 需要先有一个js的文件(.js结尾的)
                    * 引入到html页面中,<script type="text/javascript" src="xx.js"></script>
                   
               * 注意:如果script的标签引入了外部的文件,那么script内部js代码就不会被执行。              
               * 可以放在页面的任意位置上
               * 外部文件不能包含 <script> 标签。

Javascript语法
     Javascript的注释: 单行和多行注释
JavaScript 语句
     是发给浏览器的命令。这些命令的作用是告诉浏览器要做的事情。
     在JavaScript 标准,浏览器把行末作为语句的结尾, 通常要在每行语句的结尾加上一个分号。大多数人都认为这是一个好的编程习惯. 

变量和javascript原始数据类型    
          * 定义变量,需要使用一个关键字(var),并且声明任何类型的变量,都使用该关键字。

               可以直接不声明直接使用
               可以重复定义
               可以这个赋值数字,下次赋值String,再下次赋值null都没问题
 
      可以理解为五大类
     * Undefined、Null、boolean、number 和 string
          * String字符串类型: 单引号和双引号都代表字符串
          * Number数字类型:  不区分整数和小数
          * Boolean布尔类型
          * Null代表空,一般情况下给引用赋值
          * Undefined 未定义(当声明一个变量,而没有赋值)
                             
 * typeof(变量),判断变量是什么类型.                

Javascript运算符号
     1.算术运算符: 用于执行变量与/或值之间的算术运算。
          '+'    '-'    '*'    '/'    '%'    '++'    '--'
        注意:  0或者null都代表是false,非0或者非null代表是true,默认用1表示。 
     2.赋值运算符
          '='   '+='   '-='   '*='   '/='   '%='
     3.特殊的用于字符串连接的'+'
          如果把数字与字符串相加,结果将成为字符串。
     4.比较运算符
          '!='   '>'  '>='   '<'   '<='
           ==     (只比较值)
           ===   (比较值和类型)
     5.逻辑运算符(与 和 或 要用双符号)
          '&&'   '||'   '!'
     6.唯一的条件运算符
          variablename=(condition)?value1:value2 

if else语句
     If 语句 
     If...else 语句 
     If..else if...else 语句 
 
Switch 语句
     如果希望选择执行若干代码块中的一个,可以使用switch 语句.
 
with语句
     with(对象) {} : 可以确定对象所使用的范围, 在范围内可以直接使用指定对象的属性和行为, 而不用对象的形式调用, 简化了对象的操作.
 
JavaScript的for循环, do while循环, 和while循环 和Break语句, Continue语句不再赘述.

JavaScript 中创建三种消息框:警告框、确认框、提示框。
     1.警告框
               经常用于确保用户可以得到某些信息.当警告框出现后,用户需要点击确定按钮才能继续进行操作。
          语法: 
               alert(文本)    //可以在其中加入'\n' 得到换行效果
               03 Javascript初识
     2.确认框
               确认框用于使用户可以验证或者接受某些信息.当确认框出现后,用户需要点击才能继续进行操作。如果用户点击确认,那么返回值为 true。否则返回值为 false。
          语法:
               confirm(文本)
               03 Javascript初识
     3.提示框
               提示框经常用于提示用户在进入页面前输入某个值. 当提示框出现后,用户需要输入某个值,然后点击确认或取消按钮才能继续操纵. 如果用户点击确认,那么返回值为输入的值。如果用户点击取消,那么返回值为 null。
          语法:
               prompt("文本","默认值");
               03 Javascript初识

Javascript函数
     函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。将脚本编写为函数,就可以避免页面载入时执行该脚本。函数包含着一些代码,这些代码只能被事件激活,或者在函数被调用时才会执行。你可以在页面中的任何位置调用脚本(如果函数嵌入一个外部的 .js 文件,那么甚至可以从其他的页面中调用)。
     注意: 参数列表只写变量名,不用var,但是该变量只在本函数内有效, 和函数外定义var某变量作区分.
 
//动态函数 var show = new Function("x","y","var sum=x+y; return sum");
//这样写在一起也行 var show = new Function("x,y","var sum=x+y; return sum");
 
return 语句
     return 语句用来规定从函数返回的值。因此,需要返回某个值的函数必须使用这个 return 语句。
 
JavaScript 变量的生存期
     当您在函数内声明了一个变量后,就只能在该函数中访问该变量。当退出该函数后,这个变量会被撤销。这种变量称为本地变量(局部变量)。您可以在不同的函数中使用名称相同的本地变量,这是因为只有声明过变量的函数能够识别其中的每个变量。
     如果您在函数之外声明了一个变量,则页面上的所有函数都可以访问该变量。这些变量的生存期从声明它们之后开始,在页面关闭时结束

for...In 声明用于遍历数组或者对象的属性(对数组或者对象的属性进行循环操作)。
     语法:
          for (变量 in 对象)
          {
              在此执行代码
          }
     实例:
          03 Javascript初识

JavaScript 事件
     事件: JavaScript 使我们有能力创建动态页面。事件是可以被 JavaScript 侦测到的行为。
 
网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。比方说,我们可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数。事件在 HTML 页面中定义。
 
事件举例:
     鼠标点击 
     页面或图像载入 
     鼠标悬浮于页面的某个热点之上 
     在表单中选取输入框 
     确认表单 
     键盘按键 
注意:事件通常与函数配合使用,当事件发生时函数才会执行。

JavaScript 特殊字符
 03 Javascript初识
换行
     可以在文本字符串内部使用反斜杠对代码进行折行。下面的例子是正确的:
          document.write("Hello \
          World!")

JavaScript 字符串(String)对象
计算字符串的长度 
     var txt="Hello World!"
     document.write(txt.length)
为字符串添加样式 (略) 
indexOf() 方法 
如何使用 indexOf() 来定位字符串中某一个指定的字符首次出现的位置。 
match() 方法 
如何使用 match() 来查找字符串中特定的字符,并且如果找到的话,则返回这个字符。 
replace() 
     在字符串中用某些字符替换另一些字符。
          var str="Visit Microsoft!"
          document.write(str.replace(/Microsoft/,"W3School"))

JavaScript Date(日期)对象: 返回当日的日期和时间  
 
getDate() 返回一个月中的某一天
getDay()  返回一周中的某一天 (0~6)
getMonth() 返回月份(0~11)
getFullYear() 返回年份
 
getTime() 
     返回 1970 年 1 月 1 日至今的毫秒数
setTime()
     根据毫秒数设置时间
 
setFullYear()  
     使用 setFullYear() 得到精确的日期。 
          var d = new Date()
          d.setFullYear(1992,10,3)
          document.write(d)
     注意:表示月份的参数介于 0 到 11 之间。也就是说,如果希望把月设置为 8 月,则参数应该是 7。
 
Date.parse(datestring)
     可解析一个日期时间字符串,并返回 1970/1/1 午夜距离该日期时间的毫秒数。可以与Date对象的setTime()结合使用.但是时间显示为12:00令人不爽, 还不如以上的使用setFullYear.
 
在下面的例子中,我们将日期对象设置为 5 天后的日期:
     var myDate=new Date()    //从 Date 对象返回一周中的某一天 (0 ~ 6)
     myDate.setDate(myDate.getDate()+5)
注意:如果增加天数会改变月份或者年份,那么日期对象会自动完成这种转换。
 
toUTCString() 
     使用 toUTCString() 将当日的日期(根据 UTC)转换为字符串。
     03 Javascript初识 
toLocaleString()     返回当地时间

Javascript数组
     定义数组: 数组对象用来在单独的变量名中存储一系列的值。
          简洁写法
               var myArray = ["nihao","butaihao"]
          使用关键词 new 来创建数组对象。下面的代码定义了一个名为 myArray 的数组对象:
               var myArray=new Array()
          也可以使用一个整数自变量来控制数组的容量:
               var mycars=new Array(3)
     使用 for...in 声明来循环输出数组中的元素。
               var array = new Array("aaa","bbb","ccc");
       for(var x in array){
                    document.write(array[x]+"<br />");
       }
     concat合并两个数组
     join方法将数组的所有元素组成一个字符串。 
          03 Javascript初识
     sort() 可直接按字母顺序
     sort() 按数值顺序,加入sortNumber函数,将函数名作为参数传入sort方法即可.
          function sortNumber(a,b)
          {
               return a - b
          }
     pop() 删除并返回数组的最后一个元素
     push() 像末位添加元素,并返回新的长度

Boolean(逻辑)对象用于将非逻辑值转换为逻辑值(true 或者 false)。检查逻辑对象是 true 还是 false
  • 可以将 Boolean 对象理解为一个产生逻辑值的对象包装器。
  • Boolean(逻辑)对象用于将非逻辑值转换为逻辑值(true 或者 false)。
  • 使用关键词 new 来定义 Boolean 对象。下面的代码定义了一个名为 myBoolean 的逻辑对象:
  • var myBoolean=new Boolean()

注释:如果逻辑对象无初始值或者其值为 0、-0、null、""、false、undefined 或者 NaN,那么对象的值为 false。否则,其值为 true(即使当自变量为字符串 "false" 时)!


Math(算数)对象
      round 方法对一个数进行四舍五入。
      floor(x) 对一个数进行下舍入。 
      random() 返回一个介于 0 和 1 之间的随机数
 
     案例: 返回一个介于 0 和 10 之间的随机数
          Math.floor(Math.random()*11);

JavaScript RegExp 正则对象
     var reg = new RegExp("表达式")
     var reg = /^ 表达式 $/ 
          * test(); 返回true或者false
link day01

Javascript全局函数
     全局对象是预定义的对象,作为 JavaScript 的全局函数和全局属性的占位符。通过使用全局对象,可以访问所有其他所有预定义的对象、函数和属性。全局对象不是任何对象的属性,所以它没有名称。全局对象只是一个对象,而不是类。既没有构造函数,也无法实例化一个新的全局对象。
eval(string)
     计算JavaScript 字符串,并把它作为脚本代码来执行。
isNaN()
     检查其参数是否是非数字值。

案例一: 九九乘法表
document.write("<table border='1px'>");
for(var x=1;x<10;x++){
document.write("<tr>");
for(var y=1;y<=x;y++){
document.write("<th>"+x+"*"+y+"="+x*y+"\t"+"</th>");
}
document.write("</tr>");
}
document.write("</table>");

字符串的trim方法模拟
function mytrim(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);
}