javaScript 基础知识

一 JavaScript概述

JavaScript概述

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

JavaScript的基本特点：

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

JavaScript与Java的区别

JavaScript和Java是两个公司开发的不同产品
Java是SUN公司推出的新一代面向对象的程序设计语言
而JavaScript是Netscape公司的产品，其目的是为了扩展其浏览器功能
现在JavaScript已被标准化为ECMAScript，主流的浏览器都支持

认识javascript

<html>
<head>
<script language="JavaScript">
function sum(){
    var s1 = document.f1.s1.value;
    var s2 = document.f1.s2.value;
    var s3 = Number(s1)+Number(s2);
    document.f1.s3.value=s3;
}
</script>
</head>
<body>
<form name="f1">
<input type="text" name="s1">+
<input type="text" name="s2">=
<input type="text" name="s3">
<input type="button" value="计算结果" onclick="sum()">
</form>
</body>
</html>

示例说明

在标识<script>标签对之间就可加入JavaScript脚本代码。其中的language属性指明这段代码是用JavaScript来编写的。
JavaScript可以直接嵌入到html中通过浏览器直接运行的。

Html中嵌入JavaScript代码的方式：

放在<head>标签中（推荐使用）
放在<body>标签中

JavaScript中的注释

JavaScript中的注释和Java基本一致，也分为单行和多行注释。
注释信息仅仅做为说明来使用，在程序的解释和运行中是被忽略的。
单行注释：使用//符号对单行信息进行注释
多行注释：使用/…../对多行信息进行注释

例子

<html>
    <head>
      <script Language ="JavaScript">   
    //下面的alert()是弹出一个对话框
    /*
    下面的alert()是弹出一个对话框
    */
    alert("这是第一个JavaScript例子!");
    </script> 
    </Head>
    </Html>

二基本语法

数据类型

字符串："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<y);
console.log(z);

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

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;

页面完成示例

<html>
<head>
<script language="JavaScript">
var week = new Array();//创建数组
week[4] = “Thursday”;//给数组赋值
week[6] = "Saturday"; //给数组赋值
document.write("today is "+ week[4]+"<br>");
document.write("the day after tomorrow is "+week[6]+"<br>");
document.write("一个星期有"+week.length+"天");
</script>
</head>
</html>

//声明和定义一个 数组  
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<array.length;i++){
    alert(array[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日期对象

日期对象常用方法

<html>
<head>
<meta charset="UTF-8">
<title>时间对象例子</title>
<script language="JavaScript">
    function  time(){
    var day=new Date();        //获取日期对象
    var y=day.getFullYear();   //获取年  //getYear(); 过时的方法
    var m=day.getMonth()+1;   //获取月份  从0 开始 到 11结束 
    var r=day.getDate();      //获取日  月中第几天
    var h=day.getHours();     //获取小时 
    var f=day.getMinutes();   //获取分钟
    var s=day.getSeconds();  //获取秒  
    //获取毫秒数
    var ss=day.getMilliseconds();  //毫秒和秒的转换单位  1000
    var da="北京时间"+y+"年"+m+"月"+r+"日"+" "+h+":"+f+":"+s;
    //将时间显示到 h1标签中 
    document.getElementById("time").innerHTML=da;
    }
</script>
</head>
<body>
<input type="button" value="显示时间" onclick="time()" />
<h1 id="time"></h1>
</body>
</html>

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”);    //通过标签名字获取到一组元素

通过节点来寻找元素


<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="d1">
            <div  id="d2">我是div</div>
            <h1  id="d3">标题</h1>
            <p id="d4">这是一个p标签</p>
            <input type="text" id="d5" value="你好" />
        </div>
            <script language="JavaScript">
            // 节点的访问关系  建议使用元素节点
            var  n1=document.getElementById("d3");
            //父节点
            console.log(n1.parentElement);
            //兄弟节点
            console.log(n1.previousElementSibling);
            //儿子节点 
            var nod=document.getElementById("d1");
            console.log(nod.child);
            //创建一个节点  
            var h=document.createElement("h1");
            //h.innerHTML="今天天气不错";
            //h.innerText="今天阳光";
            var s=document.createTextNode("光明万丈");
            h.appendChild(s);
            //把h1 添加到 一个  节点中  
            document.getElementById("d2").appendChild(h);
            // 删除节点
            document.getElementById("d2").removeChild(h);
        </script>
    </body>
</html>

javaScript 基础知识

javaScript 基础知识

一 JavaScript概述

JavaScript概述

JavaScript的基本特点：

JavaScript与Java的区别

认识javascript

示例说明

Html中嵌入JavaScript代码的方式：

JavaScript中的注释

二 基本语法

数据类型

变量及类型转换

表达式和运算符

数组

数组声明：

三 流程控制

顺序执行

条件执行

循环语句

四 函数和事件

函数：

创建函数：

函数调用

函数的返回值

匿名函数

回调函数

五 内置对象

Math 数学对象

Date日期对象

String对象

Array对象

六 文档对象模型

Window 窗口对象

Location 位置对象

History 历史对象

Document 文档对象

二基本语法

三流程控制

四函数和事件

五内置对象

六文档对象模型