JavaScript-day01

一、JavaScript基本介绍及发展趋势

JavaScript是一种在浏览器中解释运行的脚本语言,他的解释器被称为JavaScript引擎,是浏览器的一部分,是广泛用于客户端的解释性语言(边编译便运行)。

二、JS和H5的关系

H5狭义上,指HTML的第五个版本;广义上指web前端的所有技术,由于web前端是在H5出现后开始火爆起来,所以,
习惯上把web前端也叫H5。web前端开发也叫H5开发。
H5包括 HTML,CSS,JavaScript,等一切前端技术。

三、编写JS及运行JS

一个完整的 JavaScript 应该由下列三个不同的部分组成。

1.核心(ECMAScript)

是一种由Ecma国际(前身为欧洲计算机制造商协会),定立ECMA-262标准化的脚本程序设计语言。规定了JavaScript 脚本的核心语
法,如 数据类型、关键字、保留字、运算符、对象和语句等。

2.文档对象模型(DOM)

定义了 JavaScript 操作浏览器的接口,提供了访问某些功能(如浏览器窗口大小、版本信息、浏览历史记录等)的途径以及操作方法。

3.浏览器对象模型(BOM)

定义了 JavaScript 操作 HTML 文档的接口,提供了访问 HTML 文档(如body、form、div、textarea等)的途径以及操作方法

如何在页面中写入Javascript:

<script>......</script>这组标签,是用于在 html 页面中插入 js 的主要方法,可以写多个。

一般来说,JS 代码越来越庞大的时候,我们最好把他另存为一个 js 文件,通过 src 引入即可。
<script type="text/javascript" src="demo1.js"></script>

四、变量的概念

变量用来在计算机中存储和表示数据

①、变量定义(声明):(var 是variable的简写)
var age;//var 是关键字,age是变量名
②、赋值:
age = 20;//20是数据 “=”是赋值
③、定义的同时赋值(初始化):
var age=20;
④、可以一次定义多个变量:
var height = 170, age=18,weight=125;
⑤、使用变量:
alert(height);
注:
1、变量必须先赋值再使用。
2、区分大小写。比如:text 和 Text 不是同一个变量。
变量的取名规范:
1.第一字符必须是一个字母、下划线(_)或一个美元符号($)。
2.其他字符可以是字母、下划线、美元符号或数字。
3.不能把关键字、保留字、true、false 和 null 作为变量。

五、数据类型

①、String类型:
对于值又叫字符串类型,用双(单)引号括起来的一串字符,比如: "hello", 'world'
※ 必须成对出现,不能穿插使用,否则会出错。
var box = '老王"; //出错
②、Number类型:
就是在数学中使用到的数字, 比如: 12, -34, 12.3 等。分为整型 和 小数型(浮点型)
③、Boolean 类型:
布尔有两种值 truefalse,表示真或假。比如: 4>3
④、Undefined类型:
Undefined类型只有一个值
undefined,使用变量未被赋值。
⑤、Null 类型:
Null类型也只有一个值null
⑥、Object类型:
JavaScript中最为复杂的类型就是Object,它是一系列属性的无序集合。
typeof操作符
typeof操作符是用来检测变量的数据类型。或变量使用typeof操作符会返回如下字符串。
示例:
var box = '小张';
alert(typeof box); //string


六、算术运算符(重要,常用)

算术(数学)运算符,由算术运算符组成的式子叫算术表达式,结果是数值类型。

ECMAScript 定义了 5 个算术运算符,包含加、减、乘、除、求模(取余)。
1.加法
var box = 100 + 1; //101
2.减法
var box = 100 - 120; //-20
var box = 100 - 70;//30
3.乘法
var box = 100 * 70; //7000
4.除法
var box = 100 / 70;//1.42....
5.求模(求余)
var box = 10 % 3;//1,余数为 1

七、赋值运算符

示例:给定 x=10 和 y=5

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

八、字符串连接符,字符串拼接表达式

  • 运算符:
    ① 用于将文本值或字符串变量连接起来。
    ② 用于数值的累加运算。

九、JS变量的类型转换

强类型:定义变量时,会有明确的变量类型(如:c,c++,java,c#等等)。
弱类型:定义变量时,并不能(不会)确定变量的类型(javascript,php等等)。
①、var age; --> 变量age的类型是根据后面的值的类型决定。
age=250;
②、变量的类型在使用中可变
age=“年纪”; --> age的类型是string


十、JS的数据类型转换

1)隐式(自动)转换

①、字符串加数字,数字就会转成字符串。
‘hello’+ 23 ==> 'hello23'
var box = 100 + "100"; //100100,字符串连接符,有字符串就不是加法
var box = "您的年龄是:" + 10 + 20; //您的年龄是:1020,被转换成字符串
var box = 10 + 20 + "是您的年龄"; //30 是您的年龄,没有被转成字符串
②、数字减字符串,字符串转成数字。如果字符串不是纯数字就会转成NaN,字符串减数字也一样。两个字符串相减也先转成数
字。
‘12’ - 5 ==> 7
'hello' - 23 ==> NaN
NaN,即非数值(Not a Number)是一个特殊的值。

▲ 注:NaN 仍是数值Number类型。

③、乘,除,大于,小于跟减的转换也是一样。

2)显式(手动)转换

字符串转数值:string->number
Number( )、parseInt( )、parseFloat( )
数值转字符串: number->string
toString( )
显式(手动)转换:
alert(Number(25)); //25,数值型直接返回
alert(Number('456'));//456
alert(Number('Lee123'));//NaN
由于 Number()函数在转换字符串时比较复杂且不够合理,因此在处理整数的时候更常用的是 parseInt()。
alert(parseInt('456Lee')); //456,会返回整数部分
alert(parseInt('Lee456Lee'));//NaN,如果第一个不是数值,就返回 NaN
alert(parseInt('12Lee56Lee')); //12,从第一数值开始取,到最后一个连续数值结束
alert(parseInt('56.12')); //56,小数点不是数值,会被去掉
parseFloat( )是用于浮点数值转换的,和 parseInt()一样,从第一位解析到非浮点数值位置。
alert(parseFloat('123Lee'));//123,去掉不是别的部分
alert(parseFloat('123.4.5'));//123.4,只认一个小数点
alert(parseFloat('0123.400'));//123.4,去掉前后导
简答:Number 与 parseInt 和 parseFloat 的区别(考试题简答题):
①、 parseInt 和parseFloat 会按顺序一个个转字符串中的字符,直到碰到转不成数字的字符为止,如果第一个字符就转不成数字将
返回NaN。
②、parseInt 认为小数点不能转, parseFloat 会转换遇到的第一个小数点。
③、Number对整个字符串进行转换,根据有没有包含一个小数点来确定转换为整数还是浮点,有任意字符不能转成数字时将返回
NaN。
//数值转字符串
var age = 12;
var t = age.toString();


十一、关系运算符

运算符 名称 示例 功能
< 小于 x<y x小于y时,返回真,否则返回假
<= 小于等于 x<=y x小于等于y时,返回真,否则返回假
> 大于 x>y x大于y时,返回真,否则返回假
>= 大于等于 x>=y x大于等于y时,返回真,否则返回假
== 等于 x==y x等于y时,返回真,否则返回假
!= 不等 x!=y x不等于y时,返回真,否则返回假
=== 全等(恒等) x===y 数据类型和值都要相等
!== 不全等 x!==y 同上,取反
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 219,110评论 6 508
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,443评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 165,474评论 0 356
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,881评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,902评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,698评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,418评论 3 419
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,332评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,796评论 1 316
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,968评论 3 337
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,110评论 1 351
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,792评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,455评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,003评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,130评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,348评论 3 373
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,047评论 2 355

推荐阅读更多精彩内容

  • 第2章 基本语法 2.1 概述 基本句法和变量 语句 JavaScript程序的执行单位为行(line),也就是一...
    悟名先生阅读 4,149评论 0 13
  • 第三章 基本概念 3.1 语法 ECMAScript标识符一般采用驼峰大小写格式,也就是第一个字母小写,剩下的每个...
    小雄子阅读 545评论 0 1
  • 每天一句:每个月要读一本书,离开学校了,你还要经常保持阅读的习惯,大学时候,考前的通宵达旦,说明你具备快速学习的能...
    王梓懿_1fbc阅读 181评论 0 0
  • --- 学习目标: - 掌握编程的基本思维 - 掌握编程的基本语法 typora-copy-images-to: ...
    YFBigHeart阅读 1,053评论 0 2
  • 第一章: JS简介 从当初简单的语言,变成了现在能够处理复杂计算和交互,拥有闭包、匿名函数, 甚至元编程等...
    LaBaby_阅读 1,673评论 0 6