黑马程序员技术交流社区

标题: 【黑马程序员杭州】PHP课程笔记day08-JavaScript基础 [打印本页]

作者: 小江哥    时间: 2017-12-13 17:19
标题: 【黑马程序员杭州】PHP课程笔记day08-JavaScript基础
本帖最后由 小江哥 于 2017-12-13 17:27 编辑

一、JavaScript简介

1.1什么是JavaScript
JavaScript是由网景公司开发的一款基于浏览器基于面向对象事件驱动式的网页脚本语言。
基于浏览器JavaScript它是被浏览器来进行解析的。HTMLCSSJavaScript它们都是被浏览器来进行解析。
基于面向对象:在JavaScript中一切皆是对象,对象是由属性与方法来组成
事件驱动式:用户的某些特定的行为,比如鼠标经过、鼠标离开、鼠标点击等等这些行为它会被JavaScript所捕获,JavaScript会给这些行为赋予一些功能代码。

1.2JavaScript的应用场景

1.3JavaScript与Java的关系
JavaScript它是网景公司开发的
Java它是太阳公司开发的。
这两者之间并没有什么关系。
北大与北大青鸟之间的关系
雷锋与雷锋塔之间的关系
1.4快速入门


二、JavaScript的书写方式
嵌入式、外链式、行内式


2.1嵌入式
JavaScript代码嵌入到HTML代码中 它是通过一对<script></script>标签来嵌入的!
注意:
   <script></script>标签可以放置在HTML文档的任何地方。

2.2外链式
JS代码它可以单独的保存为一个以.js为扩展名的文件  然后通过HTML中的<script></script>src属性将其引入到当前的HTML文件中!
注意:
   1、一个HTML文件可以同时的引入多个.js的文件
   2、一对script标签它要么只能书写js代码,要么引入.js文件 这两者不能同时的进行。

2.3行内式
HTML标签中 有一些事件属性   事件属性都是带有on前缀 比如鼠标经过、鼠标离开、鼠标单击等等
JS代码书写在HTML标签的事件属性中
格式:
<标签名  事件属性 = JS代码” >

三、注释
JS中的注释有两种方式:单行注释、多行注释

单行注释
格式:
        // 注释的内容
多行注释 块注释
格式:
/*
   注释的内容
*/


四、JS代码的语法规则



五、三个常用的输出语句5.1 document.write(要输出的内容)
作用:


5.2 window.alert(要输出的内容)
作用:

5.3 console.log(要输出的内容)
作用:

六、变量


6.1什么是变量?
变量是一种可以变化的量,变量主要是用于存储数据的。我们命令JavaScript去干活的时候,往往需要产生一些数据,需要临时性存放起来,方便取用。我们也可以理解为,变量就像一个购物袋,我们可以用来装苹果、榴莲(当然也可以用来装玫瑰),变量是存放在内存中,内存是临时存储数据的。
6.2声明|定义变量
格式:
      var 变量名  一次声明一个变量    variable
      var 变量名1,变量名2    一次声明多个变量

注意:
1. var是声明变量的关键字,不可以省略。
2. var关键字与变量名之间要有空格

6.3变量名的命名规则
     驼峰法  从第二个单词开始 首字母要大写  getUserName
     下划线连接法  从第二个单词开始使用下划线进行连接  get_user_name

注意:
   希望同学们在声明变量或者定义变量的时候  变量名要做到见名知意

6.4给变量名赋值
将等于号右边的值赋值给等于号左边的变量!
第一种方式:先声明变量然后再来赋值。
第二种方式声明变量并赋值

6.5修改变量的值
声明一个变量已经给其赋了值  然后我再来修改这个变量的值!
格式:
   变量名 = “新值”  //给变量名重新赋一个值

七、变量的数据类型


7.1为什么变量需要有数据类型?
变量主要是用于存储数据的,现实生活中的数据有很多种
比如有数值、有字符等等  那么为了将这些数据进行分门别类,所以就引出了变量的数据类型。

变量的数据类型分为:两大类、七小类
两大类:基本数据类型、复合数据类型!
基本数据类型:只能存储一个值
复合数据类型:至少存储一个值

JS中的变量声明的时候不需要去指定变量的数据类型,但是它也是有数据类型,它的数据类型是由其值来决定!



7.2基本数据类型
String(字符串型)Number(数值型)Boolean(布尔型)undefined(未定义型)null(空型)



7.2.1 String(字符串型)
什么是字符串型数据类型?
   加了引号的数据!我们就称之为字符串数据类型! 引号:单引号和双引号都可以!

问:如果在双引号定义的变量中是否还能在出现双引号

要解决在双引号定义的变量中再出现双引号  使用转义字符(\) 将反斜线后面的符号进行转换其含义。

问:如果在单引号中定义的变量里面是否还能出现单引号?
不能出现单引号,但是可以使用转义字符对单引号进行转义。

一般在工作中:

7.2.2 Number(数值型数据)
指:整数与小数
整数:正整数、负整数、0
小数:正小数、负小数

7.1.3 Boolean(布尔型)
布尔型它主要是用来表示两个对立面!
比如真与假!
布尔型数据只有两个值:
  true()false()  
如何得到布尔型:
定义一个变量的值为true或者是false 就可以得到布尔型。

7.2.4undefined(未定义型)
得到未定义的数据类型:
1、变量定义了但是没有给其赋值
2、使用一个没有定义的变量
3、定义一个变量给其值赋值为undenfind

7.2.5 null

如何得到null
比如说问:河中是否有鸭子。
回答:有或者是没有
定义变量的值为null

7.3复合数据类型
Object(对象)Array(数组)



八、运算符

8.1什么是运算符
可以进行运算的符号 比如:+-*/

运算符可以为分三种:

一目、二目、三目  一元、二元、三元
一目:指的是运算符的操作数只有一个  比如:i++
二目:指的是运算符的操作数有两个    比如:a+b
三目:指的是运算符的操作数有三个   

运算符分为:


8.2算术运算符
符号
功能
+
加法
[size=10.5000pt]-
减法
[size=10.5000pt]*
乘法
[size=10.5000pt]/
除法
[size=10.5000pt]%
求余数(取模)
++
自加1运算符
--
自减1运算符



++—这两个运算符的规则是一样的。
++运算符它称之为自加1运算符
++运算符它分为前加加和后加加
前加加:++符号在变量的前面  比如:++a;
前加加的运算规则:先自加1 然后再赋值
后加加:++符号在变量的后面  比如:a++;
后加加的运算规则:先赋值然后再自加1
--运算符它称之为自减1运算符
--运算符它分为前减减和后减减
前减减:--符号在变量的前面  比如:--a;
前减减的运算规则:先自减1 然后再赋值
后减减:--符号在变量的后面  比如:a--;
后减减的运算规则:先赋值然后再自减1

注意:
   不管是前加加还是后加加自身都会自加1  不管是前减减还是后减减自身都会自减1

8.3赋值运算符

8.4字符串连接运算符

符号
功能
[size=10.5000pt]+
字符串连接
+=
字符串连接




案例:使用字符串连接运算符来实现输出“个人简历”

8.5比较运算符

符号
功能
[size=10.5000pt]>
大于
[size=10.5000pt]<
小于
>=
大于等于
<=
小于等于
==
等于  判断==两边的值是否相等
!=
不等于
===
全等于 判断数据类型与值是否都相等
!==
不全等
注意:
   比较运算符它最终得到的结果是布尔值:truefalse

8.6三目运算符
格式:
  条件表达式1  ?条件表达式2  :  条件表达式3
说明:
  当条件表达式1成立时,得到的是布尔true 就表示成立  就会执行条件表达式2  反之如果不成立就会执行条件表达式3

使用三目运算符来求出两个数中的最大值。

8.7逻辑运算符

符号
说明
功能
&&
逻辑与
&&符号两边的表达式的结果同时为真才为真
||
逻辑或
||符号两边的表达式的结果只要有一边为真就为真
[size=10.5000pt]!
逻辑非
取反操作  将true变为false  false变为true


九、运算符的优先级

有括号就先算括号里面的内容,然后再乘除再加减
那么如何去提升运算符的优先级呢?加()

十、变量数据类型的转换

什么是数据类型的转换:
   将一种数据类型转换为其它的数据类型!
   在JS中变量数据类型的转换分成两种:自动转换、强制转换!
自动转换是系统自己完成的!



10.1强制转换

10.1.1 Number(变量名)
将其它的数据类型强制的转换为数值型
在数值型数据中有一个特殊的数据叫NaN(Not a Number)这不是一个数 ,为什么会出现NaN呢?当将其它的变量的数据类型转换为Number的时候  如果不能直接的转换过来 就会变成NaN
死记:
数据格式
转换后的结果
“数字”  
数字
“数字字符”
NaN
“字符数字”
NaN
“字符”
NaN
“” 和“ ”空字符串和有空格的字符串
[size=10.5000pt]0
true
[size=10.5000pt]1
false
[size=10.5000pt]0
null
[size=10.5000pt]0
undefined
NaN
规则:
字符串:有具体内容的 指的纯数字就会被转换为对应的字符。如果字符串除了数字以外的字符的话就会转换为NaN
“”和“ ”转换为0
布尔类型:true==è1    false===è0
null0
undefinedNaN

10.1.2 Boolean(变量名)

将其它的数据类型强制的转换为布尔型   (结果:truefalse)


数据格式
转换后的结果
nullundefined
false
0””和NaN
false
0
true
[size=10.5000pt]1
true
[size=10.5000pt]“[size=10.5000pt] [size=10.5000pt]” 有空格的字符串
true
“有具体内容的”
true
规则:
       字符串有具体内容的字符串就会是true 否则就为false  空字符串为false
       nullfalse
       undefinedfalse
       数值型:NaN0 会转换为false  其它的就都true


10.1.3 String(变量名)

将其它的数据类型强制的转换为字符串型
注意:
  自动转换与强制转换的结果是一样的。


阅读推荐

【黑马程序员杭州】PHP课程笔记day01-HTML简介及标签
【黑马程序员杭州】PHP课程笔记day02-HTML组标签

【黑马程序员杭州】PHP课程笔记day04表单控件
【黑马程序员杭州】PHP课程笔记day05-CSS基础
【黑马程序员杭州】PHP课程笔记day06-CSS样式
【黑马程序员杭州】PHP课程笔记day07-CSS样式











作者: 猫先森    时间: 2017-12-13 17:28
6666666666666666666666
作者: 咸鱼666    时间: 2017-12-13 17:33
66666666666
作者: 许言    时间: 2017-12-13 17:36
顶顶顶顶顶
作者: 阿布乙    时间: 2017-12-13 17:36
很基础,很详细
作者: 宋子    时间: 2017-12-13 17:38
学习了,
作者: nhm    时间: 2017-12-13 17:38
666666666666
作者: 刘华莎    时间: 2017-12-13 19:19
棒棒哒
作者: huangjinchao.ar    时间: 2017-12-15 17:07
学好js走遍天下都不怕
作者: 小核桃仁    时间: 2017-12-15 22:36
棒棒哒




欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2