javaScript基础

  JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的高级编程语言。虽然它是作为开发Web页面的脚本语言而出名的,但是它也被用到了很多非浏览器环境中,JavaScript 基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式和声明式(如函数式编程)风格(摘自百度百科)


1.在网页中添加javaScript的方法


  1. 嵌入使用

在网页的任何位置都可以嵌入javascript,但建议嵌入到head标记中

<html>
<head><meta http-equiv="Content-Type" content="text/html";charset="UTF-8"><title>javaScript嵌入学习</title><script type="text/javaScript">alert("第一次看到警告框");</script></head>
<body>好好学习</body></html>

b. 引入使用

当多个页面使用相同的javaScript代码时,将共用代码保存在以js扩展名的文件中。

myFirst.jsalert("第一次看到警告框");
<html>
<head><meta http-equiv="Content-Type" content="text/html";charset="UTF-8"><title>javaScript嵌入学习</title><script type="text/javaScript" src="myFirst.js" charset="GBK"></script></head>
<body>好好学习</body></html>

效果图:

javaScript基础

2.javaScript的基本语法

a.变量:使用var可以声明任意类型的变量,如var firstNumber = 10;

b.类型转换:javaScript是一种弱类型语言,变量的类型对应与其值的类型,可以对不同类型的变量进行运算,方式与其他常见的语言相似。

c.运算符:赋值运算符,数学运算符,以及逻辑运算符与C语言相通。


typeof运算符:对变量或值调用typeof运算符将返回对应的值

             示例          返回结果
    typeof(true)       boolean
    typeof(300)       number
    typeof(‘abc’)       string
    typeof(null)       object
    typeof(f)       function


d.注释:与C语言使用规则相通。


e.变量命名规则:以字母,下划线,或美元符号开头,不能使用空格,大小写区分,不能使用JavaScript中的关键字或保留字命名。

3.流程控制与函数


a.常用的流程控制语句与C语言相通,例如if-else,switch,for……,但注意这里的花括号不能省略.


b.函数

格式:

//function是关键字,函数没有类型,参数也没有类型function 函数名([参数,参数]){函数体}

c.arguments对象

函数可以接受任意个数的参数,通过arguments对象来访问

function say(){if(arguments[1]!="你好"){alert(arguments[0]);}else{alert(arguments[1]);}//返回参数个数alert(arguments.length);}
//调用时:say("hello","你好");


d.系统函数

  1. eval(字符串表达式) 返回字符串表达式的值 var test=(“2+3”);//值为5

  2. parseInt(字符串) 将以数字开头的字符串转换为整数

  3. parseFloat(字符串)将以数字开头的字符串转换为浮点数

  4. Number(字符串)将数字字符串转换为数字,有非数字字符返回NaN

e.函数调用

   在链接中调用函数 <a href=”javascript:函数”>…</a>

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title>
<script type="text/JavaScript"> function gogo(){ alert("在链接中调用"); }</script></head><body><a href="javascript:gogo()">链接中调用函数</a></body></html>

javaScript基础

点击链接

javaScript基础

  

   由事件触发器调用函数

 事件=”函数”

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title>
<script type="text/JavaScript"> function gogo(){ alert("事件触发器"); }</script></head><body><form action=""> <input type="button" value="单击我" onclick="gogo()"/> </form>></body></html>

javaScript基础

4.javaScipt对象

一个JavaScript对象中可包含若干属性和方法。

  • 对象的创建

    使用new关键字来创建对象 var oStringObject=new String();如果构造函数没有参数,则不必加括号。

  • JavaScript内部对象

       String对象:

<script type="text/javascript"> var myStrObj=new String("www.baidu.com"); alert(myStrObj.length); alert("www.hpu.com".length); var Str="abc"; //返回字符串长度 alert(Str.length);    //返回指定索引处字符,索引从零开始 Str.charAt(4)    //indexOf方法:返回某个子字符串在一个字符串汇中第一次出现的位置,    //从左到右搜索。如果没有找到,返回-1.    Str.indexof(str);    //lastIndexOf方法:和indexOf方法类似,但是是从右向左搜索        //返回将str1替换为str2后的字符串    replace(str1,str2)        //将字符串以separator作为分隔符切割成多个子字符串数组,如果有limit参数    //则返回数组的limit个元素    Str.split(separator,limit);    //提取字符串中 "start" 索引号开始 "end" 索引号之前的字符不包括end    Str.substring(start,end);    //toLowerCase() 把字符串转换为小写    //toUpperCase() 把字符串转换为大写</script>

日期对象:

Date对象可以用来表示任意的日期和时间

创建Date对象

必须使用new运算符创建一个Date对象

//创建目标日期    var deadLine = new Date();    var deadLine = new Date(2017/2/7); var deadLine = new Date(2017,2,7);    var deadLine = new Date("July 8 2012");    var deadLine = new Date(Milliseconds);//自1970年以来的毫秒数创建
getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。
getMonth() 从 Date 对象返回月份 (0 ~ 11)。
getFullYear() 从 Date 对象以四位数字返回年份。
getYear() 请使用 getFullYear() 方法代替。
getHours() 返回 Date 对象的小时 (0 ~ 23)。
getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。
getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。
getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)。
getTime() 返回 1970 年 1 月 1 日至今的毫秒数。
parse() 返回1970年1月1日午夜到指定日期(字符串)的毫秒数。
setDate() 设置 Date 对象中月的某一天 (1 ~ 31)。
setMonth() 设置 Date 对象中月份 (0 ~ 11)。
setFullYear() 设置 Date 对象中的年份(四位数字)。
setYear() 请使用 setFullYear() 方法代替。
setHours() 设置 Date 对象中的小时 (0 ~ 23)。
setMinutes() 设置 Date 对象中的分钟 (0 ~ 59)。
setSeconds() 设置 Date 对象中的秒钟 (0 ~ 59)。
setMilliseconds() 设置 Date 对象中的毫秒 (0 ~ 999)。

Math对象


a.abs()
可返回数的绝对值。
b. Math.ceil()
可以对一个数进行向上取整,小数位只要有值就自动进1
c. Math.floor()
可以对一个数值进行向下取整,小数部分会被舍掉
d Math.round()
四舍五入

e.Math.random()
可以生成一个0到1的 随机数

f.max()可以获取多个数中的最大值

g.min()可以获取多个数中的最小值

h.Math.pow(x,y)返回x的y次幂

i.Math.sqrt() 返回一个数的平方根。

数组对象

//数组创建var myArray=new Array(); //创建一个长度为零的数组var myArray=new Array(100);//长度100var myArray=new Array(1,2,3);//指定长度并赋初值

reverse方法:将数组内容反转
concat方法:将两个或更多的数组组合在一起
join方法:返回一个将数组所有元素用指定元素连在一起的字符串
如 var newString=tmpArray.join(“.”);
pop方法移除数组中最后一个元素,并返回该元素
shift方法:移除数组中第一个元素并返回该元素
slice方法:返回数组的一部分 如var newArray=temArray.slice(1,3);

5.javaScipt对象模型

使用open方法可以打开一个新页面,open(URL,name,fectures,replace)

参数 描述
URL 一个可选的字符串,声明了要在新窗口中显示的文档的 URL。如果省略了这个参数,或者它的值是空字符串,那么新窗口就不会显示任何文档。
name 一个可选的字符串,该字符串是一个由逗号分隔的特征列表,其中包括数字、字母和下划线,该字符声明了新窗口的名称。这个名称可以用作标记 <a> 和 <form> 的属性 target 的值。如果该参数指定了一个已经存在的窗口,那么 open() 方法就不再创建一个新窗口,而只是返回对指定窗口的引用。在这种情况下,features 将被忽略。
features 一个可选的字符串,声明了新窗口要显示的标准浏览器的特征。如果省略该参数,新窗口将具有所有标准特征。在窗口特征这个表格中,我们对该字符串的格式进行了详细的说明。
replace

 

一个可选的布尔值。规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目,还是替换浏览历史中的当前条目。支持下面的值:

  • true – URL 替换浏览历史中的当前条目。

  • false – URL 在浏览历史中创建新的条目。

var winObj=open(“target.html“,”target_1”,”width=500,height=300,scrollbars=no);


对话框


alert();

<script type="text/javascript">alert("请单击确定按钮");</script>

prompt(message,defaultText);

第一个参数代表用户输入信息提示,第二个参数代表文本框的默认值

<script type="text/javascript"> prompt("what's your name?","chenheng");</script>

javaScript基础

confirm(message)

弹出对话框,提示确认信息

<script type="text/javascript"> if(confirm("真的删除吗?")){ //单击确认按钮后的操作 }else{ //单击取消按钮后的操作 }</script>

javaScript基础

history对象

history对象记录着浏览器浏览过的每一个页面,这些页面组成了一个历史记录表,其中有三个常用的方法。

forward方法:将历史纪录向前移动一个页面。

back方法:将历史纪录向后移动一个页面。

go方法:转向历史记录中的指定地址,需要一个参数,可以是整数或负数,如果参数是字符串,那么浏览器就会搜索列表,找到最近于当前页面位置且URL含有此字符串的页面。

location对象

window对象的location属性可以直接改变URL地址

window.location="http://ww.baidu.com";location="http://ww.baidu.com";location.href="http://ww.baidu.com";location.replace("http://ww.baidu.com");//清空页面location.href="about:blank";

document对象

forms集合(页面中的表单)

a)通过集合引用

document.forms //对应页面上的form标签

document.forms.length //对应页面上/form标签的个数

document.forms[0] //第1个/form标签

document.forms[i] //第i-1个/form标签

document.forms[i].length //第i-1个/form中的控件数

document.forms[i].elements[j] //第i-1个/form中第j-1个控件

b)通过标签name属性直接引用

document.Myform.myctrl //document.表单名.控件名

c)访问表单的属性

document.forms[i].name //对应form name>属性

document.forms[i].action //对应/form action>属性

document.forms[i].encoding //对应/form enctype>属性

document.forms[i].target //对应/form target>属性

document.forms[i].appendChild(oTag) //动态插入一个控件

document.all.oDiv //引用图层oDiv

document.all.oDiv.style.display= //图层设置为可视

document.all.oDiv.style.display=”none” //图层设置为隐藏

document.getElementId(”oDiv”) //通过getElementId引用对象


来源:码农迪迪,本文观点不代表自营销立场,网址:https://www.zyxiao.com/p/87591

发表评论

电子邮件地址不会被公开。 必填项已用*标注

技术服务
技术服务
关注抖音
关注抖音
进群学习 侵权联系
返回顶部