前言: 开始学JavaScript,Dom,jQuery了,知识好杂,本身记忆力就不行的~~这篇博客简单介绍下JavaScript. 下篇博客写关于Dom的。

JavaScript是一门编程语言(之前一直误以为是有关java的知识),浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript语言的规则编写相应代码之,浏览器可以解释并做出相应的处理。JS目前广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

一、JavaScript代码存在形式与存放位置

1. JavaScript代码有两种存在形式,一种是直接在html内部编写javascript,另一种是导入JS文件。

方式一:在html内部编写javascript

 <script>
function f1(){
alert('f1')
}
f1();
</script>

方式二:通过文件导入

 <script src="common.js"></script>
<script>f2();</script>

第一行<script src="common.js"></script>,表示导入common.js文件,common.js文件的内容:

 function f2(){
alert('f2')
}

2、JavaScript代码存在位置

  • HTML的head中
  • HTML的body代码块底部(推荐)

由于Html代码是从上到下执行,如果放在head头部中的js代码耗时严重,就会导致用户长时间无法看到页面;如果放置在body代码块底部,那么即使js代码耗时严重,也不会影响用户看到页面效果,只是js实现特效慢而已。
一般把js代码放在body代码块的最后面

二、声明变量/注释/分号

JavaScript中变量的声明是一个非常容易出错的点,局部变量必须一个 var 开头,如果未使用var,则默认表示声明的是全局变量。建议使用的时候一般不要使用全局变量!否则如果代码量比较大的时候容易出现调用混乱的问题。

 var name = "seven"  # 局部变量
age = 18            # 全局变量

注释:

单行注释:   //          
多行注释:  /* 要注释的内容 */  

分号:

写js代码时,注意每一行都加分号(如下面的左图)。
因为产品上线时会用专门的工具将多行的代码压缩成单行的代码(如下面的右图)。如果不加分号上线时就乱套了!!

          

jquery.js    没压缩成单选的
jquery.min.js  有压缩成单行

实例: 刚好我下载jquery时发现是jquery-3.1.1.min.js就顺手截了图。

三、数字与字符串

1. 数字(Number)

 var age = 18;
或 var age = Number(18);

将字符串转化为数字 

Number("123");  或  parseInt("123");    推荐

前面已经说过浏览器内置了JavaScript语言的解释器,下面就来写个超简单的:

<script>
var age = "18";
var age_1 = parseInt(age);
console.log(age);
console.log(age, typeof age); //输出:18 string 注意:typeof age 别写错 var age_2 ="16.6";
console.log(parseInt(age_2)); //输出:16
console.log(parseFloat(age_2)); //输出:16.6 var a1 = 1,a2 = 2, a3 = 3; //单行定义多个变量
</script>

运行界面截图:

2. 字符串(String)

  • charAt()    根据索引取字符串的某个字符
  • trim()      去除空格
  • substring(a, b)        切片(切取大于等于a,小于b的内容)
  • indexOf() 获取字符的索引
  • length       字符串的长度

实例请看下图(清晰明了~~):

四、布尔/数组/字典

1. 布尔

Boolean(1)  返回true
Boolean(0)    返回false

2. 数组

定义数组的下面两种方式:

 var names = ['alex', 'tony', 'eric']
var names = Array('alex', 'tony', 'eric')

添加元素:

 obj.push(ele)                   //追加
obj.unshift(ele)                //最前插入
obj.splice(index,0,'content')   //指定索引插入 (0是固定写的)

实例请看下图:

移除:

 obj.pop()                       //数组尾部移除
obj.shift()                      //数组头部移除
obj.splice(index,count)  //数组指定位置后count个字符

切片:

 obj.slice(start,end)   //大于等于start,小于end

实例请看下图:

合并

  • newArray = obj1.concat(obj2)

翻转

  • obj.reverse()

字符串化

  • obj.join('_')

长度

  • obj.length

字典

 var items = {'k1': 123, 'k2': 'tony'}

实例请看下图:

更多操作请参考:http://www.shouce.ren/api/javascript/main.html

五、序列化与反序列化

序列化:  JSON.stringify()
反序列化: JSON.parse()

undefined: 表示未定义值

null: 一个特殊值

六、循环

数组有两种循环方式,字典只有一种。

 var names = ["alex", "tony", "rain"];
 
// 数组:方式一
for(var i=0;i<names.length;i++){
    console.log(i);
    console.log(names[i]);
}
 
 
// 数组:方式二
for(var index in names){
    console.log(index);
    console.log(names[index]);
}
 
var names = {"name": "alex", "age":18};
 
 
// 字典:方式一
for(var index in names){
    console.log(index);
    console.log(names[index]);
}

实例请看下图:

在浏览器console界面,按住shift + enter可回车后继续写代码,而不是执行命令。

注意: for(var item in li){}  item是索引,这与python的循环不一样,千万别搞混了。

七、条件语句与异常处理

1. 条件语句

 //if条件语句
 
    if(条件){
 
    }else if(条件){
         
    }else{
 
    }
 
var name = 'alex';
var age = 1;
 
// switch,case语句
    switch(name){
        case '1':
            age = 123;
            break;
        case '2':
            age = 456;
            break;
        default :
            age = 777;
    }

2. 异常处理

 try{
 
}catch(e) {
 
}finally{
 
}

条件语句与异常处理与C语言和python类似,没什么好讲的,过~~

八、函数

  1. 普通函数
  2. 匿名函数
  3. 自执行函数
     <script>
//普通函数
function func1(arg) {
console.log(arg);
return "zcl";
}
var ret = func1(123);
console.log(ret); //匿名函数 f为函数名
var f = function (arg) {
console.log(arg);
};
f(12345); //自执行函数:定义函数并自动执行
(function (arg) { //自执行函数先写()(); 再在第一个括号写function
console.log(1234, arg);
})("zcl");
</script>

运行结果:

九、面向对象

 <script>
function Foo (name,age) {
this.Name = name;
this.Age = age;
this.Func = function(arg){
return this.Name + arg;
}
}
var obj = new Foo('zcl', 22);
console.log(obj.Name);
console.log(obj.Age);
var re = obj.Func(' good man');
console.log(re)
</script>

转发注明出处:http://www.cnblogs.com/0zcl/p/6416410.html

【前端】:JavaScript的更多相关文章

  1. 前端JavaScript规范

    前端JavaScript规范 http://www.imooc.com/article/1402 http://greengerong.com/blog/2015/05/09/qian-duan-ja ...

  2. 实例演示 kino.razor (前端 Javascript 模板工具,Razor 风格)的使用

    前言 对于习惯了 ASP.NET MVC Razor 模板引擎的人来说,比如我,一直在寻找前端 Javascript 端的 Razor 模板工具.这之前,我也了解到很多Javascript 端的模板工 ...

  3. 在C#后端处理一些结果然传给前端Javascript或是jQuery

    在C#后端处理一些结果然传给前端Javascript或是jQuery,以前Insus.NET有做过一个例子<把CS值传给JS使用 >http://www.cnblogs.com/insus ...

  4. 前端javascript模板

    doT.js——前端javascript模板引擎问题备忘录 我手里维护的一个项目,遇到一个问题:原项目的开发人员在Javascript中,大量的拼接HTML,导致代码极丑,极难维护.他们怎么能够忍受的 ...

  5. Web前端-JavaScript基础教程上

    Web前端-JavaScript基础教程 将放入菜单栏中,便于阅读! JavaScript是web前端开发的编程语言,大多数网站都使用到了JavaScript,所以我们要进行学习,JavaScript ...

  6. 前端javascript

    前端 JavaScript   javaScript----数据库jquery $(function(){ 执行代码   });  基本语法:$(selector).action() $(" ...

  7. Fundebug前端JavaScript插件更新至1.2.0

    摘要: Fundebug的前端JavaScript错误监控插件更新至1.2.0:支持监控WebSocket连接错误:修复了监控unhandledrejection错误的BUG,即未用catch处理的P ...

  8. Fundebug前端JavaScript插件更新至1.8.2,修复2个小BUG

    摘要: 修复2个BUG,请大家及时更新. Fundebug前端异常监控服务 Fundebug是专业的程序异常监控平台,我们JavaScript插件可以提供全方位的异常监控,可以帮助开发者第一时间定位各 ...

  9. Web前端-JavaScript基础教程下

    Web前端-JavaScript基础教程下 <script>有6个属性: async对外部脚本有效,可以用来异步操作,下载东西,不妨碍其他操作. charset为src属性指定字符集. d ...

  10. 前端 JavaScript 复制粘贴的奥义——Clipboard 对象概述

    前言 作为一名资深搬砖工,你要问我用得最熟练的技能是什么,那我敢肯定且自豪的告诉你:是 Ctrl+C !是 Ctrl+V! 不信?你来看看我键盘上的 Ctrl.C 和 V 键,那油光发亮的包浆程度,不 ...

随机推荐

  1. IOS中单例NSUserDefaults的使用(转)

    一.了解NSUserDefaults以及它可以直接存储的类型 http://my.oschina.net/u/1245365/blog/294449 NSUserDefaults是一个单例,在整个程序 ...

  2. 一句话绑定父函数的作用域this

    //如何在返回的函数中绑定父函数的作用域this function bound () { return function () { console.log(this); }.bind(this); } ...

  3. 一 APPIUM基本理论知识

    1.APPIUM介绍 Appium 是一个自动化测试开源工具,支持 iOS 平台和 Android 平台上的原生应用,web 应用和混合应用.所谓的“移动原生应用”是指那些用 iOS SDK 或者 A ...

  4. VS2013 F12无法转到函数的定义处,总是从“元数据”获取的问题 ——解决方法

    右键项目名称-->点击菜单中的"添加"-->点击"引用"-->在弹出窗中点击"解决方案"下的"项目", ...

  5. ubuntu修改环境变量

    1.修改/etc/profile后重启之后就失效了,需要修改/etc/environment才可以 以下情况是失败的: 在/etc/profile文件中添加变量[对所有用户生效(永久的)] 用VI在文 ...

  6. HTML5 Canvas、内联 SVG、Canvas vs. SVG

    canvas 元素用于在网页上绘制图形. 什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canv ...

  7. JavaWeb三层结构---课设02

    收获总结 1三层架构模式 区分层次的目的即为了“高内聚,低耦合”的思想 分层介绍: Javaweb设计分为三层:数据访问层,业务逻辑层和表示层. 数据访问层:只提供对基本数据的访问,不涉及任何的业务逻 ...

  8. HTML 表单和输入

    HTML 表单 表单是一个包含表单元素的区域. 表单元素是允许用户在表单中输入内容,比如:文本域(textarea).下拉列表.单选框(radio-buttons).复选框(checkboxes)等等 ...

  9. PHP用户注册邮箱并验证激活帐号

    我们在很多网站注册会员时,注册完成后,系统会自动向用户的邮箱发送一封邮件,这封邮件的内容就是一个URL链接,用户需要点击打开这个链接才能激活之前在该网站注册的帐号.激活成功后才能正常使用会员功能. 查 ...

  10. Last-Modified和ETag以及Apache和Nginx中的配置

    1) 什么是”Last-Modified”? 在浏览器第一次请求某一个URL时,服务器端的返回状态会是200,内容是你请求的资源,同时有一个Last-Modified的属性标记此文件在服务期端最后被修 ...