JavaScript初学

概念

js是一种基于对象和事件驱动的、并具有安全性能的脚本语言

特点

向HTML页面中添加交互行为

脚本语言，语法类似于java（脚本语言又被称为扩建的语言，或者动态语言，是一种编程语言，用来控制软件应用程序，脚本通常以文本（如ASCII)保存，只在被调用时进行解释或编译。）

解释性语言，边执行边解释

组成

ECMAScript

ECMAScript是一种可以在宿主环境中执行计算并能操作可计算对象的基于对象的程序设计语言,最新版本es6,2016发布

DOM

DOM（DOM—Document Object Model）是W3C国际组织的一套Web标准。它定义了访问HTML文档对象的一套属性、方法和事件。

BOM

BOM(Browser Object Model) 是指浏览器对象模型，是用于描述这种对象与对象之间层次关系的模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构

基本结构

<script type="text/javascript">
    <!—
          JavaScript 语句;
    —>
</script >

使用位置

可以包含在文档中的任何地方，只要保证这些代码在被使用前已读取并加载到内存即可

使用js方式

<script src="export.js"  type="text/javascript"></script>


<input name="btn" type="button" value="弹出消息框" onclick="javascript:alert('欢迎你');"/>

核心语法

变量

var   width;
width = 5;
//以上是先声明在赋值
var catName= "皮皮";
var x, y, z = 10;
//以上是声明赋值同时进行

数据类型

undefined

var width;
//变量width没有初始值，将被赋予值undefined

null  

//表示一个空值，与undefined值相等

number

var iNum=23;   //整数
var iNum=23.0;   //浮点数

boolean

//true或者false 

string

var i=1;
console.log(typeof(i));
//返回undefined：变量被声明后，但未被赋值
//返回string：用单引号或双引号来声明的字符串
//返回boolean：true或false
//返回number：整数或浮点数
//返回object：javascript中的对象、数组和null

typeof运算符

 属性length

var str="this is JavaScript";
var strLength=str.length;    //长度是18

String 对象

属性length

var str="this is JavaScript";
var strLength=str.length;    //长度是18

方法

var str="this is JavaScript";
var strLength=str.length;
strLength.charAt(0);//调用方法
//charAt(index)	返回在指定位置的字符
//indexOf(str，index)	查找某个指定的字符串在字符串中首次出现的位置
//substring(index1，index2)	返回位于指定索引index1和index2之间的字符串，并且包括索引index1对应的字符，不包括索引index2对应的字符（前包后不包）
//split(str)	将字符串分割为字符串数组

数组Array

创建

var fruit= new Array(4);

var fruit1= new Array("apple", "orange", " peach","banana");

赋值

var fruit = new Array(4);
fruit[0] = " apple ";
fruit[1] = " orange ";
fruit[2] = " peach ";
fruit[3] = " banana ";

访问

var a=fruit[0];

属性(length)

var fruit = new Array(4);
fruit.length

方法

var fruit1= new Array("apple", "orange", " peach","banana");
fruit.join("-");
//join( )	把数组的所有元素放入一个字符串，通过一个的分隔符进行分隔
//sort()	对数组排序
//push()	向数组末尾添加一个或更多 元素，并返回新的长度

运算符

算术运算符	+ - * / % ++ —
赋值运算符	= += -=
比较运算符	> < >= <= == != === !==
逻辑运算符	&& || !

逻辑控制语句

if语句

if(条件)
{
   //JavaScript代码;
}
else
{
  //JavaScript代码;
}

for、while循环语句

for(初始化;  条件;  增量)
 {
      JavaScript代码;}

while(条件)
 {
      JavaScript代码;
}

for in

var fruit=[ "apple", "orange", "peach","banana"]; 
for(var i in fruit){
       document.write(fruit[i]+"<br/>");
}

switch

switch (表达式)
{    case 常量1 : 
              JavaScript语句1;
	break;
       case 常量2 : 
 	JavaScript语句2;
 	break;
         ...
        default : 
             JavaScript语句3;    
}

语法中断

break

<script type="text/javascript">
var i=0;
for(i=0;i<=5;i++){
	if(i==3){
                   break;
       }
  document.write("这个数字是："+i+"<br/>");
}
    //跳出整个循环
</script>

continue

<script type="text/javascript">
var i=0;
for(i=0;i<=5;i++){
	if(i==3){
                   continue;
       }
  document.write("这个数字是："+i+"<br/>");
    //跳过当前循环，进行下次循环
}
</script>

注释

单行注释以 // 开始，以行末结束

多行注释以 /* 开始，以 / 结束，符号 /…… */ 指示中间的语句是该程序中的注释

常用输入输出

alert()

alert("你好");

prompt()

prompt("你好");

语法约定

代码区分大小写

变量、对象和函数的名称尽量不要重复

每段代码后要有分号

常用系统函数

什么是函数

类似于Java中的方法，是完成特定任务的代码语句块

parseInt ("字符串")

var i = "86";
console.log(parseInt (i));//将字符串转换为整型数字

isNaN()

var i = "a";
console.log(isNaN(i));//用于检查其参数值是否是非数字

定义函数

function 函数名(参数.... ){
     //JavaScript语句
     [return 返回值]
}

调用函数

<script type="text/javascript">
function study( ){
        for(var i=0;i<5;i++){
            document.write("<h4>欢迎学习JavaScript</h4>");
        }
    }
</script>

                              
<input name="btn" type="button"
   value="显示5次欢迎学习JavaScript"  onclick="study( )" />

作用域

全局变量

局部变量

 <script type="text/javascript">
 var i=20;
    function first( ){
        var i=5;
        for(var j=0;j<i;j++){
            document.write("&nbsp;&nbsp;&nbsp;&nbsp;"+j);
        }
    }
    function second( ){
        var t=prompt("输入一个数","")
        if(t>i)
            document.write(t);
        else
            document.write(i);
        first( );
    }

</script>

事件

名称	说明
onload	一个页面或一幅图像完成加载
onlick	鼠标单击某个对象
onmouseover	鼠标指导移到某元素上
onkeydown	某个键盘按键被按下
onchange	域的内容被改变

 简介

BOM：浏览器对象模型（Browser Object Model）

提供了独立于内容，可以与浏览器窗口进行互动的对象结构

可实现功能

1.弹出新的浏览器窗口

2.移动，关闭浏览器窗口以及调整窗口大小

3.页面的前进后退

window对象

常用属性

Window.history是一个只读属性,不存在赋值

有关客户访问过得URL的信息

有关当前URL的信息

window.location="http://www.baidu.com";

常用方法

直接用，不需要.

方法名称	说 明
prompt( )	显示可提示用户输入的对话框
alert( )	显示带有一个提示信息和一个确定按钮的警示框
confirm( )	显示一个带有提示信息、确定和取消按钮的对话框
close( )	关闭浏览器窗口
open( )	打开一个新的浏览器窗口，加载给定 URL 所指定的文档
setTimeout( )	在指定的毫秒数后调用函数或计算表达式
setInterval( )	按照指定的周期（以毫秒计）来调用函数或表达式

history对象

需要用window.history来获取

常用的方法

名称	说明
back()	加载 history 对象列表中的前一个URL
forward()	加载 history 对象列表中的下一个URL
go()	加载 history 对象列表中的某个具体URL

location对象

需要用window.location来获取

常用属性

名称	说明
host	设置或返回主机名和当前URL的端口号
hostname	设置或返回当前URL的主机名
href	设置或返回完整的URL

常用方法

名称	说 明
reload()	重新加载当前文档
replace()	用新的文档替换当前文档

window.location.replace("https://www.baidu.com")；

js内置对象

Array

String

Math

方法	说 明	示例
ceil()	对数进行上舍入	Math.ceil(25.5);返回26Math.ceil(-25.5);返回-25
floor()	对数进行下舍入	Math.floor(25.5);返回25Math.floor(-25.5);返回-26
round()	把数四舍五入为最接近的数	Math.round(25.5);返回26Math.round(-25.5);返回-26
random()	返回0~1之间的随机数	Math.random();例如：0.6273608814137365

var iNum=Math.floor(Math.random()*98+2)

Date

var  today=new Date();   //返回当前日期和时间
var tdate=new Date("september 1,2013,14:58:12")

常用方法

方法	说 明
getDate()	返回 Date 对象的一个月中的每一天，其值介于1～31之间
getDay()	返回 Date 对象的星期中的每一天，其值介于0～6之间
getHours()	返回 Date 对象的小时数，其值介于0～23之间
getMinutes()	返回 Date 对象的分钟数，其值介于0～59之间
getSeconds()	返回 Date 对象的秒数，其值介于0～59之间
getMonth()	返回 Date 对象的月份，其值介于0～11之间
getFullYear()	返回 Date 对象的年份，其值为4位数
getTime()	返回自某一时刻（1970年1月1日）以来的毫秒数

定时函数

setTimeout()

function timer(){
        var t=setTimeout("alert('3 seconds')",3000);
}
//3秒执行一次

清除函数

clearTimeout()

 var t=setTimeout("alert('3 seconds')",3000);
clearTimeout(t);

clearInterval ()

var  myTime＝setInterval("disptime() ", 1000 );
clearInterval(myTime)；

 简介

DOM：Document Object Model

节点

HTML 文档中的所有内容都是节点

• 整个文档是一个文档节点

• 每个 HTML 元素是元素节点

• HTML 元素内的文本是文本节点

• 每个 HTML 属性是属性节点

• 注释是注释节点

document对象

常用属性

名称	说 明
referrer	返回载入当前文档的URL
URL	返回当前文档的URL

document.referrer
document.URL

document常用方法

名称	说 明
getElementById()	返回对拥有指定id的第一个对象的引用
getElementsByName()	返回带有指定名称的对象的集合
getElementsByTagName()	返回带有指定标签名的对象的集合
write()	向文档写文本、HTML表达式或JavaScript代码

节点的属性

属性名称	描述
parentNode	返回节点的父节点
childNodes	返回子节点集合，childNodes[i]
firstChild	返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
lastChild	返回节点的最后一个子节点
nextSibling	下一个节点
previousSibling	上一个节点

var obj=document.getElementById("news");
    var str=obj.lastChild.firstChild.nextSibling.nextSibling.innerHTML;
    var str=obj.lastChild.lastChild.previousSibling.previousSibling.innerHTML;
    var str=obj.lastElementChild.firstElementChild.innerHTML||obj.lastChild.firstChild.innerHTML;
    alert(str);

element属性

属性名称	描述
firstElementChild	返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
lastElementChild	返回节点的最后一个子节点
nextElementSibling	下一个节点
previousElementSibling	上一个节点

节点的信息

 var nodes=document.getElementById("nodeList");
    var type1=nodes.firstChild.nodeType;
    var type2=nodes.firstChild.firstChild.nodeType;
    var name1=nodes.firstChild.firstChild.nodeName;
    var str=nodes.firstChild.firstChild.nodeValue;
    var con="type1："+type1+"<br/>type2："+type2+"<br/>name1："+name1+"<br/>str："+str;
    document.getElementById("nodeList").nextSibling.innerHTML=con;

操作节点

操作节点的属性

名称	描述
getAttribute("属性名")	获取属性值
setAttribute("属性名","属性值")	设置属性值

  var ele=document.getElementsByName("book");
        var img=document.getElementById("image");
        if(ele[0].checked){
            img.setAttribute("src","images/dog.jpg");
            img.setAttribute("alt","我和狗狗一起活下来");
            img.nextSibling.innerHTML="我和狗狗一起活下来";
        }
        else if(ele[1].checked){
            img.setAttribute("src","images/mai.jpg");
            img.setAttribute("alt","灰霾来了怎么办");
            img.nextSibling.innerHTML="灰霾来了怎么办";
        }

 创建和插入节点

  var ele=document.getElementsByName("book");
        var bName=document.getElementsByTagName("div")[0];
        if(ele[0].checked){
            var img=document.createElement("img");
            img.setAttribute("src","images/dog.jpg");
            img.setAttribute("alt","我和狗狗一起活下来");
            bName.appendChild(img);
        }
        else if(ele[1].checked){
            var img=document.createElement("img");
            img.setAttribute("src","images/mai.jpg");
            img.setAttribute("alt","灰霾来了怎么办");
            img.setAttribute("onclick","copyNode()")
            bName.appendChild(img);

 删除和替换节点

名称	描述
removeChild( node)	删除指定的节点
replaceChild( newNode, oldNode)属性attr	用其他的节点替换指定的节点

var delNode=document.getElementById("first");
delNode.parentNode.removeChild(delNode);

var oldNode=document.getElementById("second");
var newNode=document.createElement("img");
newNode.setAttribute("src","images/f03.jpg");
oldNode.parentNode.replaceChild(newNode,oldNode);

操作节点样式

改变style属性

document.getElementById("titles").style.color="#ff0000"; 
document.getElementById("titles").style.fontSize="25px ";

取元素的样式

document.getElementById("cartList").display
document.getElementById("cartList").currentStyle.display