JavaScript基础

JavaScript基础

---

1.JavaScript简介

JavaScript是一门脚本语言。计算机中除了脚本语言还有一下几种语言，这里我们总结一下：

• 汇编语言
• 脚本语言
• 机器语言
• 高级语言

以下注解可作为拓展材料：

1、脚本语言又被称为扩建的语言，或者动态语言，是一种编程语言，用来控制软件应用程序，脚本通常以文本（如ASCII)保存，只在被调用时进行解释或编译。

2、汇编语言（assembly language）是一种用于电子计算机、微处理器、微控制器或其他可编程器件的低级语言，亦称为符号语言。在汇编语言中，用助记符代替机器指令的操作码，用地址符号或标号代替指令或操作数的地址。在不同的设备中，汇编语言对应着不同的机器语言指令集，通过汇编过程转换成机器指令。特定的汇编语言和特定的机器语言指令集是一一对应的，不同平台之间不可直接移植。

3、机器语言是机器能直接识别的程序语言或指令代码，勿需经过翻译，每一操作码在计算机内部都有相应的电路来完成它，或指不经翻译即可为机器直接理解和接受的程序语言或指令代码。机器语言使用绝对地址和绝对操作码。不同的计算机都有各自的机器语言，即指令系统。从使用的角度看，机器语言是最低级的语言。

4、高级语言（High-level programming language）相对于机器语言（machine language）是一种指令集的体系。在这种语言下，其语法和结构更类似汉字或者普通英文，且由于远离对硬件的直接操作，使得一般人更容易学习。高级语言通常按其基本类型、代系、实现方式、应用范围等分类。

 

脚本语言的特点：对比其他类型语言编程速度更快，不需要编译、简单、易学、易用、灵活性高。当然这样的高灵活性也是有牺牲的，它的运行速度相对于其他的语言可能更慢，运行时更消耗资源。

 

为何学习 JavaScript？

JavaScript 是 web 开发者必学的三种语言之一：

• HTML定义网页的内容
• CSS规定网页的布局/样式
• JavaScript对网页行为进行编程

 

JavaScript的应用：淘宝的搜索功能、团立方中的轮播图、产品经理建立项目等等。

JavaScript组成：

• ECAMScript：JavaScript语法和基本对象
• DOM：文档对象模型
• BOM：浏览器对象模型。

2.JavaScript基本用法

JavaScript应该放在什么位置？

①行内JS

<button onClick="alert('Hello Everybody！')">按钮</button>

优点：非常的直观，直接作用于你写的元素

缺点：1、结构分离不清晰(html/csss/js)

2、复用性底

3、不利于后期维护与修改

②内部JS

<script>

//JavaScript 代码

</script>

优点：1、结构分离更清晰(较行内JS)。2、当前页面可复用 3、利于后期维护和修改

缺点：1、只能当前页面使用，不能多页面复用。2、多页面之间的维护比较麻烦。

③外部JS

<script src="./js/script.js"></script>

 

3.JavaScript-输出

JavaScript 显示方案

JavaScript 能够以不同方式“显示”数据：

• 使用 window.alert() 写入警告框
• 使用 document.write() 写入 HTML 输出
• 使用 innerHTML 写入 HTML 元素
• 使用 console.log() 写入浏览器控制台
• 使用 window.prompt(str1,str2)写入提问对话框
• 使用 window.confirm() 写入确认消息对话框

4.获取元素的方法

方法	描述
document.getElementById(id)	通过元素 id 来查找元素
document.getElementsByTagName(name)	通过标签名来查找元素
document.getElementsByClassName(name)	通过类名来查找元素
document.getElementsByName(name)	通过name属性来查找元素
document.querySelector(CSS selectors)	返回匹配指定选择器的第一个元素
document.querySelectorAll(CSS selectors)	返回所有的元素

5.JavaScript-鼠标事件

属性	值	描述
onclick	script	当单击鼠标时运行脚本
ondblclick	script	当双击鼠标时运行脚本
onmousedown	script	当按下鼠标按钮时运行脚本
onmousemove	script	当鼠标指针移动时运行脚本
onmouseout	script	当鼠标指针移出元素时运行脚本
onmouseover	script	当鼠标指针移至元素之上时运行脚本
onmouseup	script	当松开鼠标按钮时运行脚本
onmousewheel	script	当转动鼠标滚轮时运行脚本
onscroll	script	当滚动元素的滚动条时运行脚本

6.JavaScript-函数

1、函数定义:JavaScript 函数是被设计为执行特定任务的代码块。

2、JavaScript 函数语法

JavaScript 函数通过 function 关键词进行定义，其后是函数名和括号 ()。

函数名可包含字母、数字、下划线和美元符号（规则与变量名相同）。

function name() {

    要执行的代码

}

3、函数调用

函数定义好后，是不能自动执行的，需要调用它,直接在需要的位置写函数名。

第一种情况:在<script>标签内调用。

第二种情况:在HTML文件中调用，如通过点击按钮后调用定义好的函数。

<input type="button" value="click it" οnclick="add2()">

4、有参数的函数

function 函数名(参数1,参数2){

 函数代码;

}

注意:参数可以多个，根据需要增减参数个数。参数之间用(逗号，）隔开。

function add2(x,y){

   sum = x + y;

   document.write(sum);

}

add2(3,34);//函数调用

5、返回值的函数

function add2(x,y)

{

   sum = x + y;

   return sum; //返回函数值,return后面的值叫做返回值。

}

var result=add2(44,67);

注意:函数中参数和返回值不只是数字，还可以是字符串等其它类型。

 

7.JavaScript  style属性

Style 对象代表一个单独的样式声明。可从应用样式的文档或元素访问 Style 对象。

使用 Style 对象属性的语法：

document.getElementById("id").style.property="值"

Style 对象的属性：

1. 背景  Background
2. 边框和边距  Border 和 Margin
3. 布局  Layout
4. 列表  List
5. 定位  Positioning
6. 打印  Printing
7. 滚动条  Scrollbar
8. 表格  Table
9. 文本  Text
10. 规范

1.背景 Background 属性

属性	描述
background	在一行中设置所有的背景属性
backgroundAttachment	设置背景图像是否固定或随页面滚动
backgroundColor	设置元素的背景颜色
backgroundImage	设置元素的背景图像
backgroundPosition	设置背景图像的起始位置
backgroundPositionX	设置backgroundPosition属性的X坐标
backgroundPositionY	设置backgroundPosition属性的Y坐标
backgroundRepeat	设置是否及如何重复背景图像

2.边框和边距 Border 和 Margin 属性

属性	描述
border	在一行设置四个边框的所有属性
borderBottom	在一行设置底边框的所有属性
borderBottomColor	设置底边框的颜色
borderBottomStyle	设置底边框的样式
borderBottomWidth	设置底边框的宽度
borderColor	设置所有四个边框的颜色 (可设置四种颜色)
borderLeft	在一行设置左边框的所有属性
borderLeftColor	设置左边框的颜色
borderLeftStyle	设置左边框的样式
borderLeftWidth	设置左边框的宽度
borderRight	在一行设置右边框的所有属性
borderRightColor	设置右边框的颜色
borderRightStyle	设置右边框的样式
borderRightWidth	设置右边框的宽度
borderStyle	设置所有四个边框的样式 (可设置四种样式)
borderTop	在一行设置顶边框的所有属性
borderTopColor	设置顶边框的颜色
borderTopStyle	设置顶边框的样式
borderTopWidth	设置顶边框的宽度
borderWidth	设置所有四条边框的宽度 (可设置四种宽度)
margin	设置元素的边距 (可设置四个值)
marginBottom	设置元素的底边距
marginLeft	设置元素的左边距
marginRight	设置元素的右边据
marginTop	设置元素的顶边距
outline	在一行设置所有的outline属性
outlineColor	设置围绕元素的轮廓颜色
outlineStyle	设置围绕元素的轮廓样式
outlineWidth	设置围绕元素的轮廓宽度
padding	设置元素的填充 (可设置四个值)
paddingBottom	设置元素的下填充
paddingLeft	设置元素的左填充
paddingRight	设置元素的右填充
paddingTop	设置元素的顶填充

3.布局  Layout 属性

属性	描述
clear	设置在元素的哪边不允许其他的浮动元素
clip	设置元素的形状
content	设置元信息
counterIncrement	设置其后是正数的计数器名称的列表。其中整数指示每当元素出现时计数器的增量。默认是1。
counterReset	设置其后是正数的计数器名称的列表。其中整数指示每当元素出现时计数器被设置的值。默认是0。
cssFloat	设置图像或文本将出现（浮动）在另一元素中的何处。
cursor	设置显示的指针类型
direction	设置元素的文本方向
display	设置元素如何被显示
height	设置元素的高度
markerOffset	设置marker box的principal box距离其最近的边框边缘的距离
marks	设置是否cross marks或crop marks应仅仅被呈现于page box边缘之外
maxHeight	设置元素的最大高度
maxWidth	设置元素的最大宽度
minHeight	设置元素的最小高度
minWidth	设置元素的最小宽度
overflow	规定如何处理不适合元素盒的内容
verticalAlign	设置对元素中的内容进行垂直排列
visibility	设置元素是否可见
width	设置元素的宽度

4.列表  List 属性

属性	描述
listStyle	在一行设置列表的所有属性
listStyleImage	把图像设置为列表项标记
listStylePosition	改变列表项标记的位置
listStyleType	设置列表项标记的类型

5.定位  Positioning 属性

属性	描述
bottom	设置元素的底边缘距离父元素底边缘的之上或之下的距离
left	置元素的左边缘距离父元素左边缘的左边或右边的距离
position	把元素放置在static, relative, absolute 或 fixed 的位置
right	置元素的右边缘距离父元素右边缘的左边或右边的距离
top	设置元素的顶边缘距离父元素顶边缘的之上或之下的距离
zIndex	设置元素的堆叠次序

6.打印  Printing 属性

属性	描述
orphans	设置段落留到页面底部的最小行数
page	设置显示某元素时使用的页面类型
pageBreakAfter	设置某元素之后的分页行为
pageBreakBefore	设置某元素之前的分页行为
pageBreakInside	设置某元素内部的分页行为
size	设置页面的方向和尺寸
widows	设置段落必须留到页面顶部的最小行数

7.滚动条  Scrollbar 属性 (IE-only)

属性	描述
scrollbar3dLightColor	设置箭头和滚动条左侧和顶边的颜色
scrollbarArrowColor	设置滚动条上的箭头颜色
scrollbarBaseColor	设置滚动条的底色
scrollbarDarkShadowColor	设置箭头和滚动条右侧和底边的颜色
scrollbarFaceColor	设置滚动条的表色
scrollbarHighlightColor	设置箭头和滚动条左侧和顶边的颜色，以及滚动条的背景
scrollbarShadowColor	设置箭头和滚动条右侧和底边的颜色
scrollbarTrackColor	设置滚动条的背景色

8.表格  Table 属性

属性	描述
borderCollapse	设置表格边框是否合并为单边框，或者像在标准的HTML中那样分离。
borderSpacing	设置分隔单元格边框的距离
captionSide	设置表格标题的位置
emptyCells	设置是否显示表格中的空单元格
tableLayout	设置用来显示表格单元格、行以及列的算法

9.文本  Text 属性

属性	描述
color	设置文本的颜色
font	在一行设置所有的字体属性
fontFamily	设置元素的字体系列。
fontSize	设置元素的字体大小。
fontSizeAdjust	设置/调整文本的尺寸
fontStretch	设置如何紧缩或伸展字体
fontStyle	设置元素的字体样式
fontVariant	用小型大写字母字体来显示文本
fontWeight	设置字体的粗细
letterSpacing	设置字符间距
lineHeight	设置行间距
quotes	设置在文本中使用哪种引号
textAlign	排列文本
textDecoration	设置文本的修饰
textIndent	缩紧首行的文本
textShadow	设置文本的阴影效果
textTransform	对文本设置大写效果
unicodeBidi
whiteSpace	设置如何设置文本中的折行和空白符
wordSpacing	设置文本中的词间距

10.标准属性

属性	描述
dir	设置或返回文本的方向
lang	设置或返回元素的语言代码
title	设置或返回元素的咨询性的标题

8.JavaScript流程控制

什么是流程？

程序中的三种基本流程结构：

1. 顺序结构
2. 分支结构
3. 循环结构

顺序结构：按照顺序一条一条的执行代码，从上到下。

分支结构：执行代码的时候，可以根据条件进行选择，条件越多对应的结果越多，分支也就越多。例如if…else…语句,switch语句

循环语句：用来重复不断的做一件事,for循环，while循环，do…while循环

1. if…else 语句

1.if...else语句是在指定的条件成立时执行代码，在条件不成立时执行else后的代码。

语法：

if(条件){

    条件成立时执行的代码

}

else{

    条件不成立时执行的代码

}

2.多重判断（if..else嵌套语句）

要在多组语句中选择一组来执行，使用if..else嵌套语句。

语法:

if(条件1){

    条件1成立时执行的代码

}

else if(条件2){

    条件2成立时执行的代码

}

...

else if(条件n){

        条件n成立时执行的代码

}

else{

    条件1、2至n不成立时执行的代码

}

2. switch… case 

switch 语句用于基于不同条件执行不同动作.

switch(表达式){

    case 值1:

        执行代码块1；

        break；

    case 值2:

        执行代码块2；

        break；

        ...

    case 值n:

        执行代码块n；

        break；

    default:

        与 case值1 、 case值2...case值n 不同时执行的代码

}

语法说明:switch必须赋初始值，值与每个case值匹配。满足执行该 case 后的所有语句，并用break语句来阻止运行下一个case。如所有case值都不匹配，执行default后的语句。

3.for循环 

for循环是编程语言中一种循环语句，而循环语句由循环体及循环的判定条件两部分组成，for语句结构：

for(初始化变量;循环条件;循环迭代){     

    循环语句 ;

}

For循环 用来重复不断的做一件事。