JS学习笔记day1
来源:互联网 发布:淘宝卖家怎么开直通车 编辑:程序博客网 时间:2024/05/17 20:22
前端基本的技能学习到JS了,感觉还比较简单,我看的视频是极客学院的前段教程第一阶段,基本概念的讲解,还没有实战过项目,准备学习完第二阶段后用Django写一个小明酱的博客,到时候也会发布出来的。
JS用法
HTML 中的脚本必须位于 <script> 与 </script> 标签之间。脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。
JS标签
如需在 HTML 页面中插入 JavaScript,请使用 <script> 标签。<script> 和 </script> 会告诉 JavaScript 在何处开始和结束。<script> 和 </script> 之间的代码行包含了 JavaScript
使用限制
- 在HTML中,不限制脚本数量
- 通常把脚本放置在head标签中,以不干扰页面内容
JS输出
- JavaScript 没有任何打印或者输出的函数。
- JavaScript 可以通过不同的方式来输出数据:
- 使用 window.alert() 弹出警告框。
- 使用 document.write() 方法将内容写到 HTML 文档中。
- 使用 innerHTML 写入到 HTML 元素。
- 使用 console.log() 写入到浏览器的控制台。
JS语句
向浏览器发出命令,语句的作用是告诉浏览器该做什么;语句之间用分号分割,分号是可选项;代码按照编写顺序依次执行
标识符
必须以字母、下划线、美元符开始
注意:JS对大小写非常敏感,同时会忽略多余的空格
JS注释
- 单行://
- 多行:/* */
JavaScript使用关键字 var 来定义变量, 使用等号来为变量赋值
数据类型
- 字符串(String)
- 数字(Number)
- 布尔(Boolean)
- 数组(Array)
- 对象(Object)
- 空(null)
- 未定义
- 可以通过赋值为null的方式清除变量
运算符
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title></head><body> <p>i=10,j=10;i+j=?</p> <p id="sumid"></p> <button onclick="mysum()">结果</button> <script> function mysum() { var i = 10; var j = 10; var m = i+j; document.getElementById("sumid").innerHTML=m; } </script></body></html>
- === 绝对等于(值和类型均相等)
- !== 不绝对等于(值和类型有一个不相等,或两个都不相等)
条件语句
- if-else
语法
if (condition){ 当条件为 true 时执行的代码}else{ 当条件不为 true 时执行的代码}
- switch
语法
switch(n){ case 1: 执行代码块 1 break; case 2: 执行代码块 2 break; default: 与 case 1 和 case 2 不同时执行的代码}
循环语句
- for循环
- for-循环代码块一定的次数
for (var i=0;i<cars.length;i++){ document.write(cars[i] + "<br>");}
- for/in - 循环遍历对象的属性
var person={fname:"John",lname:"Doe",age:25}; for (x in person) // x 为属性名{ txt=txt + person[x];}
输出为JohnDoe25
- while循环
while (条件){ 需要执行的代码}
do{ 需要执行的代码}while (条件);
跳转语句
- break 语句用于跳出循环。
- continue 用于跳过循环中的一个迭代。
函数
函数的定义
<script> function demo(a,b) { var sum = a+b; return sum; } var sum = demo(10,10); alert(sum);//弹出一个对话框</script>
语法
function functionName(parameters) { 执行的代码}
函数调用
- 在script标签中调用
- 在HTML文件中进行调用
返回值的函数
- 返回值:
- 我们通过return将函数的值返回给调用它的地方
- return使用时,函数会停止执行,同时返回值
异常捕获
- 异常捕获
try { //在这里运行代码} catch(err) { //在这里处理错误}
实例:没有对str进行定义而抛出异常
<script> function demo() { try{ alert(str); }catch(err){//只有发生错误时才会执行catch语句的内容 alert(err); } } demo();</script>
- throw语句:通过throw语句创建一个自定义的错误
<form> <input id="txt" type="text"> <input id="btn" type="button" onclick="demo()" value="按钮"></form><script> function demo() { try{ var e = document.getElementById("txt").value; if(e==""){ throw "请输入"; } }catch(err){ alert(err); } }</script>
事件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>事件</title> <link rel="stylesheet" type="text/css" href="MyCss.css"></head><body> <!--鼠标移出事件和鼠标经过事件--> <div class="div" onmouseout="onOut(this)" onmouseover="onOver(this)"></div> <script> function onOver(ooj) {//函数命名遵循驼峰规则 ooj.innerHTML = "hello" } function onOut(ooj) { ooj.innerHTML = "world" } </script> <form> <!--文本内容改变事件--> <input type="text" onchange="alert(hello,内容改变了)"> <!--文本框选中事件--> <input type="text" onselect="changeDemo(this)"> </form> <script> function changeDemo(bg) { bg.style.background = "red" } </script></body></html>
DOM对象
- 简介
当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)
- 操作HTML
1. 改变HTML输出流
注意:绝不要在文档加载完成之后使用document.write()。这会覆盖该文档
2. 寻找元素
1. 通过id找到HTML元素 getElementById
2. 通过标签名找到HTML元素 getElementByTagName
3. 改变HTML内容
使用属性:innerHTML
4. 改变HTML属性
使用属性attribute
- 操作CSS
document.getElementById(id).style.property=新样式
实例:修改背景颜色
<body> <div id="div" class="div"> Hello </div> <button onclick="demo(this)">按钮</button> <script> function demo() { document.getElementById("div").style.background = "blue"; } </script></body>
DOMEventListener句柄
- addEventListener() 方法用于向指定元素添加事件句柄
element.addEventListener(event, function, useCapture);
- removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄:
事件详解
- 事件流
- 事件流:描述的是在页面中接收事件的顺序
- 事件冒泡:由最具体的元素接收,然后逐级向上传播至最不具体的元素的结点(文档)
- 事件捕获:最不具体的结点先接收事件,而最具体的结点应该是最后接收事件
- 事件处理
- 事件对象
阅读全文
0 0
- JS学习笔记day1
- JS笔记day1
- js复习笔记day1
- JS基础学习day1
- 学习笔记之day1
- Struts2 学习笔记 day1
- java学习笔记day1
- CCNA学习笔记Day1
- Android学习笔记 Day1
- python学习笔记 day1
- Android学习笔记day1
- AngularJS学习笔记-day1
- Python学习笔记Day1
- git学习笔记 day1
- Scala学习笔记Day1
- python 学习笔记 day1
- DAY1学习视频笔记
- HTML学习笔记(Day1)
- 将HTML的<style>样式,变为行内样式
- 在Vue中使用Vuex进行状态管理指南
- AlphaGo人肉臂黄士杰:我的使命完成 阿尔法狗项目结束 | 重磅
- 从Excel文件中找出在TXT文件中没有出现的 行之_代码片段
- cookie和session的区别
- JS学习笔记day1
- Kettle日志输出到文件方法
- 虚拟机安装CentOS 7, 安装Docker CE
- FPGA:下一代机器人感知处理器
- 从零开始,阅读一篇人工智能论文
- 使用xshell第一次连接时,可能会连接多次才能连上,出现:WARNING!The remote SSH server rejected X11 forwarding request.
- “捡垃圾”都被骗,闲鱼的二手梦会否变成噩梦?
- OpenCV笔记(1)载入图像 视频播放 读取摄像头
- 软件调试笔记49