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