JavaScript基础(.....持续待更)

时间:2022-02-21 15:13:05

javascript热身

一、你知道,为什么JavaScript非常值得我们学习吗?

1. 所有主流浏览器都支持JavaScript。

2. 目前,全世界大部分网页都使用JavaScript。

3. 它可以让网页呈现各种动态效果。

4. 做为一个Web开发师,如果你想提供漂亮的网页、令用户满意的上网体验,JavaScript是必不可少的工具。

二、易学性

1.学习环境无外不在,只要有文本编辑器,就能编写JavaScript程序。

2.我们可以用简单命令,完成一些基本操作。

三、从哪开始学习呢?

学习JavaScript的起点就是处理网页,所以我们先学习基础语法和如何使用DOM进行简单操作。

 如何插入JS

1.使用<script>标签在HTML网页中插入JavaScript代码。注意, <script>标签要成对出现,并把JavaScript代码写在<script></script>之间。

<script type="text/javascript">表示在<script></script>之间的是文本类型(text),javascript是为了告诉浏览器里面的文本是属于JavaScript语言。JavaScript基础(.....持续待更)

2.可以把HTML文件和JS代码分开,并单独创建一个JavaScript文件(简称JS文件),其文件后缀通常为.js,然后将JS代码直接写在JS文件中。

注意:在JS文件中,不需要<script>标签,直接编写JavaScript代码就可以了。

JS文件不能直接运行,需嵌入到HTML文件中执行,我们需在HTML中添加如下代码,就可将JS文件嵌入HTML文件中。   <script src="script.js"></script>

注意: javascript作为一种脚本语言可以放在html页面中任何位置,但是浏览器解释html时是按先后顺序的,所以前面的script就先被执行。比如进行页面显示初始化的js必须放在head里面,因为初始化都要求提前进行(如给页面body设置css等);而如果是通过事件调用执行的function那么对位置没什么要求的。

定义变量使用关键字var,语法如下:

var 变量名

如何定义一个函数呢?基本语法如下:

function 函数名()
{
     函数代码;
}

说明:1. function定义函数的关键字。2. "函数名"你为函数取的名字。3. "函数代码"替换为完成特定功能的代码。

函数调用:函数定义好后,是不能自动执行的,所以需调用它,只需直接在需要的位置写函数就ok了。
输出内容(document.write())

document.write() 可用于直接向 HTML 输出流写内容。简单的说就是直接在网页中输出内容。
第一种:输出内容用""括起,直接输出""号内的内容。
 document.write("I love JavaScript!"); //内容用""括起来,""里的内容直接输出。
第二种:通过变量,输出内容
  var mystr="hello world!";
  document.write(mystr);  //直接写变量名,输出变量存储的内容。
第三种:输出多项内容,内容之间用+号连接。
  var mystr="hello";
  document.write(mystr+"I love JavaScript"); //多项内容之间用+号连接
第四种:输出HTML标签,并起作用,标签使用""括起来。
  var mystr="hello";
  document.write(mystr+"<br>");//输出hello后,输出一个换行符
  document.write("JavaScript");

JS输出空格

1. 使用输出html标签&nbsp;来解决
document.write("&nbsp;&nbsp;"+"1"+"&nbsp;&nbsp;&nbsp;&nbsp;"+"23");
结果:  1    23
2. 使用CSS样式来解决
document.write("<span style='white-space:pre;'>"+"  1        2    3    "+"</span>");
结果:  1       2     3   
在输出时添加“white-space:pre;”样式属性。这个样式表示"空白会被浏览器保留"

警告(alert消息对话框)

alert(字符串或变量);弹出的消息对话框包括一个确定按钮

1. 在点击对话框"确定"按钮前,不能进行任何其它操作。

2. 消息对话框通常可以用于调试程序。

3. alert输出内容,可以是字符串或变量,与document.write 相似。

确认(confirm 消息对话框)

confirm 消息对话框通常用于允许用户做选择的动作,如:“你对吗?”等。弹出对话框(包括一个确定按钮和一个取消按钮)。

语法:confirm(str);

str在消息对话框中要显示的文本

返回值: Boolean值   当用户点击"确定"按钮时,返回true
当用户点击"取消"按钮时,返回false

注: 通过返回值可以判断用户点击了什么按钮 

<script type="text/javascript">
var mymessage=confirm("你喜欢JavaScript吗?");
if(mymessage==true)
{ document.write("很好,加油!"); }
else
{ document.write("JS功能强大,要学习噢!"); }
</script>

提问(prompt 消息对话框)

语法:prompt(str1, str2); str1: 要显示在消息对话框中的文本,不可修改

str2:文本框中的内容,可以修改

返回值:  1. 点击确定按钮,文本框中的内容将作为函数返回值

2. 点击取消按钮,将返回null

var myname=prompt("请输入你的姓名:");
if(myname!=null)
{ alert("你好"+myname); }
else
{ alert("你好 my friend."); }

打开新窗口(window.open)

open() 方法可以查找一个已经存在或者新建的浏览器窗口。

语法:window.open([URL], [窗口名称], [参数字符串])

参数说明:  URL:可选参数,在窗口中要显示网页的网址或路径。如果省略这个参数,或者它的值是空字符串,那么窗口就不显示任何文档。

窗口名称:可选参数,被打开窗口的名称。

1.该名称由字母、数字和下划线字符组成。

2."_top"、"_blank"、"_self"具有特殊意义的名称。   _blank:在新窗口显示目标网页   _self:在当前窗口显示目标网页   _top:框架网页中在上部窗口中显示目标网页

3.相同 name 的窗口只能创建一个,要想创建多个窗口则 name 不能相同。

4.name 不能包含有空格。

参数字符串:可选参数,设置窗口参数,各参数用逗号隔开。

<script type="text/javascript">
window.open('http://www.imooc.com','_blank','width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes')
</script>

关闭窗口(window.close)

close()关闭窗口

用法:window.close(); //关闭本窗口

或<窗口对象>.close(); //关闭指定的窗口

例如:关闭新建的窗口。

<script type="text/javascript">
var mywin=window.open('http://www.imooc.com'); //将新打的窗口对象,存储在变量mywin中
mywin.close();
</script>

注意:上面代码在打开新窗口的同时,关闭该窗口,看不到被打开的窗口。

DOM操作

认识DOM

文档对象模型DOM(document Object Model)定义访问和处理HTML文档的标准方法。DOM将HTML文档呈现为带有元素,属性,和文本的树结构(节点树)。

JavaScript基础(.....持续待更)

将html代码分解为DOM节点层次图:

JavaScript基础(.....持续待更)   HTML文档可以说由节点构成的集合,三种常见的DOM节点:

1. 元素节点:上图中<html>、<body>、<p>等都是元素节点,即标签。

2. 文本节点:向用户展示的内容,如<li>...</li>中的JavaScript、DOM、CSS等文本。

3. 属性节点:元素属性,如<a>标签的链接属性href="http://www.baidu.com"。

通过ID获取元素

网页由标签将信息组织起来,而标签的id属性值是唯一的,就像是每人有一个身份证号一样,只要通过身份证号就可以找到相对应的人。那么在网页中,我们通过id先找到标签,然后进行操作。

语法:document.getElementById(“id”)

结果:null或[object HTMLParagraphElement]

注:获取的元素是一个对象,如想对元素进行操作,我们要通过它的属性或方法。

 innerHTML 属性

innerHTML 属性用于获取或替换 HTML 元素的内容。

语法:   Object.innerHTML

注意: 1.Object是获取的元素对象,如通过document.getElementById("ID")获取的元素。

2.注意书写,innerHTML区分大小写。

我们通过id="con"获取<p> 元素,并将元素的内容输出和改变元素内容,代码如下:

<body>
<h2 id="con">javascript</H2> //修改后变为hello world
<p> JavaScript是一种基于对象、事件驱动的简单脚本语言,嵌入在HTML文档中,由浏览器负责解释和执行,在网页上产生动态的显示效果并实现与用户交互功能。</p>
<script type="text/javascript">
var mychar=document.getElementById("con") ;
document.write("原标题:"+mychar.innerHTML+"<br>"); //输出原h2标签内容
mychar.innerHTML="Hello world"
document.write("修改后的标题:"+mychar.innerHTML); //输出修改后h2标签内容
</script>
</body>

JavaScript基础(.....持续待更)

总结:documen.getElementById()只是获取元素,需要通过object.innerHTML获取或改变元素的内容。

改变html样式

HTML DOM 允许 JavaScript 改变 HTML 元素的样式。

语法:Object.style.property="new style";

注意:Object是获取的元素对象,如通过document.getElementById("id")获取的元素。

var mychar = document.getElementById("pcon");
   mychar.style.color="red";JavaScript基础(.....持续待更)

显示和隐藏

网页中经常会看到显示和隐藏的效果,可通过display属性来设置。

语法:Object.style.display = “value”    value取值:none(隐藏)和block(显示)

 <script type="text/javascript">
function hidetext()
{
var mychar = document.getElementById("con");
mychar.style.display="none";
}
function showtext()
{
var mychar = document.getElementById("con");
mychar.style.display="block";
}
</script>
</head>
<body>
<h1>JavaScript</h1>
<p id="con">做为一个Web开发师来说,如果你想提供漂亮的网页、令用户满意的上网体验,JavaScript是必不可少的工具。</p>
<form>
<input type="button" onclick="hidetext()" value="隐藏内容" />
<input type="button" onclick="showtext()" value="显示内容" />
</form>
</body>

JavaScript基础(.....持续待更)

控制类名(className 属性)

className 属性设置或返回元素的class 属性。

语法:object.className = classname

作用:1.获取元素的class 属性  (object.className)

2. 为网页内的某个元素指定一个css样式来更改该元素的外观

<style>
body{ font-size:16px;}
.one{
border:1px solid #eee;
width:230px;
height:50px;
background:#ccc;
color:red;
}
.two{
border:1px solid #ccc;
width:230px;
height:50px;
background:#9CF;
color:blue;
}
</style>
</head>
<body>
<p id="p1" > JavaScript使网页显示动态效果并实现与用户交互功能。</p>
<input type="button" value="添加样式" onclick="add()"/>
<p id="p2" class="one">JavaScript使网页显示动态效果并实现与用户交互功能。</p>
<input type="button" value="更改外观" onclick="modify()"/> <script type="text/javascript">
function add(){
var p1 = document.getElementById("p1");
p1.className="one";
}
function modify(){
var p2 = document.getElementById("p2");
p2.className="two";
}
</script>
</body>

javaScript基础

JavaScript能做什么?

1.增强页面动态效果(如:下拉菜单、图片轮播、信息滚动等)

2.实现页面与用户之间的实时、动态交互(如:用户注册、登陆验证等)

变量名:1.必须以字母、下划线或美元符号开头,后面可以跟字母、下划线、美元符号和数字。

2.变量名区分大小写,如:A与a是两个不同变量。

3.不允许使用JavaScript关键字和保留字做变量名。

声明变量语法: var 变量名;    (先声明,后使用)

var mynum ; //声明一个变量mynum

var还可以一次声明多个变量,变量之间用","逗号隔开。var num1,mun2 ; //声明一个变量num1

我们使用"="号给变量存储内容    var mynum = 5 ; //声明变量mynum并赋值

创建数组语法:var myarray=new Array();   语句是创建一个新数组保存在myarrray变量中

数组的表达方式:第一步:创建数组var myarr=new Array(); 第二步:给数组赋值

1.var myarray = new Array(66,80,90,77,59);//创建数组同时赋值

2.var myarray = [66,80,90,77,59];//直接输入一个数组(称 “字面量数组”)

3.var myarray=new Array(); //创建一个新的空数组
   myarray[0]=66; //存储第1个人的成绩

数组属性length:myarray.length; //获得数组myarray的长度

 

二维数组的定义方法一

var myarr=new Array();  //先声明一维
for(var i=0;i<2;i++){ //一维长度为2
myarr[i]=new Array(); //再声明二维
for(var j=0;j<3;j++){ //二维长度为3
myarr[i][j]=i+j; // 赋值,每个数组元素的值为i+j
}
}

二维数组的定义方法二(常用):var Myarr = [[0 , 1 , 2 ],[1 , 2 , 3]]存储多维信息

多重判断(if..else嵌套语句)

if(条件1)
{ 条件1成立时执行的代码}
else if(条件2)
{ 条件2成立时执行的代码}
...
else if(条件n)
{ 条件n成立时执行的代码}
else
{ 条件1、2至n不成立时执行的代码}

当有很多种选项的时候,switch比if else使用更方便。

switch(表达式)
{
case值1:
执行代码块 1
break;
case值2:
执行代码块 2
break;
...
case值n:
执行代码块 n
break;
default:
与 case值1 、 case值2...case值n 不同时执行的代码

break;循环就会结束,不会输出后面循环的内容
continue本次循环将被跳过,而后续的循环则不会受到影响

函数调用

1.在<script>标签内调用

2.在html文件中调用,如通过点击按钮调用定义好的函数。
<input type="button" value="click it" onclick="add2()">  //按钮,onclick点击事件,直接写函数名

有参数的函数

function 函数名(参数1,参数2)
{
     函数代码
}

注意:参数可以多个,根据需要增减参数个数。参数之间用(逗号,)隔

返回值的函数:对函数的结果进行处理。函数中参数和返回值不只是数字,还可以是字符串等其他类型。

事件响应

JavaScript 创建动态页面。事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。主要事件表如下:JavaScript基础(.....持续待更)

比如说,当用户单击按钮或者提交表单数据时,就发生一个鼠标单击(onclick)事件,需要浏览器做出处理,返回给用户一个结果。

鼠标单击事件( onclick )

onclick是鼠标单击事件,当在网页上单击鼠标时,就会发生该事件。同时onclick事件调用的程序块就会被执行,通常与按钮一起使用。

比如,我们单击按钮时,触发 onclick 事件,并调用两个数和的函数add2()。代码如下:

<html>
<head>
  <script type="text/javascript">
  function add2(){
  var numa,numb,sum;
  numa=6;
  numb=8;
  sum=numa+numb;
  document.write("两数和为:"+sum); }
  </script>
</head>
<body>
<form>
<input name="button" type="button" value="点击提交" onclick="add2()" />
</form>
</body>
</html>

鼠标经过事件(onmouseover)

鼠标经过事件,当鼠标移到一个对象上时,该对象就触发onmouseover事件,并执行onmouseover事件调用的程序。

现实鼠标经过"确定"按钮时,触发onmouseover事件,调用函数info(),弹出消息框,代码如下:

<script type="text/javascript">
function message(){
confirm("请输入密码后,再单击确定!"); }
</script>
</head>
<body>
<form>
密码:<input name="password" type="password" >
<input name="确定" type="button" value="确定" onmouseover="message()"/>
</form>
</body>

鼠标经过事件(onmouseout)

鼠标移开事件,当鼠标移开当前对象时,执行onmouseout调用的程序。

光标聚焦事件(onfocus)

当网页中的对象获得聚点时,执行onfocus调用的程序就会被执行。

如下代码, 当将光标移到文本框内时,即焦点在文本框内,触发onfocus 事件,并调用函数message()。

失焦事件(onblur)

onblur事件与onfocus是相对事件,当光标离开当前获得聚焦对象的时候,触发onblur事件,同时执行被调用的程序。

内容选中事件(onselect)

选中事件,当文本框或者文本域中的文字被选中时,触发onselect事件,同时调用的程序就会被执行。

文本框内容改变事件(onchange)

通过改变文本框的内容来触发onchange事件,同时执行被调用的程序。

加载事件(onload)

事件会在页面加载完成后,立即发生,同时执行被调用的程序。
注意:1. 加载页面时,触发onload事件,事件写在<body>标签内。

2. 此节的加载页面,可理解为打开一个新页面时。

卸载事件(onunload)

当用户退出页面时(页面关闭、页面刷新等),触发onUnload事件,同时执行被调用的程序。

window.onunload = onunload_message;  
     function onunload_message(){  
        alert("您确定离开该网页吗?");  
    }  

javaScript内置对象

JavaScript 中的所有事物都是对象,如:字符串、数值、数组、函数等,每个对象带有属性方法

对象的属性:反映该对象某些特定的性质的,如:字符串的长度、图像的长宽等;

对象的方法:能够在对象上执行的动作。例如,表单的“提交”(Submit),时间的“获取”(getYear)等;

1.使用对象前先定义 var objectName =new Array();//使用new关键字定义对象

2.访问对象属性的语法: objectName.propertyName   var myl=myarray.length;//访问数组长度length属性

3.访问对象的方法:objectName.methodName()  var request=mystr.toUpperCase(); //使用字符串对象方法

date日期对象

定义一个时间对象 : var Udate=new Date();

注意:使用关键字new,Date()的首字母必须大写。

使 Udate 成为日期对象,并且已有初始值:当前时间(当前电脑系统时间)

get/setFullYear() 返回/设置年份方法
get/setFullYear() 返回/设置年份,用四位数表示。mydate.setFullYear(81); //设置年份 
document.write(mydate.getFullYear()+"<br>");//输出当前年份
getDay() 返回星期方法,返回的是0-6的数字,0 表示星期天。
var mydate=new Date();
var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
document.write("今天是:" + weekday[mydate.getDay()]);
get/setTime() 返回/设置时间,单位毫秒数
var mydate=new Date();
  document.write("当前时间:"+mydate+"<br>");
  mydate.setTime( mydate.getTime()  + 2* 60 * 60 * 1000);
  document.write("推迟二小时时间:" + mydate);

字符串对象

charAt() 方法可返回指定位置的字符。 stringObject.charAt(index)

1.字符串中第一个字符的下标是 0。最后一个字符的下标为字符串长度减一(string.length-1)。

2.如果参数 index 不在 0 与 string.length-1 之间,该方法将返回一个空字符串。

3.一个空格也算一个字符。

indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。  stringObject.indexOf(substring, startpos)

1.该方法将从头到尾地检索字符串 stringObject,看它是否含有子串 substring。    str.indexOf("v",8)

2.可选参数,从stringObject的startpos位置开始查找substring,如果没有此参数将从stringObject的开始位置查找。

3.如果找到一个 substring,则返回 substring 的第一次出现的位置。stringObject 中的字符位置是从 0 开始的。

split() 方法将字符串分割为字符串数组,并返回此数组。

stringObject.split(separator,limit)  separator必须,从该参数的指定地方开始分割  limit可选,分割的次数

如果把空字符串 ("") 用作 separator,那么 stringObject 中的每个字符之间都会被分割。

substring() 方法用于提取字符串中介于两个指定下标之间的字符  stringObject.substring(startPos,stopPos)  必取,可取

1返回的内容是从 start开始(包含start位置的字符)到 stop-1 处的所有字符,其长度为 stop 减start。

substr() 方法从字符串中提取从 startPos位置开始的指定数目的字符串。  stringObject.substr(startPos,length)  必取,可取

MATH对象

Math 对象是一个固有的对象,无需创建它,直接把 Math 作为对象使用就可以调用其所有属性和方法。这是它与Date,String对象的区别。

ceil() 方法可对一个数进行向上取整。  Math.ceil(x)

floor() 方法可对一个数进行向下取整。 Math.floor(x)

round() 方法可把一个数字四舍五入为最接近的整数。 Math.round(x)

random() 方法可返回介于 0 ~ 1(大于或等于 0 但小于 1 )之间的一个随机数。  Math.random();

Array 数组对象

concat() 方法用于连接两个或多个数组。此方法返回一个新数组,不改变原来的数组。 arrayObject.concat(array1,array2,...,arrayN)

join()方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。 arrayObject.join(分隔符)

reverse() 方法用于颠倒数组中元素的顺序。arrayObject.reverse()

sort()方法使数组中的元素按照一定的顺序排列。 arrayObject.sort(方法函数) sort采用冒泡排序

1.如果不指定<方法函数>,则按unicode码顺序排列。

2.如果指定<方法函数>,则按<方法函数>所指定的排序方法排序。

<script type="text/javascript">
function sortNum(a,b) {
return a - b;
//升序,如降序,把“a - b”该成“b - a”
}
var myarr = new Array("80","16","50","6","100","1");
document.write(myarr + "<br>");
document.write(myarr.sort(sortNum));
</script>