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 相关文章推荐
(function($){...})(jQuery)的意思
Jul 22 Javascript
那些年,我还在学习jquery 学习笔记
Mar 05 Javascript
javascript跨域原因以及解决方案分享
Apr 08 Javascript
轻量级网页遮罩层jQuery插件用法实例
Jul 31 Javascript
Bootstrap3学习笔记(三)之表格
May 20 Javascript
JavaScript+Java实现HTML页面转为PDF文件保存的方法
May 30 Javascript
微信小程序  TLS 版本必须大于等于1.2问题解决
Feb 22 Javascript
Linux系统中利用node.js提取Word(doc/docx)及PDF文本的内容
Jun 17 Javascript
vue-router实现tab标签页(单页面)详解
Oct 17 Javascript
利用node实现一个批量重命名文件的函数
Dec 21 Javascript
详解Angular Karma测试的持续集成实践
Nov 15 Javascript
JavaScript实现多文件下载方法解析
Aug 07 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
PHP 自定义错误处理函数trigger_error()
2013/03/26 PHP
百度地图API应用之获取用户的具体位置
2014/06/10 PHP
Js+Flash实现访问剪切板操作
2012/11/20 Javascript
事件冒泡是什么如何用jquery阻止事件冒泡
2013/03/20 Javascript
javascript中的parseInt和parseFloat区别
2013/07/12 Javascript
手机端网页点击链接触发自动拨打或保存电话的示例代码
2014/08/15 Javascript
原生javascript实现Tab选项卡切换功能
2015/01/12 Javascript
jQuery根据用户电脑是mac还是pc加载对应样式的方法
2015/06/26 Javascript
详解如何使用webpack打包Vue工程
2017/05/27 Javascript
Vue不能检测到Object/Array更新的情况的解决
2018/06/26 Javascript
Vue 3.0 前瞻Vue Function API新特性体验
2019/08/12 Javascript
简单了解vue中的v-if和v-show的区别
2019/10/08 Javascript
JavaScript Canvas编写炫彩的网页时钟
2019/10/16 Javascript
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
2019/12/15 Javascript
JavaScript十大取整方法实例教程
2020/12/03 Javascript
[01:51]历届DOTA2国际邀请赛举办地回顾 TI9落地上海
2018/08/26 DOTA
Python列表(list)、字典(dict)、字符串(string)基本操作小结
2014/11/28 Python
利用Hyperic调用Python实现进程守护
2018/01/02 Python
python3+PyQt5 数据库编程--增删改实例
2019/06/17 Python
python 将日期戳(五位数时间)转换为标准时间
2019/07/11 Python
Python定时任务工具之APScheduler使用方式
2019/07/24 Python
关于初始种子自动选取的区域生长实例(python+opencv)
2020/01/16 Python
多个python文件调用logging模块报错误
2020/02/12 Python
Python异常处理机制结构实例解析
2020/07/23 Python
scrapy实践之翻页爬取的实现
2021/01/05 Python
css3的transition属性详解
2014/12/15 HTML / CSS
英国轻奢珠宝品牌:Astley Clarke
2016/12/18 全球购物
汽车电子与维修专业大学生求职信
2013/09/28 职场文书
车间班组长的职责
2013/12/13 职场文书
六月份红领巾广播稿
2014/02/03 职场文书
小学教师师德感言
2014/02/10 职场文书
采购部经理岗位职责
2014/02/10 职场文书
专业技术职务聘任书
2014/03/29 职场文书
竞选学生会演讲稿
2014/04/25 职场文书
关于html选择框创建占位符的问题
2021/06/09 HTML / CSS
MSSQL基本语法操作
2022/04/11 SQL Server