javaScriptDay01
作者:gqk
一:javaScript是什么:
w3school 上说明JavaScript 是世界上最流行的编程语言。(吹牛)
JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。
javaScript也被称为ECMAScript
二:javaScript组成:
ECMAScript - JavaScript的核心
定义了javascript的语法规范
JavaScript的核心,描述了语言的基本语法和数据类型,ECMAScript是一套标准,定义了一种语言的标准与具体实现无关
BOM - 浏览器对象模型
一套操作浏览器功能的API
通过BOM可以操作浏览器窗口,比如:弹出框、控制浏览器跳转、获取分辨率等
DOM - 文档对象模型
一套操作页面元素的API
DOM可以把HTML看做是文档树,通过DOM提供的API可以对树上的节点进行操作
三:BOM的概念
代表浏览器窗口的Window对象是BOM的顶层对象,其他对象都是该对象的子对象。
我们在浏览器中的一些操作都可以使用BOM的方式进行编程处理,
比如:刷新浏览器、后退、前进、在浏览器中输入URL等
BOM核心—window对象
window是浏览器的顶级对象,当调用window下的属性和方法时,可以省略window 注意:window下一个特殊的属性 window.name
对话框
- alert()
- prompt()
- confirm()
<script type="text/javascript">var isOk = window.confirm("你确定要抛弃我吗?");//根据用户的不同相动作做出不同响应if(isOk){ //用户按下 确定window.alert("祝你好运");}else { //用户按下 取消window.alert("我们就再玩会吧");}
</script>
<script type="text/javascript">var msg = prompt("请输入你的姓名:");if(msg != null && msg.length > 0){alert("欢迎:" + msg);} </script>
四:DOM的概念:
文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象的标准模型就称为DOM。Document Object Model的历史可以追溯至1990年代后期微软与Netscape的“浏览器大战”,双方为了在JavaScript与JScript一决生死,于是大规模的赋予浏览器强大的功能。微软在网页技术上加入了不少专属事物,既有VBScript、ActiveX、以及微软自家的DHTML格式等,使不少网页使用非微软平台及浏览器无法正常显示。DOM即是当时蕴酿出来的杰作。
- 文档:一个网页可以称为文档
- 节点:网页中的所有内容都是节点(标签、属性、文本、注释等)
- 元素:网页中的标签
- 属性:标签的属性
DOM经常进行的操作
- 获取元素
- 动态创建元素
- 对元素进行操作(设置其属性或调用其方法)
- 事件(什么时机做相应的操作)
JavaScript书写方式
<script>document.write("hello world!");
</script>
五:JavaScript 变量 :变量是用于存储信息的"容器"
- 变量必须以字母开头
- 变量也能以 $ 和 _ 符号开头(不过我们不推荐这么做)
- 变量名称对大小写敏感(y 和 Y 是不同的变量)
var pi=3.14;
var person="John Doe";
var answer='Yes I am!';
声明(创建) JavaScript 变量
在 JavaScript 中创建变量通常称为"声明"变量。
我们使用 var 关键词来声明变量:
var usename;
变量声明之后,该变量是空的(它没有值)。
如需向变量赋值,请使用等号:
username="gqk";
不过,您也可以在声明变量时对其赋值:
var username="gqk";
Value = undefined
在计算机程序中,经常会声明无值的变量。未使用值来声明的变量,其值实际上是 undefined。
在执行过以下语句后,变量 carname 的值将是 undefined:
六:获取元素对象的几种方式
1,根据id获取元素
var div = document.getElementById('main'); console.log(div);
注意:由于id名具有唯一性,部分浏览器支持直接使用id名访问元素,但不是标准方式,不推荐使用。
2,根据元素获取对象:
document.getElementsByTagName('div')
3,根据name获取元素*
document.getElementsByName('hobby')
4,根据类名获取元素
document.getElementsByClassName('main')
5,根据选择器获取元素(了解)
var text = document.querySelector('#text'); console.log(text)
七:事件的基本使用
事件三要素
- 事件源:触发(被)事件的元素
- 事件类型:事件的触发方式(例如鼠标点击或键盘点击)
- 事件处理程序:事件触发后要执行的代码(函数形式)
案例
- 点击按钮弹出提示框
- 点击按钮修改元素的样式
非表单元素的属性
href、title、id、src
案例:
点击按钮,切换img标签里的图片
点击按钮显示隐藏div
innerHTML和innerText 区别:
表单元素属性
- value 用于大部分表单元素的内容获取(option除外)
- type 可以获取input标签的类型(输入框或复选框等)
- disabled 禁用属性
- checked 复选框选中属性
- selected 下拉菜单选中属性
案例
- 给文本框赋值,获取文本框的值
- 点击按钮禁用文本框
- 检测用户名是否是3-6位,密码是否是6-8位,
- 设置下拉框中的选中项
转载于:https://www.cnblogs.com/520gqk/p/9476705.html
javaScriptDay01相关推荐
- JavaScript-day01
JavaScript先导知识: 1.JavaScript 2.为什么要学JavaScript? 1.登录功能如何实现? 2.如何实现页面间的跳转功能? 3.如何实现点赞.收藏功 ...
最新文章
- MySQL体系结构之物理文件
- React编写input组件传参共用onChange
- optee中User TA的加载/验签和运行
- (拿来主义-8) Spring Boot属性配置文件详解(三)
- ELK三件套安装实践之路(1)
- [云炬创业基础笔记]第九章企业的法律形态测试1
- 在阿里云Kubernetes上运行SpringCloud示例PiggyMetrics
- SAP Spartacus login 页面看不到 UI 控件的问题解决
- Java高级语法笔记-向上层抛出异常
- Chromium内核原理之网络栈HTTP Cache
- 自动化测试之一----基本概念
- CSDN邀请您成为技术中心特约作者
- 拓端tecdat|R语言空气污染数据的地理空间可视化和分析:颗粒物2.5(PM2.5)和空气质量指数(AQI)
- 蓝牙耳机的两种通讯协议及奥秘
- python哪个版本好用-python用哪个版本好
- 全球知名开源项目与组织齐聚!——峰会【开源开放 生态共建】论坛来啦
- Excel - Office Excel 多表无法多窗口问题
- 【资源帖】漏洞平台(国内外)+企业SRC整理-持续更新
- Android Framework学习的基础概论
- 「合作共赢」泛微eteams云OA联手容联七陌 深耕SaaS协同软件市场