美文网首页前端
js基础语法

js基础语法

作者: tinaaaabbb | 来源:发表于2017-03-16 21:05 被阅读0次

    js总的来说

    1.被所有主流的浏览器支持并被大部分网页使用

    2.他可以在网页上呈现动态效果

    对于js代码的位置

    1.使用<script>标签在html网页中插入

    2.既可以在html文件中直接添加js代码,也可以从外部把js文件进行引入(在js文件中不需要<script>标签)

    js不能直接运行,我们需要在HTML中添加如下代码

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

    3.js在页面中在任何位置都可以放置,但是我们一般把他放在head或者body里面

    (js作为一种脚本语言可以在任何位置放置,但浏览器解释代码是都是从前到后,如果放在前面则先被初始化,如果页面用js进行初始化则要把它放在head里


    1.变量

    变量是可变的量

    1.变量的命名法则与c语言相似(需要用字母下划线或者美元符号进行开头,后面可以加上数字)

    2.变量用var进行命名

    var mynum

    需要注意的是变量可以不声明直接使用

    3.特殊之处在于var可以定义各种数据类型的变量


    2.+操作符(附带着表达式)

    可以进行加减和字符串链接运算

    1.操作符

    sum=numa+numb;//这就是一个表达式

    2.连接字符

    mystring="java"+"Script";//这也是一个表达式


    3.自加自减,和逻辑运算符,和关系运算符与c相似

    1.自加自减与c相似

    2.关系运算符

    var a=5;

    var b=6;

    document.write(a<b)//输出真(true)

    3.&&为且运算符||为或!为非运算符

    4.算术运算符》关系运算符》逻辑运算符》=赋值符号


    4.定义数组

    var mybox =new array()

    1.创建的数组是空数组没有值,若输出,则为undefined

    2.虽然制定了长度,但实际上可以大于限制的长度

    有两种方法为数组进行赋值

    第一种方法

    var myarray=new Array(1,2,3)

    第二种方法

    var myarray=[1,2,3]

    可以运用c中数组赋值方法对数组进行赋值

    3.对于二维数组。

    声明方式一

    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 myarray=[[1,2],[3,4]]:

    5.for循环while循环,break,continue循环控制,if else等多重嵌套,swatich等语法

    语法与c十分相似,就不再一一赘述


    6.函数

    函数是完成某个特定功能的一组语句。如没有函数,完成任务可能需要五行、十行、甚至更多的代码。这时我们就可以把完成特定功能的代码块放到一个函数里,直接调用这个函数,就省重复输入大量代码的麻烦。

    函数的大致代码如下

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

    说明:

    1. function定义函数的关键字。

    2. "函数名"你为函数取的名字。

    3. "函数代码"替换为完成特定功能的代码。

    1.函数的调用方数与c中相同,只有调用后函数才可以使用

    2.带参函数和函数的返回值使用方式也和c相似


    7.事件

    JavaScript 创建动态页面。事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。

    1.onclick事件

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

    onclick放在input里面

    2.onmouseover

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

    用法与onclick相同

    3.onmouseout

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

    4.onfocus

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

    5.onblur

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

    6.onselect

    为选中文件,选中事件,当文本框或者文本域的文字被选中是就会触发

    7.onchange

    通过改变文本框内的文字时就会触发此事件


    对象

    至于什么是对象

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

    对象的属性和方法是对象的重要组成元素

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

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

    使用对象前要先进行定义

    var myarray=new Array()

    可以用对象点属性来访问对象的属性

    对于方法的访问与对于属性的访问相似

    下面介绍几种比较常用的内置对象

    1.日期对象

    get/setDate用来返回和设置日期

    get/setFullYear()用来返回设置年份,(完整的用四位数表示的年份)

    get/setYear用来设置年份

    还可以设置和返回月每小时,分钟,秒等,用法与上述方法相似

    document.write(my date.getFullYear());
    my date.setFullYear(81);6可以把年份设置为四位

    getDay()返回星期,返回的是0-6的数字0代表周日

    用法跟年份相似

    对于日期的设置方法

    时间推迟一小时就用x.setTime(x.getTime()+60*60*1000);

    2.string字符串对象

    定义字符串的方法就是直接赋值

    用length计算对象的长度

    用toUpperCase()方法将字符串串转化成大写

    用charAt()方法可以返回指定位置的字符

    需要注意的是,如果第一个字符的下标为0最后一个字符串要减一,如果超出了字符串的范围,则会返回一个空字符串,一个字符也算是一个字符串

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

    stringObject.indexOf(substring, startpos)  第一个参数是用来写出要查找的字符,第二个参数为查找的范围

    1.该方法将从头到尾地检索字符串 stringObject,看它是否含有子串 substring。

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

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

    注意:1.indexOf() 方法区分大小写。

    2.如果要检索的字符串值没有出现,则该方法返回 -1。

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

    stringObject.split(separator,limit)第一个参数是用来显示从该位置开始进行划分

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

    stringObject.substring(startPos,stopPos) 第一个参数为初始位置第二个为结束位置

    与此相似的是

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

    3.数学对象

    E           欧拉常量,自然对数的底(约等于2.718)

    LN2          2的自然对数(约等于0.693)

    LN10          10的自然对数(约等于2.302)

    LOG2E         以2为底的e的对数.(约等于1.442)

    LOG10E         以10为底的e的对数(约等于0.434)

    PI           ∏的值(约等于3.14159)

    SQRT1_2        1/2(0.5)的平方根(即l除以2的平方根,约等于o.707)

    SQRT2         2的平方根(约等于1.414)

    方法:

    abs(x)     返回数字的绝对值

    acos(x)    返回数字的反余弦值

    asin(x)    返回数字的反正弦值

    atan(x)    返回位于-PI/2 和 PI/2 的反正切值

    atan2(y,x) 返回(x,y)位于 -PI 到 PI 之间的角度

    ceil(x)    返回 x 四舍五入后的最大整数

    cos(x)     返回一个数字的余弦值

    exp(x)     返回 E^x 值

    floor(x)    返回 x 四舍五入后的最小整数

    log(x)     返回底数为E的自然对数

    max(x,y)    返回 x 和 y 之间较大的数

    min(x,y)    返回 x 和 y 之间较小的数

    pow(x,y)    返回 y^x 的值

    random()    返回位于 0 到 1 之间的随机函数

    round(x)    四舍五入后取整

    sin(x)     返回数字的正弦值

    sqrt(x)    返回数字的平方根

    tan(x)     返回一个角度的正切值

    toSource() 显示对象的源代码

    valueOf() 返回数学对象的原始值

    4.数组对象

    数组对象是一个对象的集合,里边的对象可以是不同类型的。数组的每一个成员对象都有一个“下标”,用来表示它在数组中的位置,是从零开始的

    concat属性用来连接多个数组

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

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

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

    sort排序

    下面对浏览器对象进行介绍

    setInterval在执行时,从载入页面后每隔指定的时间执行代码

    例如

    setInterval(clock,1000)第一个参数为调用的函数,第二个参数为交互的时间(以毫秒为计数单位)

    clearinterval()方法是用来取消setInterval()设置的交互时间

    括号里面的参数为set函数返回的值

    setTimeout()计时器在载入后延迟一段时间然后执行禁止性一次

    clearTimeout()用来清除

    history对象记录了用户浏览过的页面

    window.history.属性方法

    属性含有length返回浏览器历史列表中的url数量

    方法含有back()返回上一个

    forward()加载上一个

    go()进入某个具体的页面

    location对象用于获取或设置窗体的url并且可以用来解析url

    hash:如果URL中包含有“#”,该方法将返回该符号之后的内容(例如:http://www.sunchis.com/index.html#welcome的hash是“#welcome”)。

    host:服务器的名字,例如www.sunchis.com。

    hostname:通常等于host,有时会省略前面的www。

    href:当前页面载入的完整URL。

    pathname:URL中主机名之后的部分。例如:http://www.sunchis.com/html/js/jsbasic/2010/0319/88.html的pathname是“/html/js/jsbasic/2010/0319/88.html”。

    port:URL中声明的请求端口。默认情况下,大多数URL没有端口信息(默认为80端口),所以该属性通常是空白的。像http://www.sunchis.com:8080/index.html这样的URL的port属性为8080。

    protocol:URL中使用的协议,即双斜杠(//)之前的部分。例如http://www.sunchis.com中的protocol属性等于http:,ftp://www.sunchis.com的protocol属性等于ftp:。

    search:执行GET请求的URL中的问号(?)后的部分,又称查询字符串。例如http://www.sunchis.com/search.html?tern=sunchis中的search属性为?term=sunchis。

    方法:

    assign()加载新的文档

    reload()重新加载当前的文档

    replace()用新的文档替换当前的文档

    navigator对象包含有关浏览器的信息通常用于检测浏览器和操作系统的版本

    var appCodeName= window.navigator.appCodeName;//返回与浏览器相关的内部代码名  都为Mozilla

    var appName=navigator.appName;//返回浏览器正式名称  均为Netscape

    var appVersion=navigator.appVersion;//返回浏览器版本号

    var cookieEnabled=navigator.cookieEnabled;//返回浏览器是否启用cookie,true和false

    var geolocation=navigator.geolocation;//返回地理定位信息(h5)

    var javaEnabled=navigator.javaEnabled();//检测当前浏览器是否支持 Java,从而知道浏览器是否能显示 Java 小程序(IE,chrome返回true,firefox返回false)

    var language=navigator.language;//返回浏览器的首选语言

    var mimeTypes= navigator.mimeTypes;//返回浏览器支持的Mime类型

    var msManipulationViewsEnabled= navigator.msManipulationViewsEnabled;//仅支持IE,true

    var msMaxTouchPoints=navigator.msMaxTouchPoints;//字面意思是最大的触摸点,IE为0,其他不支持

    var msPointerEnabled=navigator.msPointerEnabled;//IE为true,其他不支持

    var onLine=navigator.onLine;//是否连接互联网,均返回true(未断网)

    var platform=navigator.platform;//所在平台,返回win32

    var plugins=navigator.plugins;//返回浏览器插件集合

    var preference=navigator.preference;//允许一个已标识的脚本获取并设置特定的 Navigator 参数

    var product= navigator.product;//浏览器产品名,返回gecko

    var systemLanguage=navigator.systemLanguage;//获取系统语言,IE支持,返回zh-cn

    var userAgent=navigator.userAgent;//判断浏览器类型

    var userLanguage=navigator.userLanguage;//返回操作系统的自然语言设置,IE支持,返回zh-cn

    //方法

    var msLaunchUri=navigator.msLaunchUri;//回调函数,未研究

    var taintEnabled=navigator.taintEnabled;//回调函数

    var hasOwnProperty=navigator.hasOwnProperty;//意思是是否支持属性,用法如下

    var s=document.hasOwnProperty("ontouchstart");//电脑返回false,手机为true

    screen属性

    window.screen.属性

    availHeight窗口可以使用的屏幕的高度

    availWidth窗口可以使用的屏幕宽度

    colorDepth用户浏览器的颜色位数

    height屏幕的高度

    width屏幕的宽度

    相关文章

      网友评论

        本文标题:js基础语法

        本文链接:https://www.haomeiwen.com/subject/sxcsnttx.html