为了账号安全,请及时绑定邮箱和手机立即绑定

javascript的新手基础教程

标签:
JavaScript

如果十八般武艺都融会贯通,如果什么兵器你都耍得有模有样,那么这篇博文你大可以跳过了。只是在忘记的时候,可以拿出来温习温习。


基本概念

JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。

简单点一句话概括: javascript是基于对象、驱动事件、具有安全性、弱类型的脚本语言。

1.声明变量关键字: var

2.变量的名称: 

  • 由数字、字母、下划线、$组成

  • 数字不能开头

  • 严格区分大小写

  • 不能以关键字命名

3.数据类型: 

  • 基本数据类型

    • 数值类型(整形和浮点型)

    • 字符串类型

    • 布尔类型

  • 引用(复合)数据类型

    • 函数:function()

    • 对象:object()

  • 特殊数据类型 undefined

4.检测数据类型的方法: typeof()

5.运算符优先级: ()>!>算术>关系>&&>||>条件>赋值

6.类型转换方式: 

  • parseInt() 是将字符串类型转换为整型

  • parseFloat() 是将字符串类型转换为浮点型

  • NaN 不是一个数字


函数介绍

1.函数的定义: 函数(又称为方法)用于对一段为了达到某种目的的代码进行归类。

2.函数的生命: 

function 函数名([参数1],[参数2],...)

{

//代码模块

}

3.定时器: setInterval("函数名",时间毫秒) ps:这个详细部分在下面

4.系统函数: 

  • 日期函数

    • getYear():可返回表示年份的两位或四位的数字

      <script type="text/javascript">
      var d = new Date()
      document.write(d.getYear())
      </script>
    • getMonth():可返回表示月份的数字

      <script type="text/javascript">
      var d=new Date()
      document.write(d.getMonth())
      // 月份是从0开始的
      </script>
    • getDate():可返回月份的某一天

      <script type="text/javascript">
      var d = new Date()
      document.write(d.getDate())
      </script>
    • toLocaleString():可根据本地时间把 Date 对象转换为字符串,并返回结果

      <script type="text/javascript">
      var d = new Date()
      document.write(d.toLocaleString())
      </script>
  • Math对象

    • abs():可返回数的绝对值

      <script type="text/javascript">
      document.write(Math.abs(7.25) + "<br />")//7.5
      document.write(Math.abs(-7.25) + "<br />")//7.25
      document.write(Math.abs(7.25-10))//2.75
      </script>
    • round():可把一个数字舍入为最接近的整数


    • <script type="text/javascript">
      document.write(Math.round(0.60) + "<br />")//1
      document.write(Math.round(0.50) + "<br />")//1
      document.write(Math.round(0.49) + "<br />")//0
      document.write(Math.round(-4.40) + "<br />")//-4
      document.write(Math.round(-4.60))//-5
      </script>
    • random():可返回介于 0 ~ 1 之间的一个随机数

      <script type="text/javascript">
      document.write(Math.random())//输出随机小数,如:0.5031703060958534
      </script>
    • floor():可对一个数进行下舍入


      <script type="text/javascript">
      document.write(Math.floor(0.60) + "<br />")//0
      document.write(Math.floor(0.40) + "<br />")//0
      document.write(Math.floor(5) + "<br />")//5
      document.write(Math.floor(5.1) + "<br />")//5
      document.write(Math.floor(-5.1) + "<br />")//-6
      document.write(Math.floor(-5.9))//-6
      </script>


    • ceil():可对一个数进行上舍入


      <script type="text/javascript">
      document.write(Math.ceil(0.60) + "<br />")//1
      document.write(Math.ceil(0.40) + "<br />")//1
      document.write(Math.ceil(5) + "<br />")//5
      document.write(Math.ceil(5.1) + "<br />")//6
      document.write(Math.ceil(-5.1) + "<br />")//-5
      document.write(Math.ceil(-5.9))//-5
      </script>


    • max():可返回两个指定的数中带有较大的值的那个数

      <script type="text/javascript">
      document.write(Math.max(5,7) + "<br />")//7
      document.write(Math.max(-3,5) + "<br />")//5
      document.write(Math.max(-3,-5) + "<br />")//-3
      document.write(Math.max(7.25,7.30))//7.3
      </script>
    • min():可返回指定的数字中带有最低值的数字,效果与max相似 demo略

  • 数组函数

    • concat():方法用于连接两个或多个数组。该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本

      <script type="text/javascript">
      var a = [1,2,3];
      document.write(a.concat(4,5));//1,2,3,4,5
      </script>
    • join():方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。


      <script type="text/javascript">
      var arr = new Array(3)
      arr[0] = "1"
      arr[1] = "2"
      arr[2] = "3"
      document.write(arr.join())//1,2,3
      </script>


    • pop():方法用于删除并返回数组的最后一个元素


      复制代码
      <script type="text/javascript">
      var arr = new Array(3)
      arr[0] = "1"
      arr[1] = "2"
      arr[2] = "3"
      document.write(arr)//1,2,3
      document.write("<br />")
      document.write(arr.pop())//3
      document.write("<br />")
      document.write(arr)//1,2
      </script>


    • push():可向数组的末尾添加一个或多个元素,并返回新的长度。


      <script type="text/javascript">
      var arr = new Array(3)
      arr[0] = "1"
      arr[1] = "2"
      arr[2] = "3"
      document.write(arr + "<br />")//1,2,3
      document.write(arr.push("a") + "<br />")//a
      document.write(arr)//1,2,3,a
      </script>



浏览器对象BOM

1.windows对象:

  • Location 地址对象

  • history 历史对象

  • document 文档对象

  • event 事件对象

  • screen 屏幕对象

  • navigator 浏览器对象

2.调用方式:

  • windows.属性=" "

  • windows.方法();

3.windows对象的三种弹出对话框方法:

  • alert() 用于显示带有一条指定消息和一个 OK 按钮的警告框 Demo

  • confirm()用于显示一个带有指定消息和 OK 及取消按钮的对话框 Demo

  • prompt()用于显示可提示用户进行输入的对话框 Demo

4.windows对象的两种弹出框口的方法:

  • Open()用于打开一个新的浏览器窗口或查找一个已命名的窗口

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

     

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

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

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

  • showModalDialog() 弹出模式窗口,这个用法比较

5.windows对象两种启动定时器的方法: 

  • setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。 setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

  • setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。

6.document三个找对象的方法: 

  • getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用

  • getElementsByTagName() 方法可返回带有指定标签名的对象的集合。

  • getElementsByName() 方法可返回带有指定名称的对象的集合。

7.常用js事件: 

  • onclick事件会在对象被点击时发生

  • onmouseover 鼠标经过事件

  • onmouseout 事件会在鼠标指针移出指定的对象时发生。

  • onload 事件会在页面或图像加载完成后立即发生。

  • onfocus 事件在对象获得焦点时发生。

  • onblur 事件会在对象失去焦点时发生。

  • onfocus 事件在对象获得焦点时发生。

  • onfocus 事件在对象获得焦点时发生。

8.浏览器对象属性: 

  • appName 属性可返回浏览器的名称。

  • appCodeName 属性是一个只读字符串,声明了浏览器的代码名。

  • appVersion 属性可返回浏览器的平台和版本信息。该属性是一个只读的字符串。


vDOM

DOM主要是需要在实战中运用,我这里只列出一些DOM的常用属性

1.DOM属性: 

  • childNodes 属性返回节点的子节点集合,以 NodeList 对象

  • documentElement根节点

  • document.body主体

  • document.body.childNode获得 body 元素的子节点集合

  • nodeName节点名

  • attributes 属性返回指定节点的属性集合,即 NamedNodeMap

  • nodeType节点类型

  • nodeValue节点值


正则表达式

正则表达式我就不一一介绍了,我想这里绝对能满足你的各种需求。


其他知识

禁止别人以iframe加载你的页面

if (window.location != window.parent.location) window.parent.location = window.location;

把浏览器当编辑器

data:text/html, <html contenteditable>
点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消