JavaScript初学入门一

最新推荐文章于 2022-07-23 09:06:09 发布

一点一点累积

最新推荐文章于 2022-07-23 09:06:09 发布

阅读量417

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/u014705021/article/details/51542889

版权

JavaScript 专栏收录该内容

1 篇文章 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

收藏

觉得还不错? 一键收藏
0
评论
JavaScript初学入门一

JavaScript初学入门一在HTML网页中插入JavaScript代码，标签要成成对出现，并把JavaScript代码写在之间，表示在之间的文本类型(text),javascript是为了告诉浏览器里的文本属于JavaScript语言。当把JavaScript代码单独写成js文件时，需要在HTML文件中添加如下代码：这样就可以把js
复制链接

扫一扫