Day01 js基本语法

day01 JS基本语法

javascript基本介绍及发展趋势(脚本语言)

JavaScript是一种轻量级、解释型的Web开发语言。
Javascript,从最开始的被人误解,到现在的迅速发展,无论是jQuery,还是nodejs这种服务器端的语言,都无疑变向证明了JavaScript这门语言的强大。

JS和H5的关系

JS是网页脚本语言,代表控制网页的行为。
H5是目前最流行的HTML开发语言, 配合CSS层叠样式表,专门用于布局。
web项目组成 ( UI界面(ps/AI) + 前端渲染(html+css+js) + 后端(jsp/php...) )

编写Js及如何运行Js

javascript在html中的使用和代码嵌入类似于css文件
'<script type="text/javascript" src="外部的js文件"></script>'
目前 type 属性的值依旧还是 text/javascript。不过,这个属性并不是必需的,如果没有指定这个属性,则其默认值仍为 text/javascript。

需要注意的是,带有 src 属性的标签之间再包含额外的JavaScript代码。如果包含了嵌入的代码,则只会下载并执行外部脚本文件,嵌入的代码会被忽略。src属性还可以包含来自外部域的 JavaScript 文件

  • 编写js:推荐使用Hbuilder/sublime/webstorm等软件
  • 运行js:chrome/firefox/IE/opera/safari浏览器

对象属性和方法(window和document)

  • window:web页面最大的对象.浏览器打开的一个页面
  • document:html文档里面最大的对象。当浏览器打开(下载)一个网页,通常是HTML,这个HTML就叫document

变量的概念

变量:变化的 / 写入内存的 / 不可前置 / 松散类型 / 同时定义多个。
所谓变量,就是特定时间用于保存特定值的一个名字而已,并且初始化后可以再次改变的量。ECMAScript(欧洲计算机制造商协会) 的变量是松散类型的,所谓松散类型就是 可以用来保存任何类型的数据。定义变量时要使用 var 操作符(var是关键字),后面跟一个变量名(变量名是标识符)

  • 变量的命名规则: 数字、字母、下划线、$符号组成,其中数字不能做开头。
  • 重复的使用 var 声明一个变量,只不过是一个赋值操作,并不会报错。
  • 声明多个变量的时候,可以在一行或者多行操作,只要把每个变量用逗号分隔开即可,但最好分行写,可读性佳。
  • 变量命名规则(变量名应做到见名知意)(驼峰命名)从第二个单词开始首字母大写。

尽量不要使用关键字(具有特定用途)和保留字(将来被用作关键字)作为变量名

赋值、关系、数学运算符的讲解

  • 赋值运算符 = 将等式右边的结果赋值给左边。
  • javascript使用“ = ”运算符来给变量或者属性赋值(最低优先级)
  • 复合赋值操作 +=、-=、*=、/=、%= 带操作的复合赋值运算。(更快捷,更优)。

数学运算符 + - * / %

  • +:求和,连接字符作用
  • %:求余数(求模)

关系运算符<、>、<=、>=、==、===、!=(不相等) !==(不全等)

  • 理解=、==、===运算符之间的区别。
  • 理解相等和恒等运算符

数据类型、变量不同类型之间的自动、手动转换。

数据类型

  • ECMAScript 中有 5 种简单数据类型:Undefined、Null、Boolean、Number 和 String。
  • 还有一种复杂数据类型——Object。
  • 检测变量类型的关键字:typeof

显示转换、强制转换、手动转换

  • Number(): 可以将任意类型尝试转换为数字
  • String():可以将任意类型尝试转换为字符串
  • Boolean():可以将任意类型尝试转换为布尔值
  • parseInt() : 将括号的内容转换成对应的整数
  • parseFloat() : 将括号的内容转换成对应的浮点数(小数)

逻辑运算符(条件)

&& 与、|| 或、! 非

  • 逻辑与:只有在第一个操作数和第二个操作数都为真的情况下,结果为真。
  • 逻辑或:只有在两个操作数都为假的情况下,结果为假。也就是说如果第一个操作数的求值结果为真,就不会对第二个操作数求值了。
  • 逻辑非:逻辑非操作符首先会将它的操作数转换为一个布尔值,然后再对其求反。
  • 一元运算符:自增自减运算
  • 自增、自减 : 自身的值上面+1 -1;++a , a++ --a, a--
  • 一元操作符:只能操作一个值的操作符++ --
  • 前置型应该位于要操作的变量之前,先累加再赋值或者应用
  • 后置型则应该位于要操作的变量之后,先赋值应用再累加

进制的简单介绍

当一个数字以0开头时,就表示这是一个八进制数,以0x前缀来表示一个十六进制值。

NaN的概念及应用

  • 当数学计算无法得到数字结果,该变量的值为NaN

注意:因为NaN代表非数字,它不等于任何值,也不能做运算,即使alert(NaN == NaN); 结果也是false
isNaN(num)方法,该方法判断num变量的值是否是NaN(不是一个数字)

应用

1.计算两个文本框的和
2.var k=0; console.log(k+++++k+k+k++);
3.为抵抗洪水,战士连续作战89小时,编程计算共多少天零多少小时?
4.小明要到美国旅游,可是那里的温度是以华氏度为单位记录的。它需要一个程序将华氏温度80度)转换为摄氏度,并以华氏度和摄氏度为单位分别显示该温度。
提示:摄氏度与华氏度的转换公式为:摄氏度 = 5/9.0*(华氏度-32)保留3位小数

综合应用

1.计算两个文本框的加减乘除
要求:1) 使用parseInt/parseFloat/Number方法类型转换
2) 计算结果使用Math.round方法四舍五入为整数

    关系运算符 <、>、<=、>=、==(等于)、===(全等或者恒等)、!=(不相等)  !==(不全等)
    alert(5=='5');//true 等于比较的是值。将字符串转换数字    ==具有隐式转换(我们看不到)。
    alert(true==1);//true;   true转数字1
    alert(true==2);//false;  1!=2
    
    alert('     '==0);//true
    alert(''=='   ');//false;  字符串的比较

显示转换的方法:Number();   String();  Boolean();
    alert(Number(true));//1
    alert(Number(false));//0
    alert(Number(''));//0
    alert(Number('  '));//0
    alert(Number(123));//123
    alert(Number('abc'));//NaN
    alert(Number('123'));//123
    alert(Number('123abc'));//NaN
    
    alert(true=='a');

非零即真,非空即真。
    console.log(Boolean(0));//false
    console.log(Boolean(1));//true
    console.log(Boolean('hello'));//true
    console.log(Boolean(''));//false;
    console.log(Boolean('        '));//true;

//typeof():检测类型方法,简写: typeof 变量

数据类型:
    基本的数据类型:number/string/boolean/null(空对象/空指针)/undefined(未定义,未赋值或者初始化)
    复合(引用)的数据类型:object(对象)
    
    两个特殊的数据类型:null/undefined
    var num;
    alert(typeof num);//类型:undefined   值:undefined
    var num=null;
    alert(num);//null
    alert(typeof num);//object
null和undefined除了和自己比较是true之外,其他的字符和他们比较都是false;
    alert(null==null);
    alert(undefined==undefined);
    alert(null==undefined);
    alert(true==null);  null不转换
    alert(''==null);
    alert(0==null);
    alert(false==null);
    alert(1==null);
特殊情况
    alert(null>0);//false  null转数字0
    alert(null<0);//false  null转数字0
    alert(null<=0);//true  null转数字0
    alert(null>=0);//true  null转数字0
    alert(null==0);//false  null不转换
//&& 与、|| 或、! 非
    //逻辑与:只有在第一个操作数和第二个操作数都为真的情况下,结果为真。and
    alert(5>3 && 6>5);//true
    alert(5<3 && 6>5);//false
    alert(5<3 && fadsfdsafdsaf);//false  如果第一个参数数为假,后面的操作不会执行。
    alert(5>3 && fadsfdsafdsaf);//报错

    alert(1&&20);//20
    alert(0&&5);//0  如果第一个参数数为假,后面的操作不会执行。输出第一个操作数的值。
    alert(4&&0);//0

    document.write('hello'&&'');//''空
    document.write('分界');
    document.write('hello'&&'        ');//空字符
    document.write('分界');

    alert(false&&'');//false;输出第一个为假的。
    alert(0&&'');//0
    alert(''&&null);//''
    alert(undefined&&null);//undefined
    alert(null&&undefined);//null
    alert(NaN && 0);//NaN
    alert(NaN==NaN);//false;
    alert('abc'==NaN);//false

总结:假的状态--非空即真,非0即真 , undefined,null,NaN

    逻辑或:只有在两个操作数都为假的情况下,结果为假。也就是说如果第一个操作数的求值结果为真,就不会对第二个操作数求值了。or
    alert(5<3 || 3>2);//true
    alert(5<3 || 3<2);//false
    alert(3>2||fdlaskfjkaddsafdasf)//true,第一个为真,后面忽略
    
    
    alert(1||dasfkdasjfk);//1
    alert(dasfkdasjfk||1);//报错 dasfkdasjfk is not defined

    alert(5||6);//5
    alert(''||6);//6

    逻辑非:逻辑非操作符首先会将它的操作数转换为一个布尔值,然后再对其求反。
    逻辑非具有隐式转换。
    alert(!!!!!!!!5);
    alert(!null);//true

    alert(!!5);
NaN:not a number
    isNaN(); 检测括号里面的数字【不是一个数字】。 返回值是布尔值。
    隐式转换  数字
    alert(isNaN(2));//false
    alert(isNaN('2'));//false 
    alert(isNaN('abc'));//true
    alert(isNaN(''));//false 数字
    alert(isNaN(null));//false  0
    alert(isNaN(undefined));//true  NaN
    alert(isNaN(0));//false 
    alert(isNaN(NaN));//true 
    alert(isNaN(true));//false  1
    alert(isNaN(false));//false  0
    alert(isNaN('123abc'));//true  
js定义的数学方法
            
    Math.round();//将括号里面的数字四舍五入成整数。
    Math.ceil();//将括号里面的数字向上取整。
    Math.floor();//将括号里面的值向下取整。
    Math.abs();//取绝对值
    Math.sqrt();//开根号
    Math.random();//随机产生0-1之间的数字,不包括1
    Math.pow();//将幂,里面的第一个数字,底数,第二个数字,指数
    Math.max();//取括号里面的最大的数字,多个数字逗号分隔。
    Math.min();//取括号里面的最小的数字
    Math.PI;//3.141592653589793
    alert(isNaN('2'));//false 
    alert(isNaN('abc'));//true
    alert(isNaN(''));//false 数字
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,470评论 6 501
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,393评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,577评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,176评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,189评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,155评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,041评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,903评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,319评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,539评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,703评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,417评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,013评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,664评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,818评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,711评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,601评论 2 353

推荐阅读更多精彩内容

  • FreeCodeCamp - Basic JavaScript 写在前面: 我曾经在进谷前刷过这一套题,不过当时只...
    付林恒阅读 16,440评论 5 28
  • 什么是 JavaScript 语言? JavaScript 是一种轻量级的脚本语言。所谓“脚本语言”(script...
    oWSQo阅读 1,790评论 0 1
  • 标签: 我的笔记 ---学习资料:http://javascript.ruanyifeng.com/ 1. 导论 ...
    暗夜的怒吼阅读 810评论 0 1
  • Comment your JavaScript Code JavaScript中的注释方式有以下两种: 使用 //...
    归云丶阅读 1,101评论 0 0
  • 有一名求助者,患严重抑郁症,有六年的抑郁史,其间吃过药,看过心理咨询师,作过多方治疗。效果不佳。跟我调整了五个多月...
    北京美龄心理咨询阅读 266评论 0 0