JavaScript - 1.语法变量 + 数据类型 + 运算表达式 + 条件循环语句

1 JavaScript 语法

1.1 语句

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div>
    <ul>
        <li></li>
        <li></li>
    </ul>
</div>

<script>
//---------------script标签最好放到HTML文档的最后,</body>标签之前,能使浏览器更快的加载页面.
</script>
</body>
</html>

1.2 注释

单行注释 // ..................
多行注释 /* .................
                 ..............*/
还可以使用HTML中的注释 <!------........------>

1.3 变量

使用 var 申明变量 : 
var name , age ;
name = "yuxiaohu";
age = 28;
也可以 : 
var name="yuxiaohu";

1.4 原始数据类型

★ String 
字符串类型 var name = "yuxiaohu";

★ Number 
数值类型  var age = 29;

★ Boolean 
布尔值 var sleeping = true / false;

★ Null
表示一个空对象指针

★ Undefinited
未定义数据类型

★ NaN
不是一个数字

<可以使用 typeof(name) 判断数据类型.>

1.5 引用数剧类型

★ 数组 Array [ ]
var arr=[1,2,3];
arr.length  // 获取数组的长度

★ 对象 Objec { }
var people = {name:"yuxiaohu",year:1990,sex:"man"};
people.sex  // 读取sex属性的值为 : "man"

 内建对象 : js内部预定义的对象称为内建对象,如下面几种常用的内建对象.

Array 对象
var arr=[1,2,3];
arr.length

Math 对象 
var num = 7.561 ; 
var num = Match.round(num)  // 结果 : num = 8

Date 时间对象 
var tim = new Date();
var today = tim.getDay();
var hours = tim.getHours();
var month = tim.getMonth();

 宿主对象 : 浏览器提供的预定义对象被称为宿主对象 ( host object )

 函数  Function yxh ( )
function yxh ( b , c ) {
        var a = b * c ;
        return(a);
 }
yxh(10,20) ;  // 200

重点 :
1、基本类型 ( Undefined、Null、Boolean、Number、String )
这些类型在内存中分别占有固定大小的空间,他们的值保存在栈内存,我们通过按值来访问的。
2、引用数据类型 ( Array [ ] 、Object { }、Function ( ) )
引用类型,值大小不固定,栈内存中存放地址指向堆内存中的对象。是按引用访问的。如下图所示:栈内存中存放的只是该对象的访问地址,在堆内存中为这个值分配空间。由于这种值的大小不固定,因此不能把它们保存到栈内存中。但内存地址大小是固定的,因此可以将内存地址保存在栈内存中。 这样,当查询引用类型的变量时, 先从栈中读取内存地址, 然后再通过地址找到堆中的值。对于这种,我们把它叫做按引用访问。


详细解释

1.6 运算符和表达式

 算术运算:( +,-,*,/,%,++,-- )
 关系运算 : (>,<,>=,<=,==,!=) 将两个值做比较-->返回值:true / false 
关系运算中:默认将所有类型转为数字再比较

特殊情况
A.NaN:NaN不等于,不大于,不小于任何值(包括自己)
             NaN和任何数据做!=比较时,始终返回true
             isNaN(n):本意是判断一个值是否是NaN
 逻辑运算:( &&   ||   ! ) 将多个关系运算综合起来,得出最终结论,返回值:true、false
 赋值运算:( +=  -=   *=   /=    %= )
 三目运算 :  
    var a = 10;
    var b = 11;
    var c = (a > b) ? a : b; 结果 c = 11
判断 a 与 b 的大小 , 如果 a 大于 b 则 c = a , 否则 c  =  b;

1.7 数据类型的转换

 自动转换 :
不需要程序员干预,js自动完成的类型转换仅讨论算数计算中的自动转换:

A. 算数计算中,一切数据都默认转为数字,再计算 
Boolean类型:true-->1  false-->0
特殊情况:
如果数据无法被转为数字类型会被转为NaN                    
NaN不等于,不大于,不小于任何值
NaN参与任何算数运算结果永远为NaN

B.在+运算中,碰到字符串,+就变为字符串拼接
另一个不是字符串的数据,被自动转为字符串
 强制转换 :

任意-->字符串:2个API
x.toString(); x不是undefined或null时,才可用
String(x) 

任意-->数字:3个API
a.非字符串类型转数字 Number(x)  // 相当于隐式转换
b. 将字符串转为数字:2个API
parseInt(str) :  将字符串里面的数字转化成整数.
(从第一个字符开始依次读取每个数字,只要碰上第一个非数字字符就停止,
自动跳过开头的空字符不认识小数点)
何时使用:将字符串转为整数时 

var width="20px";
console.log(Number(width)) //NaN
console.log(parseInt(width)) //20   
parseFloat(str):用法同parseInt
    
比较Number()和parseInt()
var b=true;
console.log(Number(b)) //1
console.log(parseInt(String(b))) //NaN

任意类型-->Boolean: Boolean(x)-->相当于隐式转换
只有5个值转为false:
 "" , NaN , undefined , null , 0
其余都转为true

1.8 条件语句

 条件判断
var age = 20;
if (age >= 18) { // 如果age >= 18为true,则执行if语句块
    alert('成年人');
} else { // 否则执行else语句块
    alert('未成年人');
}

 多行条件判断
var age = 3;
if (age >= 18) {
    alert('成年人');
} else if (age >= 6) {
    alert('少年');
} else {
    alert('小孩');
}

 switch结构
多个if...else连在一起使用的时候,可以转为使用更方便的switch结构。
var x = 1;
    switch (x) {
        case 1:
            console.log('x 等于1');
            break;
        case 2:
            console.log('x 等于2');
            break;
        default:
            console.log('x 等于其他值');
    }

1.9 循环语句

 while(){}
eg:
var a=0;
    while(a<=10){
        // 只要a<=10为true就一直循环
        console.log(a);
        a++;
    }

 for循环
eg:
for(var i=0;i<=10;i++){
        console.log(i)
    }

 for...in...
eg:
var o = {name: 'Jack',age: 20,city: 'Beijing'};
for (var key in o) {
    alert(key); // 'name', 'age', 'city'
}

重点 : 全局变量和局部变量

变量作用域:一个变量的可用范围
 全局作用域:window
全局变量——放在全局作用域(window)中的变量
可在程序的任何位置访问全局变量

 局部作用域:在函数调用时才创建的作用域
局部变量
1. 参数变量
2. 在函数定义中var的变量
***仅在函数调用时,动态创建
调用时,如果局部有,就不用全局的!
***调用后,随局部作用域一同销毁
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,636评论 5 468
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,890评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,680评论 0 330
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,766评论 1 271
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,665评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,045评论 1 276
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,515评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,182评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,334评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,274评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,319评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,002评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,599评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,675评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,917评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,309评论 2 345
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,885评论 2 341

推荐阅读更多精彩内容