JavaScript核心语法总结(推荐)


Posted in Javascript onJune 02, 2016

本文介绍了JavaScript的基本(常用)语法,供大家参考。

Overview

先说一下Javascript该怎么写。两种形式,一种是直接把JavaScript写在HTML页面里,另一种是存在*.js文件里然后在页面内引用。

直接写时,即可以放在<head> </head>内,也可以放在<body> </body>内。一般函数是放在<head>区的,具体的执行代码是在<body>区里的。例如,在body里写:

<body>
<script>
   document.writeln("haha <br/> ");
</script>
</body>

引用方式

<script type="text/javascript" src="js_css/menutree.js"></script>

执行顺序与生命期

JavaScript是从上到下依次执行/解析的。在调用一个function或时,必须保证该function已经被解析/声明了。这也是一般要把function定义放在<head>内的原因。

所有的function与变量只在本页面内有效,当离开页面后,新的页面内无法访问上一页内声明的变量或函数。如果一定要访问的话,可以用Cookie也存一下,到下一页再读出来。

syntax - 变量

变量定义就以var开头即可,就可以定义了一个变量了。放在函数体内的就认为局部变量,外面的就是全局变量。需要指出的是,JavaScript的语法是很乱的,变量也有别的定义方法。但是希望大家不要使用其他乱七八糟的语法,就使用这种最常见的语法就可以,足够用,而且省脑筋。

关于变量大家需要明白

(1) 变量是弱类型的,一个整数甚至可以与字符串直接相加,得到一个字符串

(2) 所谓全局变量,也只是在当前页面内有效,当页面被unload跳到另一个页面时,所有的变量都被销毁了。这些全局变量跟流览器(也称为User Agent)内嵌变量有区别,每个页面都自动有window, document这些内嵌对象。

(3) 不区分单引号还是双引号

<script>
  // 变量定义
  var nNumOfBytes = 10;
  var fPercent = 0.32;
  var strYourName = ‘Mr.Known';
  var pRect = new Object();

</script>

syntax - 函数

<script>
  function goToUrl(strUrl)
  {
    location.href = strUrl;
  }
</script>

函数可以在HTML事件/ FORM / JavaScript 中被调用,如:

HTML元素事件回调:

<body onload="goToUrl('https://3water.com')" >

FORM元素事件回调

<select name="somelist" onchange="onSomeThingChanged()">

超链接目标

<a href="javascript:goToUrl('3water.com')" > go </a>

直接在JavaScript中调用

<script>
    goToUrl(”3water.com");
</script>

syntax - 类

一般的JavaScript是不需要使自定义类的,就是说一般不会到达这么复杂的程度。因为是脚本语言嘛,随便写几句就好。一是难调试,二是不便阅读。但是如果一定要写什么复杂的功能,如菜单树之类的,那么就得写一点类来完成了。

同样,类在JavaScript里也是有2种定义格式的,我们会下面的格式就好了,另一种格式很烂,还是不要知道为好。

先来个不带构造参数的:

<script>
  function SampleClass()
  {
    // 变量变量定义
    this.nId = 10;
    
    // 成员函数定义
    this.plusId = function (nPlus)
    {
      return this.nId + nPlus;
    }
  }
</script>

再来一个造参数的类

function MenuItem(l, h, t)
  {
    this.label = l;
    this.href = h;
    this.target = t;
    
    this.toHtml = function()
    {
      var html = "<a href='" + this.href + "' ";
        
      if(this.target != null)
        html += (" target='" + this.target + "' ");
        
      html += " >" + this.label + "</a>";      
      return html;
    }
  }

创建类的实例

var item = new MenuItem("haha", https://3water.com, null);

关于类,注意以下几点:

(1) 不要从头写一个类,请从我这里copy过去再改,这样就不会有那些莫名其妙的麻烦了

(2) 在成员函数里引用成员变量,一定要加this.,不然引用不到

(3) 成员函数如果想返回值,就用return,想return什么类型都不必事先声明,直接return就好

(4) 对于学习C++和Java的程序员来说,要明白var p = new SomeClass();这句中的new其实就是创建一个对象并返回其指针

(5) 考虑使用Object类

syntax - Object类

JavaScript语法很乱的,脚本语言嘛,要求不要太高。虽然可以自定义类,但大数多情况下都不需要自己声明一个类,可以直接使用Object类来定义一个结构,而无需事先声明这个结构的形式。
如:

function createObject()
{
  var obj = new Object();
  obj.x = 10;
  obj.y = 11;
  return obj;
}

看到没,这个函数随意的创建了一个object,为其添加成员 x, y,并没有通知任何人(无prototype声明)。而使用者也是直接就可以调用其 o.x , o.y,无需要猜测。

<script>
  var o = createObject();
  document.writeln("x=" + o.x + ", y=" + o.y);  
</script>

不过为了安全起见,也可以写成这样:

var o = createObject();

  if(o.x != null && o.y != null)
  {
    document.writeln("x=" + o.x + ", y=" + o.y);  

  }

syntax - 数组Array

<script>
  // 创建
  var a = new Array();
  // 遍例
  for(var i=0; i<a.length; i++)
  {
    var e =   a[i];  
  }
  // 添加
  var item = new MenuItem("000");
  this.itemArray.push(item);
</script>

怎么删除一个元素?记得是直接赋值为null,过后测一下再补充。

数组作为成员变量

function Menu()
{
  this.itemArray = new Array();
 
  this.addItem = function(l, h, t)
  {
    var item = new MenuItem(l,h,t);
    this.itemArray.push(item);
  };        
}

以上这篇JavaScript核心语法总结(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript生成json的函数代码(可以用php的json_decode解码)
Jun 11 Javascript
jQuery实现图片放大预览实现原理及代码
Sep 12 Javascript
点击显示指定元素隐藏其他同辈元素的方法
Feb 19 Javascript
通过js为元素添加多项样式,浏览器全兼容写法
Aug 30 Javascript
修复bash漏洞的shell脚本分享
Dec 31 Javascript
javascript实现回车键提交表单方法总结
Jan 10 Javascript
js实现的tab标签切换效果代码分享
Aug 25 Javascript
javascript图片切换综合实例(循环切换、顺序切换)
Jan 13 Javascript
javascript使用Promise对象实现异步编程
Mar 01 Javascript
ES5学习教程之Array对象
Apr 01 Javascript
JavaScript实现移动端轮播效果
Jun 06 Javascript
JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例
Jul 27 Javascript
javascript基础语法——全面理解变量和标识符
Jun 02 #Javascript
Bootstrap开发实战之第一次接触Bootstrap
Jun 02 #Javascript
jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
Jun 02 #Javascript
深入理解Ajax的get和post请求
Jun 02 #Javascript
JS小数运算出现多为小数问题的解决方法
Jun 02 #Javascript
jQuery easyUI datagrid 增加求和统计行的实现代码
Jun 01 #Javascript
jQuery 选择同时包含两个class的元素的实现方法
Jun 01 #Javascript
You might like
如何开发一个虚拟域名系统
2006/10/09 PHP
php自定义函数截取汉字长度
2014/05/15 PHP
PHP中round()函数对浮点数进行四舍五入的方法
2014/11/19 PHP
PHP获取一段文本显示点阵宽度和高度的方法
2015/03/12 PHP
thinkPHP交易详情查询功能详解
2016/12/02 PHP
用javascript获取textarea中的光标位置
2008/05/06 Javascript
Javascript 调试利器 Firebug使用详解六
2009/07/05 Javascript
jQuery操作 input type=checkbox的实现代码
2012/06/14 Javascript
原生js实现半透明遮罩层效果具体代码
2013/06/06 Javascript
node.js中watch机制详解
2014/11/17 Javascript
ANGULARJS中用NG-BIND指令实现单向绑定的例子
2014/12/08 Javascript
jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法
2015/07/27 Javascript
AngularJS 中的Promise --- $q服务详解
2016/09/14 Javascript
Three.js的使用及绘制基础3D图形详解
2017/04/27 Javascript
vue 优化CDN加速的方法示例
2018/09/19 Javascript
微信小程序实现页面下拉刷新和上拉加载功能详解
2018/12/03 Javascript
微信小程序实现炫酷的弹出式菜单特效
2019/01/28 Javascript
详解iframe跨域的几种常用方法(小结)
2019/04/29 Javascript
vue实现codemirror代码编辑器中的SQL代码格式化功能
2019/08/27 Javascript
微信小程序批量上传图片到七牛(推荐)
2019/12/19 Javascript
JQuery获得内容和属性方法解析
2020/05/30 jQuery
javascript的hashCode函数实现代码小结
2020/08/11 Javascript
vue实现防抖的实例代码
2021/01/11 Vue.js
[51:15]2014 DOTA2国际邀请赛中国区预选赛 Orenda VS LGD-GAMING
2014/05/22 DOTA
python利用urllib实现爬取京东网站商品图片的爬虫实例
2017/08/24 Python
django模型层(model)进行建表、查询与删除的基础教程
2017/11/21 Python
Python3.4学习笔记之类型判断,异常处理,终止程序操作小结
2019/03/01 Python
Python常用特殊方法实例总结
2019/03/22 Python
keras-siamese用自己的数据集实现详解
2020/06/10 Python
来自圣地亚哥的实惠太阳镜:Knockaround
2018/08/27 全球购物
财务会计专业应届毕业生求职信
2013/10/18 职场文书
优秀交警事迹材料
2014/01/26 职场文书
竞选村长演讲稿
2014/04/28 职场文书
网络优化专员求职信
2014/05/04 职场文书
正则表达式拆分url实例代码
2022/02/24 Java/Android
spring cloud eureka 服务启动失败的原因分析及解决方法
2022/03/17 Java/Android