码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript基础知识

时间:2017-08-27 16:13:15      阅读:285      评论:0      收藏:0      [点我收藏+]

标签:空字符串   运行   nbsp   默认   基础上   define   区间   大小   数据类型   

一、使用JS的三种方式

1、 在HTML标签中,直接内嵌JS(并不提倡使用):
<button onclick="alert(‘ ‘)">点我</button>
>>> 不符合W3C关于内容与行为分离的要求!!!

2、在HTML页面中,使用<script></script>包裹JS代码:
<script type="text/javascript">
// JS代码
</script>
>>> Script标签可以放到页面的任何位置。

3、引入外部的JS文件,使用script标签:
<script language="JavaScript" src="js/01.js"></script>

[注意事项]
1、<script></script>标签可以嵌入到页面任意位置。但是,位置的不同会导致JS代码执行顺序不同。
比如:<script></script>标签放到<body></body>前面,则JS代码会在页面加载之前执行。
2、引入外部JS代码:<script></script>标签必须成对出现。而且,标签中不允许再添加任何JS代码。

二、JS中的变量

1、JS中变量声明的写法
var num = 10; 使用var声明的变量,属于局部变量,只在当前作用域有效。
num = 10; 不用var声明的变量,默认为全局变量,在整个JS文件中都有效。
var x=8,y,z=10; 使用一行语句,同时声明多个变量。上式中,y属于已经声明,未赋值状态,结果为undefined;
[声明变量的注意事项]
①JS中所有的变量声明均使用var关键字,变量具体是什么数据类型,取决于给变量赋值的类型。
②JS中同一个变量,可以在多次不同赋值时,修改变量的数据类型;
var a = 10; 从初始声明是,a属于整数型。
a = "哈哈"; 重复赋值时,整数型a改为字符串类型。

③变量可以使用var声明,也可以不使用var声明。
[区别]使用var声明变量为局部变量,不使用var声明是全局变量。

④只为var声明,但是不赋值。结果为undefined;
例如:var a; a为undefined。
但是,如果不声明也不赋值的a,直接使用会报错;

⑤同一变量名,可以多次使用var声明,但是后面的var并没有什么用,第二次使用var声明时,只会被理解为普通的赋值操作。

2、变量名的命名要求
①变量名,只能有字母。数字、下划线组成;
②开头不能是数字;
③变量名区分大小写,大写字母与小写字母为不同变量;

3、变量名的命名规范
①要符合小驼峰法则(骆驼命名法):
首字母要小写,之后每个单词的首字母大写:
myNameIsBaiYunKe 
②或者使用匈牙利命名法:
所有字母小写,单词之间用_分割:
my_name_is_bai_yun_ke 
③mynameisbaiyunke 也能用,但不规范。

4、JS中的数据类型
Undefined:未定义,已经使用var声明的变量,但是没有赋值。例如:var a;
Null:表示空的引用;
Boolean:布尔类型。表示真假,只有:true/false;
Number:数值类型,可以是正数,也可以是小数;
String:字符串类型。用""或‘‘包裹的内容,称为字符串;
Objerct:对象类型,后续讲解....

5、常用的数值函数
①isNaN():判断一个变量或常量,是否为NaN(not a num 非数值);
使用isNaN()判断时,会尝试使用Number()函数进行转换,如果最终结果能够转化为数字,则不是NaN,结果为false。
②Number()函数:将其他类型数据,尝试转为数值型。
[字符串类型]
字符串为纯字符串,会转换为对应的数字; "111" -> 111
字符串为空字符串,会转为0; "" -> 0
字符串包含任何其他字符串时,都不能转; "1a" -> NaN
[Boolean类型]
true ->1 false ->0
[Null和Undefined]
Null ->0 Undefined ->NaN
③ParseInt():将字符串装换为整数型;
纯数字字符串,能转。
"12"->12;"12.9"->12;(小数转化时,直接抹去小数点后的数,不进行四舍五入)
空字符串,不能转。""->NaN
包含其他字符的字符串,会取第一个非数值字符串前的数字部分
"123a456"->123; "a123b456"->NaN
ParseInt()只能转字符串,其他类型全是NaN。
[Number函数和ParseInt函数区别]
1、Number函数可以转化各种数据类型,ParseInt函数只能转换字符串;
2、两者在转换字符串时,结果不完全相同。(解释见上方)

④ParseFloat:将字符串转换为数值型;
转换规则与ParseInt相同,如果有小数,则保留小数点,如果是整数,依然是正数
"12.5"->12.5 "12"->12

⑤typeof:检测变量数据类型
字符串->String 数值->Number 未定义->Undefined
true/false->Boolean 对象/Null ->object 函数->function

[JS中常用的输入输出语句]
1、document.write();将括号中的内容,打印输出到浏览器屏幕上
使用时需要注意:除变量/常量外所有内容,必须放到""中,变量和常量必须放在""外面。
如果同时有变量和字符串,必须用+连接;
eg:document。write("左手中的纸牌"+left+"<br />");
2、alert();使用弹窗输出:
弹窗警告,()中内容和上述要求相同

3、prompt();弹窗输入;
接收两部分参数:
①输入框上面的提示内容,可选;
②输入框里面的默认内容,可选;
当只写一部分时,表示输入框上面的提示内容;

可定义变量,接收输入内容,点击确定按钮,变量将被赋值为输入内容,点击取消按钮,变量将被赋值为null;
输入内容时,默认接收的数据类型都是字符串。

三、JS中的运算符

1、算术运算(单目运算符)

     + 加、- 减、* 乘、 / 除、 % 取余、++ 自增、-- 自减

    +:有两种作用,连接字符串/加法运算,当+两边全是数字时,运行加法运算;当+两边有任意一边为字符串时,起连接字符串的作用,连接之后的结果为字符串。例如:alert(1+2+"22"+5)->3225

           +外,其余符号运算时,会先尝试将左右变量用Number函数转化为数字,再运算;

    /:结果保留小数

    ++:自增运算符,将变量在原有基础上+1

    --:自减运算符,将变量在原有基础上-1

    [a++++a的异同]

             ①相同点:不论a++还是++a,运算完以后,a的值均会+1

             ②不同点:a++,先用a的值去运算 ,在把a+1

             ++a,先把a+1,在用a+1后的值去运算。

     

     

2、赋值运算

     = 赋值;  +=  -=  *=  /=  %=

     =:赋值,将右边的值赋予左边。

     +=a+=b;相当于a=a+b;但是前者的运算效率要比后面快,所以推荐使用+=的写法。

3、关系运算

     == 等于、=== 全等、  != 不等、!== 不全等、><>=<=

     

     关系运算符运算后的结果,只能是Boolean类型;

     判断一个数字是否处于一个区间,必须用&&连接;

      a<10 && a>0 √  10>a>0 ×

      

      ===:严格等于,要求不但类型相同,值也必须相同;类型不同,结果为false,类型相同再执行下一步判断。

      ==:等于,类型相同与===效果一样,类型不同是,会尝试用Number将两边转换为数字,然后再进行判断。 但是有个别特例,如:Null==false 错,Null==Undefined

4、条件运算符(多目运算)

     a>b?true:false

     d有两个重要符号:? 和:

     当?前面部分,运算结果为true时,执行:前面的代码

     当?前面部分,运算结果为false时,执行:后面的代码

     

     冒号两边可以为数值,则整个式子可以用于赋值。var a = 1<2?1:2;

     冒号两边可以为代码块,将直接执行代码。1<2?alert(1):alert(2);

     

5、位运算符、 逻辑运算符

     & | ~     && 与、|| 或、! 非

     

     &&:两边都成立,结果为true

     ||:两边有任意一边成立,结果为true

     !:

     

6、运算符的优先级

() 小括号最高

!  ++ -- 单目运算符

*  / %

+  -

>  < >= <=

&&  与或同时存在,&&||

||

=  += -= *= /=  最低的是各种赋值

 四、JS中的分支结构

if-else结构
1.结构写法:
if(判断条件){
  //条件为true时,执行if的{}
}else{
  //条件为false时,执行else的{}
}
2、注意事项:
①else{}语句块可以根据情况进行省略;
②if和else后面的大括号可以省略,但是省略{}后,if和else后面只能跟一条语句;(所以不建议省略{});
3.if的()中的判断条件,支持的情况:
①Boolean:true为真,false为假;
②String:空字符串为假,所有非空字符串为真;
③Number:0为假,一切非0数字为真;
④null/Undefined/NaN:全为假;
⑤Object:全为真。


多重if、阶梯if结构
1.结构写法:
if(条件1){
//条件1成立,执行操作
}else if(条件2){
//条件1不成立&&条件2成立,执行操作
}else{
//上述所有条件都不成立时,执行的操作
}
2.多重if结构中,各个判断条件是互斥的,执行选择其中一条路执行,遇到正确选项并执行 完后,直接跳出结构,不在判断后续分支。

嵌套if结构
1、结构写法:
if(条件1){
  //条件1成立
  if(条件2){
    //条件1成立&&条件2成立
  }else{
    //条件1成立&&条件2不成立
  }
}else{
  //条件1不成立
}
2、在嵌套if结构中,如果省略{},则else结构永远属于离他最近的一个if结构。

3、嵌套结构可以多层嵌套,但是一般不推荐超过3层。能用多重if结构的一般不推荐嵌套if。

switch-case
1、结构写法:如下图
2、注意事项:
①switch结构()中的表达式,可以使用各种JS支持的数据类型;
②switch结构在进行判断的时候,使用的是==判断;
③case后面的表达式可以是各种数据类型,但是值要求各不相同,负责也只是执行第一个case;
④break作用:
执行完case代码后,跳出当前switch结构;
缺少break后果:从第一个正确的case项开始,执行后面的所有case和default:原因
⑤switch结构在进行判断的时候,只会判断一次正确答案,当遇到正确的case之后,将不会再判断后续的项目。
⑥switch结构的执行效率比多重if快,在多路分支结构中,推荐使用优先switch。

技术分享

JavaScript基础知识

标签:空字符串   运行   nbsp   默认   基础上   define   区间   大小   数据类型   

原文地址:http://www.cnblogs.com/baiyunke/p/7440515.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!