web前端学习day_03:JavaScript:如何使用/ 语法/ 方法/ NaN/ js对象分类/ BOM浏览器相关/ 事件/ DOM文档对象模型
JavaScript
- 给页面添加动态效果
- JavaScript是一门编程语言,和Java没有关系,为了蹭热度.
- 语言特点:
- 属于脚本语言,不需要编译直接解析执行.
- 基于面向对象
- 属于弱类型语言,
- 强类型:int x=10; String s = “abc”; int y;
- 弱类型:var x=10; var s = “abc”; var y;
- 安全性高: JavaScript语言只能访问浏览器内部的数据,浏览器以外的数据不允许访问.
- 交互性高: 可以将JavaScript语言嵌入到html页面中和用户直接交互
1.如何在html页面中写JavaScript代码
内联:在标签里面添加事件属性,在属性中写样式代码.
<input type="button" value="内联按钮"onclick="alert('内联触发!')"/>
内部:在html页面中任意位置添加script标签,在标签体内写js代码.
外部:在单独的js文件中写js代码,在html页面中通过script标签引入,好处:可以多页面复用,可以将html代码和js代码分离
2.语法
- 包括: 变量 数据类型 运算符 各种语句 方法 面向对象
2.1变量声明和赋值
- JavaScript语言属于弱类型语言
- java: int x=10; String name=“小明”; x=“abc”;(报错类型不匹配)
Person p=new Person(); - JS: var x=10; var name=“小明”; x=“abc”;不报错 var p = new Person();
2.2 数据类型
- JS中只有对象类型
- 常见的几种对象类型:
- 数值:number 相当于Java所有数值类型的总和
- 字符串:string 可以用单引号或双引号修饰字符串 var s = “abc”/‘abc’;
- 布尔值:boolean true/false
- 未定义:undefined var x; 变量只声明不赋值时为未定义类型
- 自定义:object Person Car Hero
2.3运算符 + - * / % > < >= <= = != ==
- 和Java大体相同
- = =和= = =的区别: = =会先统一等号两边变量的类型再比较值, = = =是先比较类型,如果类型相等后再去比较值. 666==“666” true 666===“666” false
- 除法运算: js中会自动根据除法结果转换整数和小数
java:int x=5; int y=2; x/y=? 2;
js: var x=5; var y=2; x/y=2.5; x=6 x/y=3 - typeof x; 获取变量的类型 typeof 66+6 = “number”+6 = “number6”
2.4语句 if else for while do while switch case
- 和Java中大体相同
- for循环中 int i 改成var i
3. 方法
- java: public 返回值类型 方法名(参数列表){方法体}
- JS: function 方法名(参数列表){方法体}
- 如何声明常见的四种方法:
- 无参无返回值
- 无参有返回值
- 有参无返回值
- 有参有返回值
- 三种声明方法的方式:
- function 方法名(参数列表){方法体}
- var 方法名 = function(参数列表){方法体}
- var 方法名 = new Function(“参数1”,“参数2”,“方法体”);
3.1页面相关的方法
通过元素id获取页面中的元素对象
<div id="d1">abc</div>
var d = document.getElementById(“d1”);
获取和修改元素的文本内容
d.innerText = xxxx; 修改
d.innerText 获取获取和修改文本框的值
i1.value=“xxx”; 修改
i1.value 获取获取和修改元素的html内容
i1.innerHTML=""; 修改
i1.innerHTML+=""; 追加
4.NaN
- Not a Number 不是一个数
- isNaN(x) 判断变量x是否是NaN true代表是NaN(不是数) false代表不是NaN(是数)
5.JavaScript对象分类
- 内置对象:number/string/boolean等
- 浏览器相关对象BOM: Browser Object Model 浏览器对象模型
- 页面相关对象DOM: Document Object Model 文档对象模型
6. BOM浏览器相关内容
- window: 该对象的属性和方法称为全局属性和方法,访问时可以省略掉window.
- window中常见的方法:
- window.isNaN(); 判断变量是否是数值
- window.parseInt(); 把字符串或小数转成整数
parseInt(Math.random()*100)
parseInt(i1.value) + parseInt(i1.value) - window.parseFloat(“2.38”); 把字符串转成小数
- window.alert(); 弹出提示框
- window.confirm(“您确认离开吗?”); 弹出确认框
- window.prompt(“想吃什么?”); 弹出文本框
- window.setInterval(方法,时间间隔); 定时器
当需要每隔一段时间重复做某件事的时候,使用定时器
var timer = setInterval(方法,时间间隔);
clearInterval(timer); 停止定时器
setTimeout(方法,时间间隔); 只执行一次的定时器
- window中常见的属性
- history:历史(当前窗口历史,关闭窗口历史会删除)
history.length 获取窗口历史页面数量
history.back() 返回上一页面 等效<-
history.forward() 前往下一页面 等效->
history.go(n) n代表前进和后退的数值 n=1代表前进1个页面 2代表2个页面 n=-1代表后退一个页面 -2后退两个页面 0刷新 - location:位置
location.href 获取和修改浏览器的访问地址
hocation.reload(); 刷新页面 - screen:屏幕
screen.width 屏幕的宽度
screen.height 屏幕的高度 - navigator导航/帮助
navigator.userAgent 获取浏览器的版本信息
7.事件
- 什么是事件:事件是系统给提供的一些特定时间点, 包括:鼠标事件/键盘事件/状态改变事件
- 鼠标事件:
- onclick 点击事件
- onmouseover 鼠标移入事件
- onmouseout 鼠标移出事件
- onmousedown 鼠标按下事件
- onmouseup 鼠标抬起事件
- onmousemove 鼠标移动事件
- 键盘事件:
- onkeydown 键盘按下事件
- onkeyup 键盘抬起事件
- 状态改变事件:
- onload 页面加载完成事件
- onchange 值改变事件
- onresize 窗口尺寸改变事件
7.1事件绑定(给元素添加事件的方式)
- 事件属性绑定
- 动态绑定(通过js代码给元素添加事件) 好处:能将html代码和js代码分离
7.2事件传递(事件冒泡)
- 当某一个位置有多个事件需要响应,则事件的响应顺序是从最底层往上层传递,类似气泡从下往上所以称为事件冒泡.
8. DOM文档对象模型
- 页面相关内容
- 通过id获取元素 document.getElementById(" ");
- 获取和修改元素文本内容 innerText
- 获取和修改元素html内容 innerHTML
- 获取和修改文本框的值 value
web前端学习day_03:JavaScript:如何使用/ 语法/ 方法/ NaN/ js对象分类/ BOM浏览器相关/ 事件/ DOM文档对象模型相关推荐
- 零基础web前端学习之JavaScript 和css 阻塞
web前端学习之JavaScript 和css 阻塞,JavaScript 是客户端和服务器端的脚本语言,可以插入HTML 页函中, 并且是目前较热门的Web 开发语言.同时, JavaScript ...
- Web前端学习笔记——JavaScript之WEBAPI、BOM、DOM及获取页面元素
Web API介绍 API的概念 API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访 ...
- Web前端学习笔记——JavaScript之面向对象游戏案例:贪吃蛇
面向对象游戏案例:贪吃蛇 案例相关源码以上传到 GitHub :https://github.com/lipengzhou/new-snake 案例介绍 游戏演示 在线演示地址:贪吃蛇 案例目标 游戏 ...
- Web前端学习笔记20:Vue_路由_Vue Router_模块化的分类_babel_webpack_Element-UI
文章目录 第一阶段学习 1.路由的概念 2.前端路由的初体验 3.Vue Router简介 4.Vue Router的使用步骤(★★★) 5.嵌套路由,动态路由的实现方式 A.嵌套路由的概念(★★★) ...
- 前端(五)DOM 文档对象模型
注:变量声明尽量用const,const语义化更好,发现变量需要修改(修改值,而非地址)时再改为let(可以重新赋值),var很少用.简单数据类型.(值经常改变时用let) 下面假装我们javascr ...
- Web前端学习笔记——JavaScript之数组、函数、作用域
数组 为什么要学习数组 之前学习的数据类型,只能存储一个值(比如:Number/String.我们想存储班级中所有学生的姓名,此时该如何存储? 数组的概念 所谓数组,就是将多个元素(通常是同一类型)按 ...
- 正则至少一个数字_好程序员web前端培训分享JavaScript学习笔记之正则
好程序员web前端培训分享JavaScript学习笔记之正则,正则表达式,又名 "规则表达式" 由我们自己来书写 "规则",专门用来检测 字符串 是否符合 &q ...
- web前端学习分享:JavaScript框架
转自:微点阅读 https://www.weidianyuedu.com web前端培训分享JavaScript框架,JavaScript 是开发领域的重要技术之一.根据 Statista 的报告, ...
- 【Web前端学习之路】JavaScript入门 (黑马课程学习笔记)
1.编程语言和标记语言的区别 编程语言有很强的逻辑和行为能力,通常是主动的指令,如:if.while等. 标记语言不用于向计算机发出指令,常用于格式化和链接,通常是被读取的. 2.JavaScript ...
最新文章
- linux shell 实现循环输出
- 读《实战 GUI 产品的自动化测试》之:第二步,构建利于维护的自动化测试系统...
- 《深入浅出MFC》系列之动态创建
- 数据中台产品经理面试指南(二)
- C++ Primer 5th笔记(chap 16 模板和泛型编程)模板实参推断
- Linux命令:和输出
- 数平精准推荐 | OCR技术之系统篇
- sessionkey 微信小程序获取_微信小程序获取sessionkey,Connection reset
- python怎样算学的好_python怎么学习好
- 单行文本和多行文本溢出以省略号显示方法
- Win10电脑安装打印机驱动运转打印机的方法
- java引用复制_Java中引用的浅复制和深复制
- 软件测试分为哪几个阶段?
- 安装新版的winetricks_20170506-最新WineQQ8.9.1安装教程和常见问题解决方法
- 网络监控摄像头安装的六个问题及解决方法
- 抽样函数sint/t反常求积分
- ipod nano7关机_iPod Nano-什么烂,什么不烂
- idea中各种颜色的含义
- 紫光扫描仪ocr_清华紫光扫描仪的安装教程及使用方法
- 读书笔记《大型网站技术架构核心原理与案例》-李智慧
热门文章
- Jmeter Md5加密操作之-------BeanShell PreProcessor
- javascript中的事件冒泡、事件捕获和事件执行顺序
- C#基础—不完整类型(局部类型)
- 高性能的JavaScript--加载和执行
- 解决input[type=file]打开时慢、卡顿问题
- .Net MVC Redirect出现:服务器无法在已发送 HTTP 标头之后设置状态解决方案
- gulp压缩js转义es6的常见错误及解决方案
- 解决idea导入项目后依赖报错问题
- vue 上传图片视频组件,可拍照选择照片,解决苹果手机拍照旋转问题
- FileZilla无法连接到服务器,不安全的服务器,不支持 FTP over TLS的解决方案