javascript笔记 --基础

javascript


也是一种开发语言，虽然名字中有“java“，但是和java语言是没有关系的，java主要是做服务器端程序的开发。
javascript主要是做客户端页面中脚本语言的开发，所以javascript是一种脚本语言，
脚本：可以直接嵌入到浏览器页面运行的程序。


javascript语言的特点：
1.解释执行
2.弱语言
3.基于对象。
4.事件驱动
5.简单性。
6.不同浏览器的支持不同


如何去写javascript代码：
javascript代码的位置：
1.直接写到页面中
2.写到标签元素的事件属性里面
3.写到一个外部的文件里面（.js结尾的文件）
如果是直接写到页面中，必须写到一个标签里面：
<script language="javascript">
//在这里写js代码
</script>




javacript的运行


浏览器可以直接运行js代码（解释执行），但是不同浏览器中运行相同的js代码可能效果是不一样的，甚至可能会报错
js代码是嵌入在页面中，所用使用浏览器去运行页面就可以执行到页面中的js代码。


使用javascript可以做什么事情：
1.对客户端的数据进行计算。
2.动态的改变页面中标签元素的属性
3.动态的创建或者删除页面中的标签元素
4.获取页面中的数据（输入框的值，鼠标的当前坐标等等）
5.验证用户所填写的表单中的数据的合法性。
6.在Ajax中使用js去解析服务器端传到页面的文本或者xml文档


注：DHTML的概念很多时候指的就是使用html+css+javascript在页面中实现的一些动态效果。

javascript中的注释：
//单行注释
/*
这是多行注释
*/
/**


也是注释


*/


js中的三种弹框方式：alert  confirm  prompt
  //alert属于提示框，或者是警告框
  //confim 是确认框
  //prompt 输入对话框


  这三个方法都是window对象的方法，只有window对象的方法可以省略window对象。
  三种弹框都用一个共同的特点：当浏览器运行一个弹框代码的时候，用户如果不点击
  弹框中的确定或者取消按钮的话，浏览器就会卡在弹框处，下面的页面代码就不会被执行。
  alert弹出一个警告框/提示框，用户点击确定按钮之后就可以继续访问
  confirm 弹出一个确认框，用户可以点击确定或者取消，这个confirm方法会相应的返回true/false


  prompt弹出一个可以让用户输入的窗口，用户可以输入后点击确定，这个方法会把用户的输入内容返回。
 同时还可以在输入框中设置一个默认值。
 prompt("您的名字："，"wukaifeng");


 js中的变量声明：
 任何类型的变量都可以用var关键字声明
 var  a="";
 var b=10;
 var c=10.9;
 var d=new Date();
 var e=true;




js中的undefined 和null：
 //弹出null
 var age=null;
 alert(age);


 var age;
 alert(age);//弹出undefined


 js的标识符的命名规范：
 1，不能以数字开头（字母，数字，下划线，$符号）
 2，区分大小写
 3，不能使用js的关键字和保留着
 


 js中一些内置对象的作用：




  <script language ="javascript">
  var s ="hello world";
//获得字符串的长度
  document.write(s.length+"<br>");
  //从下标为3的位置开始，截取4个字符，包括下标为3的位置的字符
  document.write(s.substr(3,4)+"<br>");
  //从下标为6的位置开始截取，截取到下标为8的位置，但是不包括下标为8的位置。
    document.write(s.substring(6,8)+"<br>");


//trim()去掉字符串两边的空格，但是这个方法有可能浏览器不支持
   document.write(s.trim().length+"<br>");
   //字符串转换为大写
  document.write(s.toUpperCase()+"<br>");
  //字符串转换为小写
    document.write(s.toLowerCase()+"<br>");
//分割字符串返回一个数组，
document.write(s.split(" ")+"<br>");
  document.write(s.split(" ").length+"<br>");
  document.write(s.split(" ")[0]+"<br>");


  document.writeln("<h1>日期对象</h1>");


  var date = new Date();
  document.writeln(date+"<br>");
  //获得当前年份减去1900
    document.writeln(date.getYear()+"<br>");
//获得当前年份
document.writeln(date.getFullYear()+"<br>");
//获得月份加1
    document.writeln(date.getMonth()+"<br>");
    //获得当前是一个月中的哪一号
    document.writeln(date.getDate()+"<br>");
   //获得星期几
     document.writeln(date.getDay()+"<br>");
   //获得24小时制中的小时
     document.writeln(date.getHours()+"<br>");
    //获得时间中的  分
 document.writeln(date.getMinutes()+"<br>");
  //获得时间中的 秒
 document.writeln(date.getSeconds()+"<br>");
 //获得时间中的  毫秒
     document.writeln(date.getMilliseconds()+"<br>");


 document.writeln("<h1>对象Math对象</h1>");
 //获得常量圆周率
  document.writeln(Math.PI+"<br>");
  //获得常量e
   document.writeln(Math.E+"<br>");
//获得随机数【0，1）
document.writeln(Math.random()+"<br>");
//获得随机数【23，36】
 document.writeln(parseInt((Math.random()*14+23))+"<br>");
//获得一个较小的数字//不一定是两个参数
  document.writeln(Math.min(1,10)+"<br>");
  //获得一个较大的数字
  document.writeln(Math.max(1,10)+"<br>");
 document.writeln("<h1>数组对象</h1>");
//创建数组的时候，可以指定数组的长度，也可以不指定


/*


js中数组的特点：
1，数组的长度是可变的
2，数组里面放的数据类型也可以不同
3，数组长度是和你使用的数组最大的下标相关的


*/
 // var a= new Array(5);
   var a= new Array();
  a[0]="tom0";
  a[1]="tom1";
  a[2]="tom2";
  a[5]="tom5";
  document.write(a.length+"<br>");
  for(var i=0;i<a.length;i++){
  document.writeln(a[i]);
  
  }
  //输出的结果为：tom0 tom1 tom2 undefined undefined tom5 


   document.writeln("<br>");
//for ～in 循环
   //这里的这个变量i每次拿到的是数组下标，而且是已经存在值的位置的下标，对于那些值是undefined
   //的位置下标是不会拿的。
for(var i in a){
document.writeln(a[i]);
}
//输出的结果为：tom0 tom1 tom2 tom5


  </script>




5.
其他常见的对象：
 window
 window.location
 window.history
 window.document
 //新建一个浏览器窗口打开url
window.open("url");
//在当前这个浏览器窗口中打开url
window.location.href="url";
 
 <input type="button" value="跳转"
  onclick="javascript:window.open('http://www.baidu.com')"/>
  <input type="button" value="前进"
  onclick="javascript:window.history.forward()"/>
   <input type="button" value="后退"
  onclick="javascript:window.history.back()"/>


  在使用浏览器进行一系列的页面访问的时候，浏览器会记录这个访问的历史记录的。


  //访问历史记录的下一个页面：
  window.history.forward()
    window.history.go(1);
  //访问历史记录的上一个页面：
  window.history.back()
    window.history.go(-1);
//访问历史记录中的前n个页面或者后面n个页面。
  window.history.go(n);
  window.history.go(-n);


//使用这个在js中可以拿到html页面中的标签元素对象（js有对象的概念）


//document代表的是整个html文档
window.document

//通过id属性拿这个元素对象（默认id属性的值是唯一的）
//如果html页面有两个id相同的元素，那么拿到的是页面最上面的，也是最先声明的元素对象。
var div1=window.document.getElementById("div1");
//window.alert(div1);

//通过name属性来拿元素对象
//拿到的是一个元素对象的集合
//可以循环变量集合，或者直接通过集合下标来拿某一个元素对象。
var v= document.getElementsByName("mydiv1");
//alert("v="+v);
//alert("v.length="+v.length);
//alert("v.[0]="+v[0]);

//通过标签的名字拿，拿到的也是页面中所有的某一个相同标签的元素对象的集合。
var vv=document.getElementsByTagName("div");


                alert("vv="+vv);
alert("vv.length="+vv.length);
alert("vv.[0]="+vv[0]);


//通过class属性来拿
//拿到页面中所有class属性值相同的元素对象的集合。
var a=document.getElementsByClassName("cla");
       alert("a="+a);





js中拿到某一个元素对象后可以做什么事情
 1，给元素中添加文本值（如果可以添加的话）
 2，修改元素中的属性值。
 3，添加或者删除某些元素。


<body>
  <input id="name" type="text" name="name" value="tom"/><br>
  <div id="mydiv">this is div</div>
</body>


  <script language="javascript">
   var temp = document.getElementById("name");
   temp.value="lisi";
   alert(temp.value);
   var temp2 = document.getElementById("mydiv");
   temp2.innerHTML="<font color='red'>HELLO WORD</font>";
   alert(temp2.innerHTML);
  </script>




  JS中可以获得任何一个元素对象中的文本值
1.让用户输入的标签元素
例如 文本输入框、密码框、文本域等等
 
 首先拿到这个元素对象
 var myInput = document.getElementById("myInput");


 获得元素中的文本值:
 var value = myInput.value;
 设置元素中的文本值:
 myInput.value = "zhangsan";




2.直接写在开始标签和结束标签中间的元素
例如  div  span font td  p 等等
  <div>hello</div>
  
  首先拿到这个元素对象
  var myDiv = document.getElementById("myDiv");


  获得元素中的文本值:
  var value = myDiv.innerHTML;
  设置元素中的文本值:
  myDiv.innerHTML = "zhangsan";




    JS中判断一个变量是否是一个数字
//这个全局方法判断一个标量【是否】【不是】一个数字
isNaN()  返回值 true|false
例如:
var a = "123abc";

alert(isNaN(a)); //输出true


var b = "123";

alert(isNaN(b));//输出false


    JS中让一个标签对象获得焦点:
例如:
document.getElementById("inputA").focus();


    JS中的全局函数eval
//使用全局函数eval计算出一个字符串类型的运算式子的结果.
var c = "1+4*5";
alert(eval(c));//输出21



    JS中的两种定时调用的方法
      window对象的俩个方法:
setInterval
setTimeout


      例如:
      每隔1000毫秒调用一样showTime方法.
      方法返回一个id值,表示这个定时调用任务的id值,将来可以使用一个方法通过这个id值把之前建立的定时调用的任务删除掉.
      var id = setInterval("showTime()",1000);
      
      清除某个定时调用的任务
      window.clearInterval(id);


      
      5000毫秒以后会调用showTime()方法,而且只是调用这一次.
      setTimeout("showTime()",5000);