<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
js发展史
1995---网景(netscape)----商用浏览器--- 火狐
程序员:布兰登-艾奇 ;用于表单验证---10天,借鉴--java(sun公司) ---livescript---javascript
微软:ie浏览器 1995发布:ie3.0---jscript--浏览器大战
机构:ecma:欧洲计算机制造商协会---制定的规则:ecmascript1.0 es1 es5 es6
网站的组成:
html--超文本标记语言----结构层
css---层叠样式表---样式表,布局--表现层
js(javescript)---脚本语言---交互--行为层
javescript是什么?
基于对象和事件驱动的解释性脚本语言
基于对象:面向对象----自己创建对象,实现某种功能
事件驱动:
解释性:解释性--可以直接识别,读一行执行一行 v8引擎
编译性--高级语言
跨平台:
js特性:基于对象,事件驱动,解释性,跨平台
js组成:
ecmascript:js基础语法,常用对象
dom(document object model):文档对象模型
bom(broweser object model):浏览器对象模型
计算机语言:
机器语言: 01010101001 2进制 晶体管计算机---美国宾夕法尼亚大学
汇编语言:1 and 2 ----先编译---再执行 慢---驱动程序 驱动硬件
高级语言:java c c++ , python 先编译---再执行
初始js代码:
js引入方式--
行间引入:
需求:点击红色盒子弹性信息框
onclick:点击事件
alert:信息
问题:结构不分离,不方便后期维护
<div onclick="alert( '33')"></div>
内部引入:
<script> alert</script>
js代码写在script标签里面,script标签可以写在任意位置,任意多个;建议放在body末尾
问题:结构半分离,不方便后期维护
外部引入:
创建一个js文件--直接写js代码alert( '333')
<script src="../" > </script>
用于引入外部js文件的script标签,内部不能写其他的js代码
js的语法规则,注释:-q
注释://单行注释 CTRL+
/*多行注释 CTRL+shift+/ */
语法规则:1.每行语句后面加 ;
2.js中严格区分大小写,使用驼峰命名法(大驼峰 Fontsize 小驼峰 fontSize )
js的调试语句:
var a=10; var b=20;
1.alert(a); 只能出现a变量信息。 作用:在页面中弹出警告框,提示信息,一次只能弹一个,阻塞性
2.console.log(a,b); 作用:在控制台打印信息,多个输出之间用逗号隔开
3.打断点----80%
变量:存储数据的容器,变量名(标识符),给存储数据的区域 取的名字。
声明变量:var 变量名 =值;
1.声明变量
var a; console.log(a);undefined 未定义,声明了变量但是没有赋值
2.赋值
a =100; 赋值 ,把等号右边的值赋值给左边
console.log(a);
3.声明的同时赋值
var b =200;
console.log(b);
4.同时声明多个变量,赋值
var n= "张三",m ="李四"
console.log(n,m);
5.连等
var c = d = e = 50;
console.log(c,d,e);
6.不建议的写法
var p ;
console.log(p);
k=20;
console.log(k);
console.log(y); y is not defined 报错:没有声明也没有赋值
变量命名规范;
1.只能由数字,字母,下划线,$组成,不能以数字开头
2.不能使用关键字和保留字
3.见名之意,遵循驼峰命名法
4.不能重名,会覆盖,后面的会覆盖前面的
通过id获取元素;
js入门三部曲:
1.找到谁 获取元素
2,加事件
3.做什么事
获取元素 id
语法:document.getElementById("id名称");
文档 获取 元素
作用:获取单个标签(父元素)
1.找到谁
#box{
}
<div id ="box"></div>
var oBox = document.getElementById("box")
2.加事件---点击事件
添加事件;
语法; 元素.onclick = function(){ 做什么事}
oBox.onclick = function() {
3.做什么事---事件反馈
alter("哈哈哈哈哈") }
通过标签名获取元素
语法:
获取整个文档中对应的标签:document.getElementByTagName("标签名") 标签名不区分大小写
获取父元素中对应的标签:父元素,document.getElementByTagName("标签名")
获取box中的所有的li标签
通过class获取元素
语法:获取整个文档中对应的标签:document.getElementByClassName("类名");
document.getElementByClassName("box")[下标];对应的单独元素
鼠标事件:
添加事件的语法:元素,事件名 = function (){事件反馈}
onclick 点击事件
onmouseover: 鼠标移入事件
onmouseout:鼠标移出事件
onmousedown:鼠标按下事件
onmouseup:鼠标抬起事件
1.获取元素---页面中所有li标签
操作标签的内容;
操作表单元素内容 value
语法:获取:var 变量名 = 标签. value
设置: 标签.value = 值;
-->
</body>
</html>
没有合适的资源?快使用搜索试试~ 我知道了~
资源推荐
资源详情
资源评论
收起资源包目录
笔记2.zip (24个子文件)
笔记2
day8
笔记.html 4KB
day7
笔记.html 784B
day3
笔记.html 6KB
练习.html 563B
day5
笔记.html 2KB
练习.html 424B
day2
笔记.html 4KB
img
2.jpg 255KB
1.jpg 22KB
5.jpg 25KB
3.jpg 25KB
4.jpg 11KB
练习.html 2KB
day10
笔记.html 2KB
day9
笔记.html 3KB
重命名
函数与定时器.md 10KB
预解析题目.md 2KB
作用域图解.png 72KB
day1
js.js 14B
笔记.html 7KB
练习.html 1KB
day6
笔记.html 3KB
day4
笔记.html 3KB
练习.html 315B
共 24 条
- 1
资源评论
LuFei.436
- 粉丝: 0
- 资源: 1
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功