javaScript 基础知识

javaScript 基础知识

一 JavaScript概述

JavaScript概述

• JavaScript是客户端脚本语言,是一种基于对象（Object）和事件驱动（Event Driven）的脚本语言。
• JavaScript认为文档和显示文档的浏览器都是由不同的对象组成的集合。这些对象具有一定的属性，你可以对这些属性进行修改或计算

JavaScript的基本特点：

• 脚本语言
• 基于对象
• 简单性
• 动态性
• 跨平台性

JavaScript与Java的区别

• JavaScript和Java是两个公司开发的不同产品

• Java是SUN公司推出的新一代面向对象的程序设计语言

• 而JavaScript是Netscape公司的产品，其目的是为了扩展其浏览器功能

• 现在JavaScript已被标准化为ECMAScript，主流的浏览器都支持

认识javascript

+
=




      　　　

示例说明

• 在标识

  二 基本语法

  数据类型

  • 字符串："abc" 'hello' "你好"
  • 数字：包括整数数字和浮点型数字
  • 布尔值：true 和　false
  • 空值：null
  • 未定义值：undefined
  • 特殊字符：又叫转义字符
  • \b　表示退格
  • \n　表示换页
  • \t　表示Tab符号
  • \r　表示回车符
  • "　表示双引号本身
  • '　表示单引号本身
  • \　表示反斜线

  变量及类型转换

  • 变量的声明：使用 var来声明变量

  var str = "你好";
  
  

  • 类型转换：

   //字符--〉数字     Number()
  var x=Number("1");
   //数字--〉字符     String() 
  var y=String(1);
  

  表达式和运算符

  • 算术运算符：+ - * / % ++ --

  var x=10;
  var y=20;
  var z= x+y;
  console.log(z);
  

  • 比较运算符：< > <= >= == !=

  var x=10;
  var y=20;
  var z= x>y;
  console.log(z);
  

  • 逻辑运算符 && || !

  var x=10;
  var y=20;
  var z= (x>y  &&  x

  • 赋值运算符 = += -= *= /= %=

  var x=10;
  var y=20;
  x+=y;
  console.log(x);
  

  • 条件选择符 条件表达式？A：B

  var co=(age>=18)?”成人”:”孩子”;
  console.log(co);
  

  数组

  数组声明：

  • var 数组变量名 = new Array()

  var week = new Arrary();
  

  • 数组的长度：使用数组的length属性来获得数组的长度

  var week = new Arrary();
  
  var len=week.length;
  

  • 页面完成示例

  //声明和定义一个 数组  
  var  array =new Array();
  //console.log(array.length);
  // 给数组添加内容 
      array[0]="礼拜日";
      array[1]="星期一";
      array[2]="星期二";
      array[3]="星期三";
      array[4]="星期四";
      array[5]="星期五";
      array[6]="星期六";
      // 修改数组的内容
      array[0]="星期日";
      //获取数组中的内容 
      alert(array[6]);
      //显示数组的长度 
      alert(array.length);
      //遍历 数组中的内容  
      for(var i=0;i

  三 流程控制

  顺序执行

  • 按照程序编写的顺序来执行

  console.log("星期一");
  console.log("星期二");
  console.log("星期三");
  console.log("星期四");
  console.log("星期五");
  console.log("星期六");
  

  条件执行

  • if if else switch 条件语句

  
      //例子    数字
          var x=100;
          if(x>10){
              console.log("x的值是大于10的");
          }else{
              console.log("x的值是不大于10的");
          }
          
          //例子  成绩
          var score=85;
          if(score>90){
              console.log("该学生的成绩优秀");
          }else if(score>80){
              
              console.log("该学生的成绩良好");
          }else if(score>70){
              console.log("该学生的成绩中等");
          }else if(score>60){
              console.log("该学生的成绩中等");
          }else{
              console.log("该学生的成绩不及格");
          }
          
          
          //switch
          
          
          var  y=7;
          switch(y-6){
              case 1:
              console.log("今天星期一");
              break;
              case 2:
              console.log("今天星期二");
              break;
              default:
              console.log("不知道星期了");
          }
          
  

  循环语句

  • for while do while

  // for 循环语句 
  for(var i=0;i<10;i++){
  console.log(i);
  }
  
  // while  循环语句
  var flag=true;
  while(true){
  console.log(1);
  }
  
  // do while
          
  //条件一样的情况下   do while 比 wihle循环  要多执行一次   ✖
  
  
  var  d=10;
  while(d>1){
  console.log(d);
  d--;
  }
  console.log("================================================");
  var  dd=10;
  do{
  console.log(dd);
  dd--;   
  }while(dd>1);
  //证明：do while  并不必while循环多执行一次   而是  dowhile循环必定执行一次        
  

  四 函数和事件

  函数：

  • 在JavaScript中的函数可以简单理解为一组语句，用来完成一系列工作

  创建函数：

  • 创建函数的三种方式
  • 第一张方式

  var  aaa=new Function("alert(2);");  //不推荐
  

  • 第二种方式

  var abb=function(){
  console.log("你好");
  }
  

  • 第三种方式

  function   abc(a){     //推荐写法 
  console.log("你好"+a);
  }
  

  函数调用

  aaa();
  abb();
  abc(110);  //如果函数中有参数  ，在调用的时候 必须要传递参数，否则就会出现undefined
  

  函数的返回值

  • 使用return 来终止函数 并返回需要的值

  function max(x,y){
  var z=x+y;
  // 如果需要一个方法有返回值   ， 那么直接返回即可 
  return z;
  }
  

  匿名函数

  • 没有名字的函数 只能调用一次

  (function(a){
  console.log(a);
  })("你好");
  

  回调函数

  • 一个方法的参数是一个方法

  function  abc (){
    console.log("你好");
  }
  function  aaa(x){
      x();
  }
  aaa(abc); //调用aaa方法的时候  传入参数为  abc的方法
  

  五 内置对象

  Math 数学对象

  • Math对象常用方法和属性

  var e=Math.E;   //常数
    
  var pi=Math.PI;  //圆周率
  
  var r=Math.round(3.3); //四舍五入
           
  var s=Math.random();  // 随机数  0-1 
  
  //要求大家随机 1-100  之间的 随机整数  包含 1 和包含100 
             
  var sum=Math.floor((Math.random()*6))+1;
  // 获取 大于参数的 最小整数   
  var mx=Math.ceil(5.1);
  //获取 小于参数的 最大整数 
  var mi=Math.floor(5.9);
        
  // 指定 次幂
  var mp=Math.pow(5,3);
  

  Date日期对象

  • 日期对象常用方法

  String对象

  var str="美丽的风景.jpg";
  //获取 字符串中指定位置的 字符 
  var t=str.charAt(1);
  //大小写的转换  
  var a="abcd";
  var b=a.toUpperCase();  
  //获取指定字符在字符串的 位置    
  var n=str.indexOf("郑"); 
  // 按照参数 将字符串分割   
  var  sz=str.split("."); 
  //截取字符串
  var s1=str.substr(1,4);  // 开始位置   ，截取长度
  var s2=str.substring(1,4);  // 开始位置 ，结果位置
  

  Array对象

  var a=new Array();
  
  //给数组添加值
              
  a.push("北京");
  a.push("上海");
  a.push("郑州");
              
              
  var b=new Array();
              
  b.push("张学友");
  b.push("刘德华");
  //删除数组的值    ---删除最后一个  
  a.pop();
          
  // 反转   
  a.reverse();
          
  //合并数组   将一个或者多个数组合并成一个，参数也可以为字符串
  a.concat(b);        
  
  

  六 文档对象模型

  Window 窗口对象

  
  window.open("http://www.baidu.comt");//打开一个新的窗口 
  
  window.open("url","windowName","windowFeatrue",);  //三个参数的方法   
  /*
  功能：打开一个新的窗口
  参数说明：
  url:要打开窗口的url地址
  Window name是新打开窗口的名称
  Window features 是新窗口的实际特性（窗口的外观）可选项
  Window features的可能参数：
  height 窗口的高度
  width  窗口的宽度
  menubar是否有菜单
  scrollbars 是否有滚动条
  resizable 窗口大小是否可以改变
  
  */
  
  //示例 
  window.open("1.html","mywindow","menubar=no,height=200,width=300");
  
  window.close(); //关闭浏览器的方法
  

  Location 位置对象

  //Location对象提供了与当前打开的URL一起工作的方法和属性，它是一个静态的对象
  location.href="http://www.baidu.ctom";  
  

  History 历史对象

  //History对象提供了与历史清单有关的信息
  history.back();  //后退的方法
  

  Document 文档对象

  • 获取页面元素的方式

  document.getElementById(“idName”);   //通过id获取到唯一的一个元素
  document.getElementsByName(“Name”);  //通过名字属性获取到一组元素
  document.getElementsByClassName(“className”);  //通过class属性获取到一组元素
  document.getElementsByTagName(“tagName”);    //通过标签名字获取到一组元素
  

  • 通过节点来寻找元素

  
  
      
          
          
      
      
          
  
              
  我是div
              
  标题
              
  这是一个p标签