day01 JavaScript介绍
1. 自我介绍和课堂要求
朱银娟 河南商丘人 上课纪律 1.上课不能玩手机 手机需要上交 2.上课不能睡觉 3.有问题及时提出来 4.作业必须交 5.别迟到 8点20 1点50 五分钟以内10个俯卧撑/10个蹲起 6.每天早上都听写 如果写错了 20遍 最后一节课 原生js(基础 进阶 高阶) jQuery bootstrap 30天-9月30号结束
2. JavaScript的发展历史(了解)
1995年 网景公司研发了第一个商用浏览器 js最开始出现的目的是为了解决表单提交 是布兰登艾奇 利用10天时间解决了表单提交问题 借鉴liveScript---JavaScript JavaScript和Java有什么区别 微软也研发浏览器 1995年 发布了IE3.0----自己研发了一个类似于js的东西 研发了一套标准：ECMAScript1.0 es1 现在用的最广泛的标准是ECMASCript5.0简称es5 ECMASCript6.0---简称es6
3. JavaScript介绍
3.1.网站组成
HTML--超文本标记语言---结构 CSS---层叠样式表-----样式 js---js脚本语言---网站交互
3.2.什么是JavaScript
==基于对象和事件驱动的解释性脚本语言==
-
基于对象：JavaScript 是一种基于对象的语言，这意味着它能运用自己已经创建的对象，因此，许多功能可以来自脚本环境中对象的方法与脚本的相互作用。
-
事件驱动：JavaScript 可以直接对用户或者客户输入做出响应，无须经过 web 服务器，它对用户的响应，以事件驱动的方式进行。
-
解释性
-
解释性：可以直接识别，读一行执行一行
-
编译性：高级语言，c c++ ,先编译计算机能识别的，再执行（速度快）
-
3.3.==JavaScript的特性==
基于对象 事件驱动 解释性 跨平台
3.3.==JS的组成==
ECMASscipt：js的标准 这个标准里面有js的语法和常用对象 DOM Document Object Modal 文档对象模型 BOM Browser object Modal 浏览器对象模型
4.代码初识
4.1 JS引入方式
4.1.1 行间引入
<!-- 第一种 行间引入 将js的语法直接写在开始标签上
注意：双引号不能嵌套双引号 单引号也不能嵌套单引号 但是双引号和单引号可以相互嵌套
onclick 鼠标点击事件
alert("提示信息") 浏览器弹窗
缺点:结构行为不分离 不方便后期维护
-->
<button οnclick="alert('今天周一')">提交</button>
4.1.2 内部引入
<!--
第二种 内部引入
js代码放在script标签中 script标签可以放在任意位置 代码的执行顺序是从上往下执行
建议：一般放在head和body的末尾 是因为js一般都是操作标签 我们要确保标签先加载出来
缺点:结构行为不分离
-->
<script>
//浏览器弹窗
alert("弹走弹走6")
//操作div标签 操作p标签
</script>
4.1.3 外部引入
<!-- 第三种 外部引入
在外部创建js文件 通过script标签的src属性引入文件 src="js文件路径"
注意:引入外部文件的script标签 里面不能再写其他的js脚本
-->
<script src="./1.js">
// alert("没有弹走") 不要在这里面再写其他的js代码
</script>
<script>
alert("没有弹走")
</script>
4.1.4 语法规则与注释
<body>
<!-- 注释
单行注释 // 一行js代码 快捷键是ctrl+/
多行注释 /* 多行js代码 */ 快捷键是ctrl+shift+/
-->
<!-- js的语法
1-每行语句后面要加;
2-js中严格区分大小写，有时候会使用驼峰命名 fontSize
-->
<script>
/* */
//
alerT("123");
</script>
</body>
4.2 JavaScript的调试语句
js调试:在实际开发过程中用于检测代码的功能的一种方式
4.2.1alert()
-
语法: alert(提示信息)
-
作用: 在页面中弹出警告框，用于提示
-
缺点: 阻塞性的弹窗 一次只能输出一个
<script>
alert("提示信息");
alert("你在说什么");
console.log("123")
</script>
4.2.2 console.log()
-
语法：console.log(输出信息)
-
作用：在控制台打印信息 多个输出之间用逗号隔开
<script>
//2.console.log()
console.log("中午吃啥");
console.log("米饭","泡面","西北风");
</script>
4.2.3 打断点
-
在sources找到当前运行的文件---在打断点的代码行号上点击
4.3 变量
-
概念:存储数据的容器 称作变量(标识符) 给存储数据的区域起个名字
-
语法:var 变量名 = 值
基础用法
<script> // 1.声明变量--基础用法 var a; console.log(a);//undefined 未定义 声明了变量但是没有赋值 //2 赋值 读法：将右侧数据123赋值给左边的变量a a = "123"; console.log(a);//123 //3.声明变量和赋值同时进行 var b = "456"; //4.同时声明多个变量 逗号意味着这行代码没有结束 var c = "泡面", d = "赵四"; console.log(c, d)//泡面 赵四 //5.连等写法 x y的值都是”789 var x = y = "789"; console.log(x, y);// 789 789 </script>
特殊用法
//6.特殊用法 不建议使用 t = "10";//全局变量 console.log(t);//10 console.log(a1);//a1 is not defined 没有声明没有赋值 var a2; console.log(a2);//undefined 只是声明了变量 但是没有赋值
-
变量的命名规则
-
以数字 字母 下划线 $组成,但是不能以数字开头
-
不能使用关键字和保留字
-
5.JS基础交互
5.1 获取标签
< body >
<div class="box1" >这是div标签1</div>
<div class="box1">这是div标签2</div>
<div class= "box1">这是div标签3</div>
<div class="box1" >这是div标签4</div>
<div class=" box1">这是div标签5</div
<div class=”box1" >这是div标签6</div>
<div class=”box1" >这是div标签7</div>
<div class=" box1">这是div标签8</div>
<div class= " box1 ">这是div标签9</div>
<div class=" box1" >这是div标签10</div>
<ul id="wrap"
<div>这是li列表</div>
</li>
<li>
<div>这是1i列表</div>
</li>
<div>这是li列表</div>
</li>
</ul>
<script >
// 1. 通过标签名获取标签document. getElementsByTagName获取整 个文档下的对应标签
var oDivList = document . getElementsByTagName("div" );
console. log( oDivList);/ /HTMLCollection(10)
console . log(oDivList[9]);
// 2. 父元素. getElementsByTagName("标签名")获取该父元素下对应的标签
ar father = document . getElementById( "wrap" );
var child = father. getE lementsByTagName( "div" );
console . log( child);/ /HTMLCollection(3)
</script>
/body>
:/html >
5.2 鼠标事件
==注意:onmouseover和onmouseenter及onmouseout和onmouseleave的区别放在事件冒泡讲==
onclick : 点击事件 ondbclick:鼠标双击 onmouseover/onmouseenter : 鼠标移入事件 onmouseout/onmouseleave : 鼠标移出事件 onmousemove : 鼠标移动事件 onmousedown : 鼠标左键按下 onmouseup : 鼠标左键抬起 oncontextmenu: 鼠标右键显示菜单
364
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
