<!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
需积分: 0 96 浏览量
更新于2023-05-24
收藏 396KB ZIP 举报
笔记2.zip
笔记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 315B192 浏览量
5星 · 资源好评率100%159 浏览量
111 浏览量
2024-03-15 上传
158 浏览量
2020-06-09 上传
175 浏览量
2024-04-20 上传
142 浏览量
2020-06-09 上传
2023-07-05 上传
2024-05-19 上传
2024-07-24 上传
2020-07-07 上传
5星 · 资源好评率100%2022-11-16 上传
资源评论
LuFei.436
- 粉丝: 0
- 资源: 1
最新资源
- dnSpy-net-win32-222.zip
- mongoose-free-6.9
- 德普微一级代理 DP100N06MGL PDFN3.3*3.3 TRMOS N-MOSFET 60V, 8mΩ, 45A
- 【java毕业设计】SpringBoot+Vue幼儿园管理系统 源码+sql脚本+论文 完整版
- 德普微一级代理 DP021N03FGLI DFN5*6 DPMOS N-MOSFET 30V 180A 1.8mΩ
- 巨潮资讯网5000只股票orgId-dict加密字典
- 基于java实现的快速排序代码
- 德普微一级代理 DP3145D SOT23-6 USB PD 协议单口控制器
- 【一文搞懂：什么是集成学习-原理+python代码】
- 国际象棋检测7-YOLO（v5至v9）、COCO、CreateML、Darknet、Paligemma、TFRecord数据集合集.rar
