A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

本帖最后由 小江哥 于 2017-12-13 17:27 编辑

一、JavaScript简介

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

1.2JavaScript的应用场景
  • 表单验证
  • 一些网页特效
  • 开发一些网页的小游戏   比如:贪吃蛇
  • 与服务器进行交互  Ajax

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代码的语法规则
  • JavaScript区分大小写
  • JavaScript脚本程序须嵌入在HTML文件中
  • JavaScript脚本程序中不能包含HTML标记代码
  • 每行写一条脚本语句
  • 每一条语句末尾可以加分号一定是英文下的分号(;),最好加分号
  • JavaScript脚本程序可以独立保存为一个外部文件 这个文件是不能自己运行的它必须要依赖于HTML文件



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

  • 它主要是用来向body标签中输出write()小括号里面的内容
  • document它表示是当前的HTML文档对象
  • write在英文中是“写”的意思
  • 对象是由属性与方法组成的   对象.属性与对象.方法  从视觉上面来区分属性与方法 属性不带小括号  方法带有小括号
  • write它是一个输出的方法

5.2 window.alert(要输出的内容)
作用:
  • 它主要是用来向当前的浏览器窗口中弹出一个警告提示框
  • window它表示的是当前的窗口对象  window对象是js中最顶级的对象  可以省略不写  
  • alert在英文是“警告”的意思   

5.3 console.log(要输出的内容)
作用:
  • 向浏览器的调试工具中的console” 选项卡里面输出内容
  • console的英文意思是“控制台”
  • log是日志的意思

六、变量


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

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

6.3变量名的命名规则
  • 变量名可以是由大小写英文字母、下划线(_)、美元符号($)、数字来组合
  • 变量名不能以数字开头  变量名开头只能大小写英文字母或者是下划线或者是美元符号来开头
  • 不能使用JavaScript 关键字或者保留字作为变量名。
  • 如果一个变量名是由多个单词组成的那么建议使用驼峰法或者下划线连接法
     驼峰法  从第二个单词开始 首字母要大写  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(变量名)

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












9 个回复

倒序浏览
6666666666666666666666
回复 使用道具 举报
咸鱼666 来自手机 中级黑马 2017-12-13 17:33:13
藤椅
66666666666
回复 使用道具 举报
许言 来自手机 中级黑马 2017-12-13 17:36:21
板凳
顶顶顶顶顶
回复 使用道具 举报
很基础,很详细
回复 使用道具 举报
宋子 来自手机 初级黑马 2017-12-13 17:38:22
地板
学习了,
回复 使用道具 举报
nhm 来自手机 中级黑马 2017-12-13 17:38:26
7#
666666666666
回复 使用道具 举报
刘华莎 来自手机 中级黑马 2017-12-13 19:19:18
8#
棒棒哒
回复 使用道具 举报
学好js走遍天下都不怕
回复 使用道具 举报
小核桃仁 来自手机 中级黑马 2017-12-15 22:36:50
10#
棒棒哒
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马