javascript第一天

JavaScript初识

1. javascript的前世今生 

(1)     Navigator 导航者   netSacpe网景

(2)     只具备浏览的功能

(3)     网景公司需要一门语言 能实现 浏览器 和 用户之间 进行交流互动

(4)     布兰登艾奇  10天之内 写出了一个语言 Mocha--->livescript--->javascript

(5)     Java 和 javascript没有任何关系的

(6)     Js借鉴了java的语法  c语言的函数

(7)     Js主要用来解决：用户和浏览器之间的交互问题（表单提交问题）

1. Js是一门什么语言

(1)     Js是一门基于对象的，由事件驱动的，解释性脚本语言  重点

①    基于对象：js中有一些先前写好的工具，可以帮我们解决最基础的功能问题。这些工具叫对象。

②    事件驱动：事件驱动是用来解决 用户和浏览器之间的交互问题的。用户执行一个操作来触发特定的事件，浏览器做出对应的响应就是事件驱动的过程。

③    解释性：浏览器要执行代码 需要先将代码翻译为机器语言，解释性就是逐行翻译，翻译一行，执行一行。

1. Js包含哪些成分

(1)     ECMAScript:   JavaScript的语法规则  ES1 ES2 ES3   ES5  ES9

①    Js的数据类型及转换

②    Js的流程控制语句

③    Js细节操作

(2)     DOM：Document Object Model  文档（html文档）对象模型  主要用来帮助开发者操作html文档

(3)     BOM：Browser Object Model  浏览器对象模型   主要用来帮助开发者操作浏览器

1. Js的引入

(1)     行内引入

①    <div  onclick=”alert(‘xxxx’)”>xxxx</div>

②    注意：我们不推荐大家使用行内引入，因为结构和逻辑的分离

③    注意：引号嵌套的时候 内外层引号不能相同

(2)     内部引入

①    <script> 内部引入的js代码 </script>

②    注意：Script标签可以写在代码的任何位置，一般我们推荐写在body标签的末尾或head标签的末尾

(3)     外部引入

①    <script src=”外部js文件的地址”></script>

②    注意：引入外部js文件的script标签中不能写js代码，如果想写其他的js代码，可以新写一个script标签

③    理论上讲，script标签可以写无数个。

(4)     Js的注释：

①    单行文本注释   //注释内容   ctrl+/

②    多行文本注释   /*注释内容*/  ctrl+shift+/

(5)     Js的页面加载函数

①    Window.onload = function(){ 要执行的js代码 }

②    写在window。Onload大括号中的js代码会在 页面结构和样式以及外部引入的资源都加载完之后 再执行

1. Js的简单鼠标事件

(1)     点击事件 onclick

(2)     双击事件 ondblclick

(3)     右击事件 oncontextmenu

(4)     鼠标移动事件 onmousemove

(5)     鼠标按下/抬起事件 onmousedown/up

(6)     鼠标移入移出事件 onmouseover/out    onmouseenter/leave

1. Js的变量

(1)     定义：变量就是值可以改变的量  是存储数据的容器

(2)     变量的写法

①    变量的声明：var 变量名;    变量的赋值：变量名 = 变量值;

②    变量的声明和赋值合写：var 变量名 = 变量值；

③    变量的连续声明：  var a = 10, b = 20, c = 30;

④    变量的连等：  var a = b = c = 10;

(3)     变量命名的规则

①    不能以数字开头，

②    变量命名不能使用除$和_之外的特殊字符

③    不能使用关键字和保留字（候选关键字）

④    不能重复，如果重复，后面的变量会覆盖前面的

(4)     变量命名规范

①    尽量使用驼峰命名法  userName

②    尽量命名语义化

③    尽量不要用中文

1. Js实际操作部分

(1)     操作js元素的内容

①    操作普通双标签内容

1)       innerText   内部文本

1. 用法1：元素.innerText  作用：获取元素的内部文本内容
2. 用法2：元素.innerText = “xxxx”   设置元素的内部文本内容
3. innerText获取元素内容 只能得到 文本内容  设置内容也只能设置文本内容，如果出现html标签 也不会解析而是直接作为文本渲染进页面

2)       innerHTML   内部html

1. 用法和innerText完全一样
2. 区别于innerText  innerHTML可以识别html内容 
3. 如果获取内容 可以获取到标签内容   设置内容中有标签内容也可以解析为实际的html标签渲染进页面。

②    操作表单元素内容

1)       value  

1. 获取表单元素内容：元素.value;
2. 设置表单元素内容：元素.value = “xxxx”; 

(2)     操作js元素的属性

①    获取： 元素.属性名

②    设置： 元素.属性名 = 属性值

③    注意：当获取src属性的时候 得到的结果是绝对路径

④    注意：元素的非自带属性不可以这样操作，自定义属性也不能操作

(3)     操作js元素的类名

①    获取：元素.className

②    设置：元素.className = “xxxx”

③    注意：使用className 实际上就是在设置或获取元素的类名， 如果后续设置新的类名 就会覆盖掉原来的类名， 如果想保留原类名，需要写作： 元素.className = 元素.className + “ 新类名”

(4)     操作js元素的样式

①    获取：元素.style.样式属性名

②    设置：元素.style.样式属性名 = ‘属性值’

③    通过js的style设置的样式全都是行内样式，设置的时候注意可能会覆盖内部样式

④    通过style获取样式也只能获取行内样式

⑤    操作特殊样式属性

1)       Font-size、background-color

2)       注意：像上述这类属性，属性名中带-  我们需要写作驼峰命名法

1. 写作：fontSize  backgroundColor

(5)     Js设置行内样式

①    cssText

1)       用法：元素.style.cssText = “width:300px; height:300px; background:red”

2)       遇到带-的属性 还是写-  不需要使用驼峰命名法

3)       注意：cssText会覆盖掉元素原本的所有行内样式