关闭

JavaScript初学入门一

172人阅读 评论(0) 收藏 举报
分类:

JavaScript初学入门一

    在HTML网页中插入JavaScript代码,<script>标签要成成对出现,并把JavaScript代码写在<script></script>之间,<script type="text/javascript">表示在<script></script>之间的文本类型(text),javascript是为了告诉浏览器里的文本属于JavaScript语言。

     当把JavaScript代码单独写成js文件时,需要在HTML文件中添加如下代码:

              <script   src="script.js"></script>

这样就可以把js代码嵌入到HTML文件中。

     我们可以将JavaScript代码放在html文件中任何位置,但是我们一般放在网页的head或者body部分。

放在<head>部分
   最常用的方式是在页面中head部分放置<script>元素,浏览器解析head部分就会执行这个代码,然后才解析页面的其余部分
放在<body>部分
   JavaScript代码在网页读取到该语句的时候就会执行。

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

 

 

认识语句和符号

 JavaScript语句是发给浏览器的命令,这些命令的作用是告诉浏览器要做的事情。

JavaScript代码的格式:语句;

JavaScript的注释

(1)单行注释,在注释内容前加符号 “//” 。

(2)多行注释以“/*”开始,以“*/”结束 。

变量

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

var 变量名

变量名可以任意取名,但要遵循命名规则:

    1.变量必须使用字母、下划线(_)或者美元符($)开始。

    2.然后可以使用任意多个英文字母、数字、下划线(_)或者美元符($)组成。

    3.不能使用JavaScript关键词与JavaScript保留字。

在JS中区分大小写。

函数

基本语法如下:

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

 

输出内容(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>");

警告(alert 消息对话框)

语法:
alert(字符串或变量);  

确认(confirm 消息对话框)

语法:

confirm(str);

参数说明:

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

返回值:Boolean值

返回值

当用户点击“确定”按钮时,返回“true”;

当用户点击“取消”按钮时,返回“false”。

 

提问(prompt消息对话框)   

   prompt弹出消息对话框,通常用于询问一些需要与用户交互的信息。弹出消息对话框(包含一个确定按钮、取消按钮与一个文本输入框)。

语法:

prompt(str1, str2);

参数说明:

str1: 要显示在消息对话框中的文本,不可修改
str2:文本框中的内容,可以修改

返回值:

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

 

打开新窗口(window.open)

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

语法:

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

参数说明:

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

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

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

                     2.“_top”,“_blank”,"_selft"具有特殊意义的名称。

                           _blank:在新窗口显示目标网页

                            _self:  在当前窗口显示目标网页

                           _top:框架网页中在上部窗口中显示目标网页

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

                       4.name不能包含有空格。

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

例如:打开http://www.imooc.com网站,大小为300px * 200px,无菜单,无工具栏,无状态栏,有滚动条窗口:

<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操作

通过ID获取元素

语法:

 document.getElementById(“id”) 

结果:null或[object HTMLParagraphElement]

 

innerHTML属性

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

语法:

Object.innerHTML

注意:

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

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

 

改变HTML样式

语法:

Object.style.property=new style;

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

基本属性表(property):

background-color,height,width,font,..........

 

显示和隐藏(display属性)

语法:

Object.style.display = value

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

value取值:

none:隐藏

block:显示

 

控制类名(className属性)

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

语法:

object.className = classname

 

 返回指定位置的字符

 charAt()方法返回指定位置的字符。返回的字符长度为1的字符串

语法:stringObject.charAt(index)

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

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

注意:一个空格也算一个字符。

 

 返回指定的字符串首次出现的位置

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

语法:stringObject。indexOf(substring,startpos);

substring:必需。规定需检索的字符串

startpos:可选的整数参数。规定在字符串·开始检索的位置,它的合法取值是0到stringObject.length-1。如省略参数,则将从字符串的首字符开始检索。

 

字符串分割split()

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

语法:stringObject。split(separator,limit)

separator:必需。从该参数指定的地方分割stringObject

limit:可选参数。分割的次数,如设置该参数,返回的子串不会多余这个参数指定的数组,如果无此参数为不限制参数

 

提取字符串substring()

substring()方法用于提取字符串中介于两个指定下标之间的字符

语法:stringObject.substring(starPos,stopPos)

starPos:必需。一个非负的整数,开始位置。

stopPos:可选参数。一个非负整数,结束位置。

 

提取指定数目的字符substr()

substr()方法从字符串中提取从startPos位置开始的指定数目的字符串

语法:stringObject.substr(startPos,length)

 

向上取整ceil()

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

 语法:Math.ceil(x)

 

向上取整floor()

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

 语法:Math.floor(x)

 

四舍五入round()

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

语法:Math.round(x)

 

随机数random()

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

语法:Math.random();

 

数组连接concat()

concat()方法用于连接两个或多个数组,此方法返回一个新数组,不改变原来数组

语法:arrayObject.concat(array1,array2,....arrayN)

  

指定分隔符连接数组元素join()

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

语法:arrayObject.join(分隔符);

 

颠倒数组元素顺序reverse()

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

语法:arrayObject.reverse();

 

选定元素slice()

slice() 方法可从已有的数组中返回选定的元素。

arryObject.slice(start,end)

1.返回一个新的数组,包含从 start 到 end (不包括该元素)的 arrayObject 中的元素。

 

数组排序sort()

sort()方法使数组中的元素按照一定的顺序排列。

arrayObject.sort(方法函数)

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

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

输出XXXX年XX月X日

var date=new Date();
var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
document.write(date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日"+" "+weekday[date.getDay()]+"<br />");

 

 

 

 

 

 

 

 

 

 

 

 

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:14809次
    • 积分:325
    • 等级:
    • 排名:千里之外
    • 原创:18篇
    • 转载:3篇
    • 译文:0篇
    • 评论:1条
    最新评论