标签 javascript 下的文章

函数(方法)定义和调用
通过 function 关键字
和自定义方法名 既可定义一个函数。 如下:

function test(x){  //定义
  alert(x);
}

test(3);//调用

注意:

  • function指出这是一个函数定义;
  • test是函数的名称;
  • (x)括号内列出函数的参数,多个参数以,分隔;
  • { ... }之间的代码是函数体,可以包含若干语句,甚至可以没有任何语句。

顺序结构

顺序结构表示程序中的各操作是按照它们出现的先后顺序执行的。一般情况下都是从上向下执行。

选择结构

选择结构表示程序的处理步骤出现了分支,它需要根据某一特定的条件选择其中的一个分支执行。
If...else

if(条件表达式){
如果条件表达式结果为true,执行该处代码。  
}else{
如果条件表达式结果为false,执行该处代码。
}

if else嵌套

if(条件表达式){ 
如果条件表达式结果为true,执行该处代码。下边代码不执行。如果为false,执行下边代码。
}else  if(条件表达式){
如果条件表达式结果为true,执行该处代码。下边代码不执行。如果为false,执行下边代码。
}else  if(条件表达式){
如果条件表达式结果为true,执行该处代码。下边代码不执行。如果为false,执行下边代码。
}else{
如果上边条件表达式结果都为false,执行该处代码。
}

switch语句

switch(变量){
case 1:
如果变量和1的值相同,执行该处代码
break;
case 2:
如果变量和2的值相同,执行该处代码
break;
case 3:
如果变量和3的值相同,执行该处代码
break;
default:
如果变量和以上的值都不相同,执行该处代码
break;
}

注意:

  • switch后边的变量和case后边值的数据类型必须保持一致。
  • switch语句可以对变量进行集体判断。

循环结构

循环结构表示程序反复执行某个或某些操作,直到某条件为假(或为真)时才可终止循环。
While循环

While(条件表达式){
   只要条件表达式结果为true,循环一直执行,当条件表达式结果为false的时候,循环终止
}

注意:While循环语句需先在循环体外定义变量。
Do while循环

Do{
循环体代码;首先执行该循环体代码一次。
如果while后边的表达式结果为true,该循环体会一直循环。
如果结果false,该循环终止。
}while(条件表达式)

do...while至少循环以一次。

for循环

for(定义变量;条件表达式;自增自减){
循环体代码
}

执行顺序:

  • 首先定义变量.
  • 如果条件表达式结果为true的时候,执行for循环里的代码,如果为false,循环体代码终止执行。
  • 执行for循环里的代码之后,再执行自增自减。

注意:
1.遍历数组首选for循环,简单循环使用for。
2.而while循环强调,不记循环次数(不知道循环多少次),首选while。
3.最后do...while循环强调,无论怎样,至少执行一次是,使用do...while。

附录:自增自减

  • 在不参与运算的情况下,i++和++i都是在变量的基础加1。
  • 在参与运算的情况下

    • var i=5;var j=i++; 先将i的值5赋值给j,之后再自增。j的值为123 , i 的值为6。
    • var j=++i; i先自增,在赋值给j。J的值为6,i的值 6。
  • 自减与自增原理一样。

附录:break和continue

break语句
在循环体内,只要代码遇到break,程序立马结束当前循环。
当前循环指的是break语句所在的循环体。结束本循环。

continue语句
continue语句指的是跳出本次循环,该语句后面的代码不再执行,整个循环体继续循环。

任何类型转字符串

定义: var num = 123;

  • String() :var str = String(num);
  • 变量.toString():var str = num.toString();
  • 变量+""
    注意:Null和undefined无toString方法。

字符串转数字类型

此转换容易产生NaN,一旦被转换的变量中含有非数字字符,都容易出现NaN
定义:
str1 = "123";str2="12.12";str3="123abc";str4="aaa
Number()

  • 数字类型的字符串,转换之后得到的数字。var num = Number(str1)//结果:123
  • 小数类型的字符串,转换之后得到的是原数字。var num = Number(str2)//结果:12.12
  • 非数字字符串,转换之后得到是NaN。var num = Number(str3)//结果:12.12

parseInt()

  • 整数数字类型的字符串,转换之后得到的整数数字。var num = parseInt(str1)//结果:123
  • 小数类型的字符串,转换之后取整。var num = parseInt(str2)//结果:12
  • 数字开头的字符串,转换之后得到的是前边的数字。var num = parseInt(str3)//结果:123
  • 非数字开头的字符串,转换之后得到的是NaN。var num = parseInt(str4)//结果:NaN

parseFloat()

  • 整数数字类型的字符串,转换之后得到的整数数字。
  • 数字开头的字符串,转换之后得到的是前边的数字。
  • 非数字开头的字符串,转换之后得到的是NaN。
  • 小数类型的字符串,转换之后得到的是原数字。

注意:

  • Boolean类型中:true数值为1;false为0;
  • null的数值类型为0;
  • undefined无数值类型或者为NaN。

转布尔类型

  • 数字和字符串转完之后为true,但是0除外(非0即真)。
  • undefined、null转完之后为false.

方法:

  • Boolean(变量) :var bool = Boolean("1111");//bool为true;
  • !!变量
    第一个逻辑非操作会基于无论什么操作数返回一个与之相反的布尔值;第二个逻辑非操作则对该布尔值求反;于是就得到了这个值真正对应的布尔值。

注意:隐式数据类型转换
在运算过程中,比如算数运算,程序自己进行的数据转换来进行计算,但是不会对原变量进行数据转换。

JavaScript常用的Date()对象

  • Date() 返回当日的日期和时间。 通过new 方法创建对象。
  • getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
  • getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。
  • getMonth() 从 Date 对象返回月份 (0 ~ 11)。
  • getFullYear() 从 Date 对象以四位数字返回年份。
  • getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。 0代表的事星期日。
  • getHours() 返回 Date 对象的小时 (0 ~ 23)。
  • getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。
  • getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。

JavaScript常用的Math对象

  • Math.ceil() 向上取整,天花板函数

    • 如果是整数,取整之后是这个数本身
    • 如果是小数,对数进行向上舍入。
  • Math.floor() 向下取整, 地板函数。

    • 如果是整数,取整之后是这个数本身
    • 如果是小数,对数进行向下舍入。
  • Math.max(n1,n2) 取两个数的最大值。
  • Math.min(n1,n2)取两个数的最小值。
  • Math.pow(n1,n2)返货n1的n2次方。
  • Math.round() 进行四舍五入操作。
  • Math.random()返回0-1之间的随机数。
  • Math.abs(number)返回一个数字的绝对值(即该值不考虑数字是为正还是为负)。

JavaScript 算术运算符

算术运算符用于执行变量与/或值之间的算术运算。
下面的表格解释了这些算术运算符:
给定 y=5

运算符描述例子结果
+x=y+2x=7
-x=y-2x=3
*x=y*2x=10
/x=y/2x=2.5
%求余数 (保留整数)x=y%2x=1
++累加x=++yx=6
--递减x=--yx=4

注意:

  • 加号(+)

    • 两个数字类型的变量相加,得到的是一个数字类型。
    • 一个数字类型和一个字符串相加,得到的是一个字符串。字符串与字符串相加得到的也是字符串,此时的加号相当于字符串连接符。
  • 减号(-)

    • 两个数字类型的变量相减,得到的是一个数字类型。
    • 一个数字类型和一个数字字符串相减,得到的是一个数字类型。
    • 一个数字类型和一个非数字字符串相减,得到的是NaN,NaN是一个数字类型。NaN表示的事非数值。
  • 除号

    • 两个数字类型的变量相除,得到的是一个数字类型。
    • 一个数字类型和一个数字字符串相除,得到的是一个数字类型。
    • 一个数字类型和一个非数字字符串相除,得到的是NaN,是一个数字类型。
    • 0做为除数的时候,得到结果Infinity (无限大),Infinity 是一个数字类型。

    JavaScript 赋值运算符

    下面的表格解释了赋值运算符:
    给定 x=10 和 y=5

    运算符例子等价于结果
    =x=y-x=5
    +=x+=yx=x+yx=15
    -=x-=yx=x-yx=5
    *=x*=yx=x*yx=50
    /=x/=yx=x/yx=2
    %=x%=yx=x%yx=0

逻辑运算符

逻辑运算只有2个结果,一个为true,一个为false.

  • 且(&&):只有两个表达式为true的时候,结果为true,其余全为false。
  • 或(||):只要有一个表达式为true,结果为true,其余全为false。
  • 非(!):取反,表达式为true,取反则为false;表达式为false,取反则为true。

    比较运算符

    比较运算符在逻辑语句中使用,以测定变量或值是否相等,返回值为true或false。
    下面的表格解释了比较运算符:
    给定 x=5,

    运算符描述例子
    ==等于(只比较值,不比较数据类型)x==8 为 false
    ===全等(值和数据类型都比)x===5 为 true;x==="5" 为 false
    !=不等于(只比较值,不比较数据类型x!=8 为 true
    !==不全等于(值和数据类型都比)x!==8 为 true
    >大于x>8 为 false
    <小于x<8 为 true
    >=大于或等于x>=8 为 false
    <=小于或等于x<=8 为 true

三元表达式

表达式?结果1:结果2;
如果表达式结果为true,执行结果1,如果表达式结果为false,执行结果2。

var sum = 520;
var love = (sum === 520)?"520":"1314";

逗号运算符

集体声明变量时使用:var num,str;

优先级

1()
2!、-(负数)、++、-- (正数省略+)(一元运算)
3*、/、%
4+、- (加,减)(二元运算)
5<、<=、<、>= (一级逻辑运算)
6==、!=、===、!==、 (二级逻辑运算)
7&& (三级级逻辑运算)
8ll
9?: (三元运算)
10=、+=、-=、*=、/=、%= (赋值运算)

字符串(String)
字符串是存储字符的变量。
字符串可以是引号中的任意文本。您可以使用单引号或双引号。凡是用双引号或者单引号引起的都是字符串。用引号时,可以是单引号也可以是双引号,唯独不可以一个单引号一个双引号。可用.length看有几个字符。
转义:无法输出的字符,先输出/,在输出字符。("、\、换行等....)
字符串不可变:在内存中不会立刻消失,只能二次赋值,原有的字符在一定时间 内被 垃圾回收器回收。
字符串拼接:如果两个变量都是字符串,无论是否包含数字,只要是拼接,那么在前一个后面添加后一个字符串。
实例:

var name="xiaoning";
var username='xiaoning';

数字(Number)

JavaScript 只有一种数字类型。数字可以带小数点,也可以不带。

  • 十进制表示法(0~9):var num = 10;
  • 十六进制表示法(0-9,a(A)-f(F))表示数字,并且以0x开头:var num = 0x99a;
  • 八进制表示法(0-7),并且0开头:var num=077;
  • 科学(指数)计数法来书写:var num=123e5;

数值范围
由于内存的限制,ECMAScript 并不能保存世界上所有的数值
最小值:Number.MIN_VALUE,这个值为: 5e-324
最大值:Number.MAX_VALUE,这个值为: 1.7976931348623157e+308
无穷大:Infinity
无穷小:-Infinity
NaN
NaN 非数值(Not a Number的简写)
Undefined和任何数值计算为NaN;
NaN 与任何值都不相等,包括 NaN 本身

isNaN() :任何不能被转换为数值的值都会导致这个函数返回 true
不是一个数字的标准,如果符合了那么就不是一个数字,不符合就是一个数字。
isNaN(NaN);// true
isNaN(“blue”); // true
isNaN(123); // false

注意:
因为精度丢失问题,所以不判断计算后的两个浮点数是否相等。

布尔(Boolean)
布尔(逻辑)只能有两个值:true 或 false。际运算中true=1,false=0。
var x=true
var y=false

注意:

  • true:除0数字、“something”、Object(任何对象)为true。
  • false:0 、“”、undefined 、null为false。

数组
数组的定义及赋值

var arr=new Array();
arr[0]="xiao";
arr[1]="ning";
arr[2]="bo";
arr[2]="ke";

或者

var cars=new Array("xiaoning","boke");
var cars=["xiaoning","boke"];

数组下标是基于零的,所以第一个项目是 [0],第二个是 [1],以此类推。

对象
对象由花括号分隔。在括号内部,对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔.
如:

var person={
name : "Bill",
age  : 19,
id :1111
};

Null
变量未引用 ,值为空,内存中不存在 。可以通过将变量的值设置为 null 来清空变量。
Undefined
变量未初始化
定义了变量,没有给变量赋值,变量在内存中是存在的。Undefined 这个值表示变量不含有值。

null和undefined有最大的相似性。看null == undefined的结果(true)。但是null ===undefined的结果(false)。不过相似归相似,还是有区别的,就是和数字运算时,10 + null结果为:10;10 + undefined结果为:NaN。
任何数据类型和undefined运算都是NaN;
任何值和null运算,null可看做0运算。

附录:判读变量类型typeof()
变量的命名规则
1.变量命名必须以字母或是下标符号"_"或者"$"为开头。
2.变量名长度不能超过255个字符。
3.变量名中不允许使用空格,首个字不能为数字。
4.不用使用脚本语言中保留的关键字及保留符号作为变量名。
5.变量名区分大小写。(javascript是区分大小写的语言)
6.汉语可以作为变量名。但是不建议使用。

JavaScript中的变量变量

变量是存储信息的容器。
定义变量:关键字:var,示例:var sum;
变量赋值:var sum;sum=3;或者var sum = 3;
变量的命名规则:

  • 变量必须以字母开头。
  • 变量也能以 $ 和 _ 符号开头(不过我们不推荐这么做)。
  • 变量名称对大小写敏感(y 和 Y 是不同的变量)。
  • 不能以数字或者纯数字开头来定义变量名。
  • 不推荐使用中文来定义变量名。
  • 不推荐使用关键字和保留字来定义变量名。

注意: 一条语句,可以有多个变量。例如:var name="sam", age=56, job="CEO";

JavaScrip中的注释

  • 单行注释 //
  • 多行注释 /* */

  • alert()在页面弹出一个对话框,经常用于简单的js调试。
    20180221112857.png
  • confirm()在页面弹出一个对话框,与alert()相比,多了一个确定按钮,返回值为truefalse, 常配合if判断使用。
    20180221113018.png
  • console.log()将信息输入到控制台,用于js调试。
    20180221113233.png
  • prompt()弹出对话框,可以定义一个变量,用于接收用户输入的信息。
    20180221113347.png
  • document.write()在页面输出消息,可以输入html标签,如:
    document.write("<h1>小宁博客</h1>");输出
    20180221113554.png

JavaScript概述

JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。js是一款运行在客户端的网页编程语言。
组成部分:js标准 (ecmascript);通过js操作网页元素(dom);通过api操作浏览器(bom)。
特点:简单易用;解释执行;基于对象。
常见应用:表单验证;轮播特效;开发游戏。

JavaScript的引入方式

内嵌式
直接写在网页里面,在哪里都可以,JavaScript的代码需要写在<script type="text/javascript"></script>中间,建议在html标签后面。
例如:

<script type="text/javascript">
    alert("小宁博客");
</script>

外链式

  • 先创建一个外部.jS文件
  • 通过<script type="text/javascript" src="one.js"></script>
    将外部js调用。
    注意:
  • 写javascript代码的时候,分号不能省略,而且javascript区分大小写。
  • 将多个javascript文件合成为一个javascript文件,建议javascript在哪里调用就在那里引入javascript文件。

为了提高网页的整体效果,在网页中往往需要,通过JavaScript引入百度地图,小编在这里整理了一下,希望可以帮到大家。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>引入百度地图</title>
    <!-- 引入百度地图 -->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
</head>
<body>
      <div id="contactinformation">
   <!--地图-->
            <div id="mapCanvas" class="map-canvas no-margin" style="height: 450px; width: 450px">
            <script type="text/javascript">
                var map = new BMap.Map("mapCanvas"); // 创建Map实例
                var point = new BMap.Point("116.3119450000", "39.9891970000"); // 创建点坐标
                map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别。
                map.enableScrollWheelZoom(); //启用滚轮放大缩小
                //添加缩放控件
                map.addControl(new BMap.NavigationControl());
                map.addControl(new BMap.ScaleControl());
                map.addControl(new BMap.OverviewMapControl());

                var marker = new BMap.Marker(point); // 创建标注
                map.addOverlay(marker); // 将标注添加到地图中
                var infoWindow = new BMap.InfoWindow("小宁博客<br/><span class=''>小宁博客</span>"); // 创建信息窗口对象
                marker.openInfoWindow(infoWindow);
            </script>
        </div>
        <!--地图-->

        </div>
</body>
</html>