美文网首页
WEB课堂随笔—Javascript基础

WEB课堂随笔—Javascript基础

作者: 4002e77da320 | 来源:发表于2018-01-08 20:51 被阅读21次

经过一个月的时间已经结束了第一阶段的学习,接下来就是进入到最费脑子的第二阶段—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时一定要注意是不是前面的变量获取出错了。

相关文章

  • WEB课堂随笔—Javascript基础

    经过一个月的时间已经结束了第一阶段的学习,接下来就是进入到最费脑子的第二阶段—JS的学习。把网页分为3部分的话,h...

  • Web前端-JavaScript基础教程上

    Web前端-JavaScript基础教程 将放入菜单栏中,便于阅读! JavaScript是web前端开发的编程语...

  • web前端入门基础

    web前端基础笔记 学习web前端开发基础技术需要掌握:HTML、CSS、JavaScript语言。下面我们就来了...

  • 2018-01-04

    Web学习笔记--从最基础的开始 一、web前端开发语言: HTML、 CSS 、JavaScript HTML:...

  • JAVA攻城狮培养计划之从网页搭建入门Java Web

    重要知识点 前端基础:HTML、CSS、JavaScript Java web 基础 :JSP、Servlet、J...

  • JavaScript基础,基础

    原javaScript学习笔记(一)js基础 一、简介 1、概述: JavaScript是目前web开发中不可缺少...

  • 2019-03-13

    web前端 JavaScript 基础 day6 JavaScript:页面脚本语言,主要用于用户的交互逻辑处理 ...

  • freeCodeCamp 旅途5 - JavaScript 和

    JavaScript 基础 JavaScript 是一门所有现代 Web 浏览器都支持的高级编程语言。JavaSc...

  • 初识 — Web Worker

    Web Worker — 基础知识 Web Worker是 运行在后台的javascript,也就是说worke...

  • web前端内容总结

    一、web前端学习内容总结1、HTML、CSS基础、JavaScript语法基础。学完基础后,可以仿照电商网站(例...

网友评论

      本文标题:WEB课堂随笔—Javascript基础

      本文链接:https://www.haomeiwen.com/subject/cuovnxtx.html