【前端】:JavaScript
前言: 开始学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类似,没什么好讲的,过~~
八、函数
- 普通函数
- 匿名函数
- 自执行函数
<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的更多相关文章
- 前端JavaScript规范
前端JavaScript规范 http://www.imooc.com/article/1402 http://greengerong.com/blog/2015/05/09/qian-duan-ja ...
- 实例演示 kino.razor (前端 Javascript 模板工具,Razor 风格)的使用
前言 对于习惯了 ASP.NET MVC Razor 模板引擎的人来说,比如我,一直在寻找前端 Javascript 端的 Razor 模板工具.这之前,我也了解到很多Javascript 端的模板工 ...
- 在C#后端处理一些结果然传给前端Javascript或是jQuery
在C#后端处理一些结果然传给前端Javascript或是jQuery,以前Insus.NET有做过一个例子<把CS值传给JS使用 >http://www.cnblogs.com/insus ...
- 前端javascript模板
doT.js——前端javascript模板引擎问题备忘录 我手里维护的一个项目,遇到一个问题:原项目的开发人员在Javascript中,大量的拼接HTML,导致代码极丑,极难维护.他们怎么能够忍受的 ...
- Web前端-JavaScript基础教程上
Web前端-JavaScript基础教程 将放入菜单栏中,便于阅读! JavaScript是web前端开发的编程语言,大多数网站都使用到了JavaScript,所以我们要进行学习,JavaScript ...
- 前端javascript
前端 JavaScript javaScript----数据库jquery $(function(){ 执行代码 }); 基本语法:$(selector).action() $(" ...
- Fundebug前端JavaScript插件更新至1.2.0
摘要: Fundebug的前端JavaScript错误监控插件更新至1.2.0:支持监控WebSocket连接错误:修复了监控unhandledrejection错误的BUG,即未用catch处理的P ...
- Fundebug前端JavaScript插件更新至1.8.2,修复2个小BUG
摘要: 修复2个BUG,请大家及时更新. Fundebug前端异常监控服务 Fundebug是专业的程序异常监控平台,我们JavaScript插件可以提供全方位的异常监控,可以帮助开发者第一时间定位各 ...
- Web前端-JavaScript基础教程下
Web前端-JavaScript基础教程下 <script>有6个属性: async对外部脚本有效,可以用来异步操作,下载东西,不妨碍其他操作. charset为src属性指定字符集. d ...
- 前端 JavaScript 复制粘贴的奥义——Clipboard 对象概述
前言 作为一名资深搬砖工,你要问我用得最熟练的技能是什么,那我敢肯定且自豪的告诉你:是 Ctrl+C !是 Ctrl+V! 不信?你来看看我键盘上的 Ctrl.C 和 V 键,那油光发亮的包浆程度,不 ...
随机推荐
- IAR for STM8 错误
一个IAR for STM8 v1.3 的工程,换到1.4版后出现如下错误 unable to allocate space for sections/blocks with a total esti ...
- JavaScript------处理Json数据
//JSON相关函数 JSON.parse(); //将JSON字符串转换为JavaScript对象JSON.stringify(); //将JavaScript值转换为JSON字符串 1.//JSO ...
- OmniGraffle-新手指南
OmniGraffle是一款不错的可视化软件,通过它你可以把你想要展现的数据简介.直观的展现在图.表上,这是我在数据可视化工具这篇随笔中说过的功能.但是当我真正用它时,我发现它可以做的事情还有很多. ...
- JAVA-Unit01: 数据库原理 、 SQL(DDL、DML)
Unit01: 数据库原理 . SQL(DDL.DML) SQL语句是不区分大小写的,但是行业里习惯将关键字与分关键字用大小写岔开以提高可读性. SELECT SYSDATE FROM dual DD ...
- keystore 介绍
Keytool 是一个有效的安全钥匙和证书的管理工具. Java 中的 keytool.exe (位于 JDK\Bin 目录下)可以用来创建数字证书,所有的数字证书是以一条一条(采用别名区别)的形式存 ...
- SQL数据库置疑修复
SQL数据库置疑修复 首先分析数据库置疑的原因,查明原因分析数据库置疑修复的方法,解决置疑后,考虑数据库置疑的预防方案. 数据库置疑产生的原因: 1.sql所在分区空间是否够?数据库文件大小是否达 ...
- poi jar包介绍
来自官网: Component Application type Maven artifactId Notes POIFS OLE2 Filesystem poi Required to work w ...
- Spinnerd的功能和用法
此处的Spinner其实是一个列表选择框.不过Android的列表选择框并不是需要下拉列表的,而是相当于弹出一个菜单供用户选择. Spinner和Gallery都继承了AbsSpinner,AbsSp ...
- 部署Replica Sets及查看相关配置
MongoDB 支持在多个机器中通过异步复制达到故障转移和实现冗余.多机器中同一时刻只有一台是用于写操作.正是由于这个情况,为MongoDB 提供了数据一致性的保障.担当Primary 角色的机器能把 ...
- MyBatis 的Mapper中有小于号的处理
<![CDATA[ select * from person t where t.birthday < #{birthday} ]]> 也可以进行转义: < < 小于号 ...