谷哥的小弟学前端(10)——JavaScript基础知识(1)
探索Android软键盘的疑难杂症
深入探讨Android异步精髓Handler
具体解释Android主流框架不可或缺的基石
站在源代码的肩膀上全解Scroller工作机制
Android多分辨率适配框架(1)— 核心基础
Android多分辨率适配框架(2)— 原理剖析
Android多分辨率适配框架(3)— 使用指南
自己定义View系列教程00–推翻自己和过往,重学自己定义View
自己定义View系列教程01–经常使用工具介绍
自己定义View系列教程02–onMeasure源代码详尽分析
自己定义View系列教程03–onLayout源代码详尽分析
自己定义View系列教程04–Draw源代码分析及事实上践
自己定义View系列教程05–演示样例分析
自己定义View系列教程06–具体解释View的Touch事件处理
自己定义View系列教程07–具体解释ViewGroup分发Touch事件
自己定义View系列教程08–滑动冲突的产生及其处理
版权声明
- 本文原创作者:谷哥的小弟
- 作者博客地址:http://blog.csdn.net/lfdfhl
JavaScript简单介绍
初识JavaScript
JavaScript是一种网页编程技术,其功能强大,实现简单方便,入门简单,即使是程序设计新手也能够高速地使用JavaScript进行简单的编程。
JavaScript是一种基于对象和事件驱动。并具有安全性能的脚本语言。脚本语言简单理解就是在client的浏览器就能够互动响应处理程序的语言。而不须要server的处理和响应,当然JavaScript也能够做到与server的交互响应
JavaScript能够被嵌入到HTML文件里,不须要经过Webserver就能够对用户操作作出响应,使网页更好地与用户交互。降低用户等待时间。提升用户体验
概括地讲:JavaScript是一门执行在浏览器的脚本编程语言
JavaScript的组成
- ECMAScript:JavaScript的语法标准
- DOM:JavaScript操作网页上元素的API
- BOM:JavaScript操作浏览器的部分功能的API
JavaScript的特点
- 简单易用
可使用文本编辑工具编写。仅仅需浏览器就可执行程序 - 解释执行
程序执行前不编译。而是在程序的执行过程中逐行进行解释 - 基于对象
不仅能够创建对象,也能使用现有的对象 - 跨平台特性
支持绝大多数浏览器。可在多平台下执行(如Windows、Linux、Mac、Android、iOS)
JavaScript的书写位置
JavaScript有两种常见的写法,分别介绍例如以下
第一种:内嵌式写法
<!DOCTYPE html>
<!-- 本文作者:谷哥的小弟 -->
<!-- 博客地址:http://blog.csdn.net/lfdfhl -->
<html lang="en">
<head>
<meta charset="utf-8">
<title>JS的写法</title>
<script type="text/javascript">
//此处为JS代码
</script>
</head>
<body>
</body>
</html>
- 将<script></script>置于<head></head>中
- 在<script></script>标签内写JavaScript的相关代码
- 请以分号”;”结束每一行JavaScript代码
- 推荐将<script></script>置于<html></html>之后
另外一种:外链式写法
<!DOCTYPE html>
<!-- 本文作者:谷哥的小弟 -->
<!-- 博客地址:http://blog.csdn.net/lfdfhl -->
<html lang="en">
<head>
<meta charset="utf-8">
<title>JS的写法</title>
<script type="text/javascript" src="test.js">
</script>
</head>
<body>
</body>
</html>
- 将JavaScript相关代码写在.js文件里
- 请以分号”;”结束每一行JavaScript代码
- 利用<script></script>的src属性链接.js文件
- 为提高浏览器的解析效率,尽量将多个js文件合并成一个js
JavaScript之Hello World
嗯哼,我们来体验一把JavaScript
利用alert( )弹出信息
<!DOCTYPE html>
<!-- 本文作者:谷哥的小弟 -->
<!-- 博客地址:http://blog.csdn.net/lfdfhl -->
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hello World</title>
</head>
<body>
</body>
</html>
<script type="text/javascript">
alert("Hello World");
</script>
执行后,效果例如以下图所看到的:
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGZkZmhs/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="这里写图片描写叙述" title="">
在此。利用alert( )在网页中弹出提示消息。
利用confirm( )显示确认对话框
confirm("您真的要关闭此网页么?");
执行后。效果例如以下图所看到的:
在此,利用confirm( )显示一个带有指定消息和确定及取消button的对话框。
利用prompt( )接收用户输入
prompt("请输入您的会员卡号");
执行后,效果例如以下图所看到的:
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGZkZmhs/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="这里写图片描写叙述" title="">
在此。利用prompt( )接收用户的输入信息。
利用console.log( )输出日志
console.log("This is log message");
执行后,效果例如以下图所看到的:
在此,利用console.log( )输出日志进行代码的调试
利用document.write( )向输出流写信息
document.write("大家好<br>我是谷哥的小弟");
执行后。效果例如以下图所看到的:
在此,利用document.write( )向输出流写信息。输出信息能够是纯文本也可包括HTML标签
JavaScript的变量
变量的定义
通过var关键字定义声明变量。比方:
var name;
在此定义。一个变量叫name
变量的赋值
通过”=”为变量赋值,比方:
var name;
name=”谷哥的小弟”
当然。也能够在定义变量的同一时候为其赋值,比方:
var name=”谷哥的小弟”;
变量的命名规范
- 变量名中不能含有空格
- 请注意JavaScript严格区分字母大写和小写。所以var A和var a是不同的变量
- 请勿使用纯数字或者以数字开头定义变量
- 不建议使用汉字定义变量
- 请勿使用纯特殊字符定义变量
- 请勿使用特殊字符开头(“_”除外)定义变量
- 请勿使用关键字定义变量。比方var、try、void 等
- 不建议使用保留字定义变量;比方byte、char、import等
JavaScript的数据类型
JavaScript的数据类型能够分为简单数据类型和复杂数据类型这两大类。
在实际开发中可使用typeof(var)推断变量的数据类型。
- 简单数据类型
- number 数字类型
- string 字符串类型
- boolean 布尔类型
- undefined 变量未初始化
- 复杂数据类型
- Array 数组
- Object 对象
如今,对以上数据类型具体介绍例如以下
简单数据类型——number
把数字(比方小数、正数、负数)赋值给变量,那么该变量的数据类型就是数字类型(number)。
数字类型(number)不但能够表示常见的十进制数字还能够表示十六进制,八进制的数字。
请看例如以下演示样例:
<script type="text/javascript">
var num1=9527;//十进制
var num2=0x22;//十六进制
var num3=0124;//八进制
document.write("num1="+num1+",num2="+num2+",num3="+num3);
</script>
结果为:
num1=9527,num2=34,num3=84
简单数据类型——string
用双引號或者单引號包括起来的变量都是字符串类型。
请看例如以下演示样例:
<script type="text/javascript">
var str1="谷哥的小弟";
var str2='有心课堂';
document.write("str1="+str1+",str2="+str2);
</script>
结果为:
str1=谷哥的小弟,str2=有心课堂
简单数据类型——boolean
经常使用boolean类型数据表示真与假。
当中:
true表示真,相应的数字是1
false表示假,相应的数字是0
请看例如以下演示样例:
<script type="text/javascript">
var b1=true;
var b2=false;
document.write("b1="+b1+",b2="+b2);
</script>
结果为:
b1=true,b2=false
简单数据类型——undefined
undefined表示定义了变量但未对其初始化。
比方:
<script type="text/javascript">
var username;
document.write("username的类型是:"+typeof(username));
</script>
结果为:
username的类型是:undefined
此处,尽管声明了变量username但未对其初始化,此时username的类型是undefined
复杂数据类型——Array
JavaScript的Array能够包括随意数据类型,并通过索引来訪问每一个元素。并可通过length属性取得Array的长度
请看例如以下演示样例:
<script type="text/javascript">
var arr=[1,"hello",true,9527];
var len=arr.length;
document.write("len="+len+",arr[1]="+arr[1]+",arr[2]="+arr[2]);
</script>
结果为:
len=4,arr[1]=hello,arr[2]=true
在此对Array仅作很easy的介绍。我们会在随后的博客中对它作进一步的了解和学习
复杂数据类型——Object
JavaScript的Object用于描写叙述对象。它是一种由若干键值对组成的无序的集合数据类型
请看例如以下演示样例:
<script type="text/javascript">
var cheer = {
name:"陈绮贞",
birth:1975,
gender:"女",
height:168
};
document.write("name="+cheer.name+",height="+cheer.height);
</script>
结果为:
name=陈绮贞,height=168
请注意,假设给变量赋值null。那么该变量也是Object类型的;比如:
<script type="text/javascript">
var username=null;
document.write("username的类型是:"+typeof(username));
</script>
结果为:
username的类型是:object
在此对Object仅作很easy的介绍。我们会在随后的博客中对它作进一步的了解和学习
JavaScript的强制数据类型转换
1 将number转换成string
可利用String(var)和var.toString()这两种方式将number转换成string
请看例如以下演示样例:
<script type="text/javascript">
var age=18;
var pai=3.14;
document.write("age原本的数据类型是:"+typeof(age)+"<br>");
document.write("pai原本的数据类型是:"+typeof(pai)+"<br>");
age=String(age);
pai=pai.toString(pai);
document.write("age如今的数据类型是:"+typeof(age)+"<br>");
document.write("pai如今的数据类型是:"+typeof(pai)+"<br>");
</script>
结果为:
age原本的数据类型是:number
pai原本的数据类型是:number
age如今的数据类型是:string
pai如今的数据类型是:string
2 将string转换成number
可利用Number(var)和parseInt(var)以及parseFloat(var)将string转换成number
请看例如以下演示样例:
<script type="text/javascript">
var pai1="3.1415";
document.write("转换前pai1="+pai1+",数据类型是"+typeof(pai1)+"<br>");
var pai2="3.14159";
document.write("转换前pai2="+pai2+",数据类型是"+typeof(pai2)+"<br>");
var pai3="3.141596";
document.write("转换前pai3="+pai3+",数据类型是"+typeof(pai3)+"<br>");
pai1=Number(pai1);
document.write("转换后pai1="+pai1+",数据类型是"+typeof(pai1)+"<br>");
pai2=parseInt(pai2);
document.write("转换后pai2="+pai2+",数据类型是"+typeof(pai2)+"<br>");
pai3=parseFloat(pai3);
document.write("转换后pai3="+pai3+",数据类型是"+typeof(pai3)+"<br>");
</script>
结果为:
转换前pai1=3.1415,数据类型是string
转换前pai2=3.14159,数据类型是string
转换前pai3=3.141596,数据类型是string
转换后pai1=3.1415,数据类型是number
转换后pai2=3,数据类型是number
转换后pai3=3.141596,数据类型是number
请注意:
- 利用Number(var)将string转换成number,最后的结果为原数据
- 利用parseInt(var)将string转换成number。最后的结果为原数据的整数部分
- 利用parseFloat(var)将string转换成number,最后的结果为原数据
3 将其他数据类型转换为boolean
可利用Boolean(var)将其他数据类型转换为boolean
请看例如以下演示样例:
<script type="text/javascript">
var age=18;
document.write("转换前age="+age+",数据类型是"+typeof(age)+"<br>");
var user="谷哥的小弟";
document.write("转换前user="+user+",数据类型是"+typeof(user)+"<br>");
var zero=0;
document.write("转换前zero="+zero+",数据类型是"+typeof(zero)+"<br>");
age=Boolean(age);
document.write("转换后age="+age+",数据类型是"+typeof(age)+"<br>");
user=Boolean(user);
document.write("转换后user="+user+",数据类型是"+typeof(user)+"<br>");
zero=Boolean(zero);
document.write("转换后zero="+zero+",数据类型是"+typeof(zero)+"<br>");
</script>
结果为:
转换前age=18,数据类型是number
转换前user=谷哥的小弟,数据类型是string
转换前zero=0,数据类型是number
转换后age=true,数据类型是boolean
转换后user=true,数据类型是boolean
转换后zero=false,数据类型是boolean
请注意:
- 可利用Boolean(var)可将数字0转换为false
- 可利用Boolean(var)将其他数据类型强制转换为true
JavaScript的算术运算符
关于JavaScript的算术运算符。请參见下表:
JavaScript的赋值运算符
关于JavaScript的赋值运算符。请參见下表:
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGZkZmhs/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="这里写图片描写叙述" title="">
JavaScript的比較运算符
JavaScript中经常使用的比較运算符有 >、<、>=、<=
比較运算符最后的结果为:true或false
请看例如以下演示样例:
<script type="text/javascript">
var num1=9527;
var num2=9528;
var result=num1>num2;
document.write("比較结果为:"+result);
</script>
结果为:
比較结果为:false
JavaScript的逻辑运算符
在此介绍JavaScript中三种常见的逻辑运算符:或运算符号||和且运算符号&&以及非运算符!;开发中可运用这三种逻辑运算符对两个boolean类型的变量进行运算。
1 、或运算符号||
- 假若两个boolean类型的变量,当中一个为true,那么||运算的结果为true
- 假若两个boolean类型的变量,当中一个为false。那么||运算的结果为true
- 假若两个boolean类型的变量,两个均为false,那么||运算的结果为false
2 、且运算符号&&
- 假若两个boolean类型的变量。当中一个为true。那么&&运算的结果为false
- 假若两个boolean类型的变量,两个均为true,那么&&运算的结果为true
- 假若两个boolean类型的变量,两个均为false。那么&&运算的结果为false
3 、非运算符号!
- 假若一个boolean类型的变量,其值为false ,那么!运算后结果为true
- 假若一个boolean类型的变量,其值为true ,那么!运算后结果为false
JavaScript的等号=运算符
在此介绍JavaScript中与等号=相关的经常使用运算符
1 、=运算符
利用=运算符进行赋值操作
请看例如以下演示样例:
var age=18;
在此利用=运算符为变量age赋值
2 、==运算符
利用==运算符推断两个变量是否同样。请注意,该运算符仅仅推断两个变量的内容是否同样而与两个变量的数据类型无关。
请看例如以下演示样例:
<script type="text/javascript">
var num1=9527;
var num2="9527";
document.write("num1="+num1+",数据类型是"+typeof(num1)+"<br>");
document.write("num2="+num2+",数据类型是"+typeof(num2)+"<br>");
var result=(num1==num2);
document.write("比較的结果result="+result+"<br>");
</script>
结果为:
num1=9527,数据类型是number
num2=9527,数据类型是string
比較的结果result=true
3 、===运算符
利用===运算符推断两个变量是否同样。请注意,该运算符不但推断两个变量的内容是否同样并且也推断两个变量的数据类型是否同样。
请看例如以下演示样例:
<script type="text/javascript">
var num1=9527;
var num2="9527";
var num3=9527;
document.write("num1="+num1+",数据类型是"+typeof(num1)+"<br>");
document.write("num2="+num2+",数据类型是"+typeof(num2)+"<br>");
document.write("num3="+num3+",数据类型是"+typeof(num3)+"<br>");
var result1=(num1==num2);
document.write("比較的结果result1="+result1+"<br>");
var result2=(num1===num3);
document.write("比較的结果result2="+result2+"<br>");
var result3=(num1===num2);
document.write("比較的结果result3="+result3+"<br>");
</script>
结果为:
num1=9527,数据类型是number
num2=9527,数据类型是string
num3=9527,数据类型是number
比較的结果result1=true
比較的结果result2=true
比較的结果result3=false
4 、!=运算符
利用!=运算符推断两个变量是否不同样。
请注意,该运算符仅仅推断两个变量的内容是否不同样而与两个变量的数据类型无关。
请看例如以下演示样例:
<script type="text/javascript">
var num1=9527;
var num2="9527";
document.write("num1="+num1+",数据类型是"+typeof(num1)+"<br>");
document.write("num2="+num2+",数据类型是"+typeof(num2)+"<br>");
var result=(num1!=num2);
document.write("比較的结果result="+result+"<br>");
</script>
结果为:
num1=9527,数据类型是number
num2=9527,数据类型是string
比較的结果result=false
5 、!==运算符
利用!==运算符推断两个变量是否不同样。
请注意。该运算符不但推断两个变量的内容是否不同样并且也推断两个变量的数据类型是否不同样。假若两个变量的内容一样并且数据类型也一样。那么!==的结果为false;其余情况下为true
请看例如以下演示样例:
<script type="text/javascript">
var num1=9527;
var num2="9527";
var num3="1234";
var num4=9527;
document.write("num1="+num1+",数据类型是"+typeof(num1)+"<br>");
document.write("num2="+num2+",数据类型是"+typeof(num2)+"<br>");
document.write("num3="+num3+",数据类型是"+typeof(num3)+"<br>");
document.write("num4="+num4+",数据类型是"+typeof(num4)+"<br>");
var result1=(num1!==num2);
document.write("比較的结果result1="+result1+"<br>");
var result2=(num1!==num3);
document.write("比較的结果result2="+result2+"<br>");
var result3=(num2!==num3);
document.write("比較的结果result3="+result3+"<br>");
var result4=(num1!==num4);
document.write("比較的结果result4="+result4+"<br>");
</script>
结果为:
num1=9527,数据类型是number
num2=9527,数据类型是string
num3=1234,数据类型是string
num4=9527,数据类型是number
比較的结果result1=true
比較的结果result2=true
比較的结果result3=true
比較的结果result4=false
谷哥的小弟学前端(10)——JavaScript基础知识(1)的更多相关文章
- 谷哥的小弟学前端(11)——JavaScript基础知识(2)
探索Android软键盘的疑难杂症 深入探讨Android异步精髓Handler 具体解释Android主流框架不可或缺的基石 站在源代码的肩膀上全解Scroller工作机制 Android多分辨率适 ...
- 谷哥的小弟学前端(01)——HTML常用标签(1)
探索Android软键盘的疑难杂症 深入探讨Android异步精髓Handler 详解Android主流框架不可或缺的基石 站在源码的肩膀上全解Scroller工作机制 Android多分辨率适配框架 ...
- 谷哥的小弟学前端(02)——HTML常用标签(2)
探索Android软键盘的疑难杂症 深入探讨Android异步精髓Handler 详解Android主流框架不可或缺的基石 站在源码的肩膀上全解Scroller工作机制 Android多分辨率适配框架 ...
- 谷哥的小弟学后台(04)——MySQL(4)
探索Android软键盘的疑难杂症 深入探讨Android异步精髓Handler 具体解释Android主流框架不可或缺的基石 站在源代码的肩膀上全解Scroller工作机制 Android多分辨率适 ...
- 前端之JavaScript基础
前端之JavaScript基础 本节内容 JS概述 JS基础语法 JS循环控制 ECMA对象 BOM对象 DOM对象 1. JS概述 1.1. javascript历史 1992年Nombas开发出C ...
- 第三篇:web之前端之JavaScript基础
前端之JavaScript基础 前端之JavaScript基础 本节内容 JS概述 JS基础语法 JS循环控制 ECMA对象 BOM对象 DOM对象 1. JS概述 1.1. javascript ...
- Javascript基础知识总结一
Javascript基础知识总结一 <!DOCTYPE html> <html> <head lang="en"> <meta chars ...
- 学习javascript基础知识系列第三节 - ()()用法
总目录:通过一段代码学习javascript基础知识系列 注意: 为了便于执行和演示,建议使用chrome浏览器,按F12,然后按Esc(或手动选择)打开console,在console进行执行和演示 ...
- JavaScript 基础知识 - BOM篇
前言 本篇文章是JavaScript基础知识的BOM篇,如果前面的<JavaScript基础知识-DOM篇>看完了,现在就可以学习BOM了. 注意: 所有的案例都在这里链接: 提取密码密码 ...
随机推荐
- 使用cat读取和echo写内核文件节点的一些问题
span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; }.CodeMirror ...
- Unity3D实践系列09, 物理引擎与碰撞检测
在Unity3D中,一个物体通常包含一个Collider和一个Rigidbody.Collider是碰撞体,一个物体是Collider,才可以进行碰撞检测.Collider组件中的"Is T ...
- 一个例子来看C#泛型是如何登场的
有这样一个有关汽车的类. public class Car { public int ID { get; set; } public string Make { get; set; } } 现在,在客 ...
- C#编程(六十)----------LINQ的概述
LINQ的概述 LINQ的全名为语言继承查询,是VS2008个.NET3.5版中一款突破性的创新,他再对象领域和数据领域之间架起了一座桥梁.使用LINQ能大大加快对于对象数据等等的查询,加快效率. 由 ...
- 丑闻第三季 /全集Scandal迅雷下载
丑闻 第三季 Scandal Season 3 (2013)本季看点:在经典美剧<老友记第一季>中饰演菲比的女星莉莎·库卓,即将加盟描写华府危机公关的ABC剧集<丑闻>(Sca ...
- Mac环境配置 - iOS开发人员 -待续
Mac环境记录 Mac 相关 目录相关 显示: $ defaults write com.apple.finder AppleShowAllFiles -bool true 隐藏: $ default ...
- [Android Security] jar文件转smali文件
cp : https://blog.csdn.net/fengmm521/article/details/78446486 jar转smali文件一共要走两步,先将jar文件转为.dex文件 (dx工 ...
- Leetcode刷题记录:计算复数乘法
题目要求 计算两个复数的乘积. 参考题解 这道题感觉很简单,主要是对复数的表达式进行解析,然后套用公式,输出结果就可以了. class Solution: def complexNumberMulti ...
- Orchard之创建列表
一:首先需要确保 List Module 的开始 即: Enable 之后,左边的列表中,多了一个 List 功能菜单. 二:为 Content type 选定 Cotainable 不再赘述. 三: ...
- 转:PHP高效率写法(详解原因)
FROM : http://my.oschina.net/No5stranger/blog/157585#OSC_h3_1 1.尽量静态化: 如果一个方法能被静态,那就声明它为静态的,速度可提高1/4 ...