JavaScript

Tongson
251 阅读3分钟

DOM模型,DOM对象-->document

BOM模型Browser,浏览器模型-->window

JS是如何改变页面的

JavaScript解析引擎挖掘机在浏览器环境(宿主)内操作DOM对象

JavaScript是什么

JavaScript是一种基于对象和事件驱动并具有安全性能的脚本语言，有了JavaScript，可使网页变得生动

JavaScript语言的前身叫作Livescript。自 从Sun公司推出著名的Java语言之后，Netscape公司引进了Sun公司有关Java的程序概念，将自己原有的Livescript重新进行设计，并改名为JavaScript。

JavaScript与Java的关系

语言本身没有关系,只是为了拿Java做广告.

编程语言

解析执行的语言

代码->解析引擎->执行效果

编译执行的语言

代码->编译->二进制可执行文件

编程共用的东西:

变量\控制结构(顺序/分支/循环)\表达式\语句

变量的讨论

  • 编程中的重要概念--变量
    • 内存中该变量的存储地址
    • 变量名
    • 变量值
    • 变量类型

建立变量->申请空间->变量指向该空间->并把值存出来相应的内存空间

传递赋值

引用赋值

JavaScript里,数据\对象\函数默认就是引用赋值

语法

JS中的变量命名规范

变量名称的要求

  • 1.变量名只能用 字母\下划线\数字$ 这4中组成.但是不能用数字做开头
  • 2.比较新的js标准已经支持用任何UNICODE字符做变量名(当然,仍然不能用数字开头)这意味着,汉字可以做量名(实际开发勿用)
  • 3.变量名区分大小写
  • 4.要求命名有意义
  • 5.不加var的写法,与加var的区别很大(请不要这样写)
  • 6.变量也允许先声明不赋值

变量的类型

  • 基本类型

    • 浮点型
    • 整形
    • ''字符类型
    • ""字符类型
    • 布尔值true/false
    • null->在内存中有地址
    • undefined->在内存中就没有了

  • 衍生类型

    • 数组类型
    • 对象类型
    • 函数类型

在html代码中如何引入JavaScript

(和css的引入对比学习)

1种方式

<script type="text/javascript">...</script>

2种方式

<script type="text/javascript" src=""></script>

注意

  • 1.如果用两种方式混合,引入多个script文件,运行效果相当于按顺序把多个script的代码合起来,按顺序运行.
  • 2.在页面head和body都可以写

注释

多行注释

/*
*/

单行注释

//

运算符

算术运算符

赋值运算符

条件运算符

自增自减运算符

++a

先自加1后return

a++

先return后自加1

逻辑运算符

三元运算符

位运算符

流程控制

顺序语句

分支语句

if,if/else,if/else if/.../if,switch

循环语句

while,do/while,for

循环的退出

break\continue

for循环

函数

声明

封装

调用

返回值

执行权与交回

作用域

系统函数

escape()
unescape()
isFinite()
isNaN()
parseFloat()
paraseInt()
eval()

数组

对象

对象的用法

对象的方法

js的内置对象

DOM操作

增删改查

查找

思路:

由大到小,通过下面3个方法来进行大的定位.

document.getElementById
document.getElementByTagName []
document.getElementByName []

如果还没找到,还可以根据已经找到的节点再次定位继续查找

childNodes []
children []

节点关系

parentNode\firstChild\lastChild\nextSibling\previousSibling

节点创建

document.createElement('element_name')
document.createTextNode('text_content')

节点修改

node.appendChild()
node.cloneNode()
node.insertBefore()
node.removeChild()
node.replaceChild()
node.innerHTML

修改节点的属性

  • 一种是直接写在内部标签的属性
  • 另一种是体现在css里的属性

DOM事件

onclick
onmouseover
onmouseout
onmousedown
onmouseup
onmousemove

onchange
onselect
onkeypress
onkeydown
onkeyup
onsubmit
onreset

onblur
onfocus
onload
onunload

<input type="text" onclick="func();"/>

//函数return false才能拦截表单的提交行为
<form onsubmit="return 函数名();"/>

CSS

属性对照表

window

//浏览器相关信息
window.navigator
    window.navigator.appcodename
    window.navigator.appname
    window.navigator.appversion
    window.navigator.platform
    window.navigator.useragent
    window.navigator.cookieenabled

window.history
    window.history.back
    window.history.forward
    
window.screen
    window.screen.availWidth
    window.screen.availHeight

window.location
    window.location.hostname
    window.location.pathname
    window.location.port
    window.location.protocal

window.alert
window.confirm
window.prompt
window.setInterval
window.clearInterval
window.setTimeout
window.clearTimeout

window.document


等等
avatar
文章
阅读
粉丝