WEB课堂随笔—Javascript基础

经过一个月的时间已经结束了第一阶段的学习,接下来就是进入到最费脑子的第二阶段—JS的学习。
把网页分为3部分的话,html代表结构,CSS代表样式那么JS就代表网页的行为。可以理解为女娲造人时捏的一个个泥人就是我们的网页,但是没有女娲吹的那口气泥人是不会动的,当女娲向泥人吹了那口仙气一个个小泥人就可以活蹦乱跳了。我们的JS就相当于那一口仙气让我们的网页灵活起来。

1JavaScript的历史

javascript在设计之初只是为了做表单的验证,但是如今已经成为了一种功能全面的变成语言。JAVA和JavaScript有什么关系呢?答:毫无关系。JavaScript最初是NetScape公司在1995年着手研发的在当时叫做liveScript的脚本语言。公司为了营销目的搭上了当时媒体热炒的Java的顺风车临时更名为JavaScript。但是Javascript1.0获得了巨大的成功。但是后来1996年微软公司进入浏览器领域推出了JScript开始和NetScript争当博主地位。他们争夺最终苦的是开发者,因为没有一个标准的存在。业内的吐槽也日益严重,终于多方联合共同制定了一个标准,这个标准就是ECMAScript(欧洲计算机制造商协会

2JavaScript的组成

1.ECMAScript:ECMAScript是一个标准,它规定了语法,类型,语句。关键字,保留子。操作符,对象。可以说它就是一个法律。
2.BOM(浏览器对象模型):可以访问浏览器窗口的对象模型,对浏览器窗口进行操作。
3.DOM(文档对象类型):DOM把整个页面都映射成一个多层的节点结构。可以说整个是整个HTML文档

3如何编写和运行JS

JS也是一种脚本语言,它也可以有两种方式在HTML页面引入,一种是外联一种内联。
1.外联的写法:
<script src=""></>
2.内部写法:
<script>
//在标签内写脚本
</script>
3.错误的写法:
<script src="">
//在标签内写脚本
</>
4.向页面打印内容:
document.write("Hellow word")
5.也可以直接解析标签
document.write("<strong>hellow word</strong>")
同样用到特殊字符时也需要转义字符

4变量

1.变量的数据类型
数字类型(number):1234567890
字符类型(string):被单引号双引号包裹的部分都是字符型
未定义类型(undefined):当变量被声明却没有被赋值时
布尔类型(boolean):true,false(真,假)
对象类型(object):{}
数组类型(array):[]
其中数组类型是争议最大的类型,有人说它是独立的类型有人说它应该划分到对象类型里
2.变量的命名规则。

第一前缀就能表达出变量的类型
image.png

第二开头必须为字母或者$或者_
第三关键字和保留字不能作为变量名

关键字:以下这些关键字用于执行特定操作。按照规则,关键字也是语言保留的,不能用作标识符


image.png

保留字:未来可能作为关键字存在


image.png

5运算符

JS的运算符分为:算数、赋值、关系、逻辑。
1:算数运算符:+加 -减 乘 /除 %取余
var a = 1;
var b = 2;
a+b=3
a-b=-1
a
b=2
a/b=0.5
a%b=1
这里跟数学的运算方法一样。但是:
var a="1",b="2";
a * b = 2
a / b = 0.5
a - b = -1
a + b = 12
+号有两层意思第一层当左右都为number类型时它就是加法运算,当有一边是字符型那么就变成了连接符。这里就用到了数据类型的转换:强制转换和隐形转换。等会就要说道。
2.赋值运算符:= += -= *= /= %=

image.png

3.关系运算符:< <= > >= == !== ===
image.png

4.逻辑运算符:&& || !
image.png

用数学里面学的说就是
与(and):同假为假。意思是只有两个都为假时才为假。
或(or):同真为真。意思是只有都为真时才为真。
非(!)取反面,真就是假,假就是真。
运算顺序跟数学一样。

6自增自减运算

运算符:++ --
a++表示在a原有的基础加1
a--表示在a原有的基础上减1
感觉很好理解不就是自增自减吗,其实不然。那么++a和--a又是多少?
var a =1;
console.log(a)
这个打印结果为1,毫无疑问。

var b =1;
b++;
console.log(b++);
这个打印结果为2。因为++意思就是自增1,也毫无疑问。

var c =1;
console.log(c++);
console.log(c);
看到这题估计就有好多人认为跟上面一样也是自增1,所以l两个答案都是2。其实正确的答案是上面的是1,下面的是2。这是为什么呢?因为我们浏览器在解析我们的代码是都是遵循从上到下从左到右的顺序解析。
在变量b那题,我们先给变量b赋值1,然后我们进行了累加计算。这时b变成了2。最后我们把b打印出来,那么打印出来的结果就是2。
在变量c这题我们在从上往下,从左到又的顺序解析看看。首先也一样给变量c赋值1。然后我们开始打印打印顺序是从左到右,所以先把c打印出来(因为++是在c的后面还没来的急累加c就被打印了出来)。然后打印过后开始了累加最后再次打印c的值,这时c就变成了2。

var d =1;
console.log(++d);
那么这题也按照解析顺序来看就好理解了。先赋值,然后打印的时候先进行了自增(因为++在前面)。接着打印出了d的值是2。

拓展:
var k =0;
console.log(k++ + ++k +k+k++)

首先k的初始值为0,所以k++时是0,然后k开始自增k变成了1,然后加上++k,因为++在前面所以先在增加1,++k就变成了2,然后在加k(++k后面没运算符,所以k还是2),然后在加k(k还是2),然后后面还有++浏览器就还没来的急解析就打印了出来结果就是6(0+2+2+2)。虽然没打印出来后面的++但是我们也要知道最后k变为了3,后面如果还有k就是以3进行计算了。
自增与自减方法一样。

7数据类型转换

数据类型转换分为强制类型转换和隐性转换。
1:隐性转换,在上面说过,当字符与数字相加时+变为了连接符,这里浏览器在进行解析的时候就默认把number类型转换成了字符类型。这就是隐形转换。
2:强制转换,

  • 转换为字符型:toString()
    强制把类型转换为字符型。
    var str = 123;
    str.toString();

  • 转换成数值:
    parseInt();转换成整数,可以接受两个值
    parseFloat();转换成浮点数

    两者的不同:
    parseInt();该方法从左向右,检测数字或字符串,当第一次发现一个不为数字的字符时,把之前的所有进行返回,如果字符串中第一个就不是数字,那么返回NaN
    例如:parseInt("123abc");a做为第一个不是数字的字符;返回a之前的所有值,则该方法返回123
    parseInt("abc123");a做为第一个不是数字的字符,且处在字符串的第一位,则判定该字符串无法转换为数字返回NaN
    parseFloat();该方法检索数字或字符串后面第一个.后的不为数字的字符,并对之前所有的结果进行返回,如果第一个字符不为数字,那么返回NaN
    例如:parseFloat(“123.456");返回123.456
    parseFloat(“123.4a56");返回123.4
    parseFloat(“123.00");返回123
    parseFloat(“123.0a56");返回123
    关于浮点数:Math.round()四舍五入取整浮点数。
    num.toFixed(n)保留几位小数。

  • Number()为强制数据类型转换:
    Number("hello world"); //NaN
    Number("123456"); //123456

8NAN的概念

NaN:是一种特殊的number类型,代表意外转换成的数字,NAN和任何东西都不等,甚至都不等于自己。
isNaN()函数,该函数判断括号内的值是否是NaN,是就返回true,不是就返回false。当运算结果出现了NAN时一定要注意是不是前面的变量获取出错了。

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

推荐阅读更多精彩内容