谷哥的小弟学前端(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了. 注意: 所有的案例都在这里链接: 提取密码密码 ...
随机推荐
- [Winform]检测exe是否已经运行,并将其置顶
摘要 在很多pc应用中,基本上都需要有这样的判断,保证在一个终端只运行一个winform的client.并且如果最小化了,用户再次双击桌面图标的时候,将client置顶显示. 解决方案 需要使用win ...
- 《Netty权威指南》
<Netty权威指南> 基本信息 作者: 李林锋 出版社:电子工业出版社 ISBN:9787121233432 上架时间:2014-5-29 出版日期:2014 年6月 开本:16开 页码 ...
- Kubernetes基础
Kubernetes是什么 Kubernetes是当今最流行的开源容器管理平台,它就是大名鼎鼎的Google Borg的开源版本.Google在2014年推出了Kubernetes,本文发布时最新的版 ...
- [转]MySQL主从复制(Master-Slave)与读写分离(MySQL-Proxy)实践
转自:http://heylinux.com/archives/1004.html Mysql作为目前世界上使用最广泛的免费数据库,相信所有从事系统运维的工程师都一定接触过.但在实际的生产环境中,由单 ...
- NAT模式
NAT NAT模式中,就是让虚拟机借助NAT(网络地址转换)功能,通过宿主机器所在的网络来访问公网. NAT模式中,虚拟机的网卡和物理网卡的网络,不在同一个网络,虚拟机的网卡,是在vmware提供的一 ...
- Eclipse Debug提示source not found解决方案
场景:我在引用的jar包的某个class文件的某一行代码打了个断点,当然我是已经指定了source源码包路径,否则我是查看不了class文件的源码更不用说打断点了,但是在debug模式下,却提示&qu ...
- NOIP2016 酱油记
2016.11.17 考试前最后一个周四.然而我仍旧蒟蒻... 2016.11.18 周五,上午自家开车跑到晋城,中午12点到宾馆.下午4点去机房试机,先写了个线性筛,结果c++报错!?重开机,写个a ...
- maven打包加时间戳
基于Maven的项目,发布时需要打包,如tar.gz.web项目打成war格式包.每次打包时希望自己加上时间戳,假如我的项目名是myproject,默认打包后名为myproject.war.而我希望的 ...
- ASP.NET MVC:WebPageBase.cs
ylbtech-funcation-Utility: ASP.NET MVC:WebPageBase.cs 充当表示 ASP.NET Razor 页的类的基类. 1.A,WebPageBase 抽象类 ...
- Win2008建立域时administrator账户密码不符合要求
在win2008中建立域时,有时会出现administrator账户密码不符合要求的现象,报错会说明目前本地administrator账户不需要密码.这是什么原因造成的呢?原来,目前的2008镜像在网 ...