首页 > 编程语言> 文章详细

初识JavaScript（2019-06-24）

2019-06-24 20:43:37 阅读：250 来源： 互联网

标签：06 标签 JavaScript js 2019 ECMAScript oBox 事件属性

(一)javascript简介

1-定义
- 具有面向对象能力的、解释型的编程语言.
2-历史
- 1997 netscape LiveScript
- 和sun合作曾java热度改名javascript
- 微软 JScript \ EaseScript
- ECMA 欧洲计算机制造商协会(European Computer Manufactures Association) ECMAScript(标准) ECMA-262
- ECMAScript 1.0 1997
- ECMAScript 2.0 1998
- ECMAScript 3.0 1999
- ECMAScript 5.0 2009 *
- ECMAScript 6.0 2015 es6 *
- ECMAScript 7.0 2016 es7
- ECMAScript 8.0 2017 es8
- ECMAScript 9.0 2018 es9
- ECMAScript 10.0 2019 es10
3-组成
- ECMAScript : js的标准,定义了js中最核心的知识点,变量,操作语句,关键字...
- DOM(document object model): 文档对象模型,定义了操作HTML文档的属性和方法.比如获取input的值,操作div的样式等
- BOM(borwser object model): 浏览器对象模型,定义了操作浏览器的属性和方法. 比如打开窗口,获取浏览器版本信息等
4-特点
- 解释型: 不同于 java , C 等编译型语言,需要编译后才能执行,js直接可以放在浏览器中被js的解释器执行.
- 跨平台: 不依赖操作系统和语言环境,只要有浏览器就能运行
- 事件驱动: js的操作大部分都是基于用户的某些操作来完成的,js中的这种操作叫做事件驱动
- 基于对象: js里面提供了很多内置的对象,可以使用已有的对象,也可以创建对象
5-用途
- 交互动效
- 客户端表单验证
- 动态数据绑定

js组成: ECMAScript + DOM + BOM
ECMAScript 和 javascript 关系?
- ECMAScript 是 javascript 的标准
- javascript 是 ECMAScript 的一种实现

(二)js的三种引入方式

1-行内式 : 在开始标签上引入js的事件属性,在属性值里写入js代码
```
    <div onclick="alert('hello');"></div>
```
2-内嵌式 : 在body末尾,添加一个script标签(脚本块),在script标签之间写入js代码
```
    <script>
        alert('...'); 
    </script>
```
3-外链式 : 在body末尾,添加一个script标签(脚本块),通过script标签的src属性引入 .js文件 , 在.js文件中写入js代码
```
    <script src="script.js">
        //外链式脚本块之间的代码不会运行
    </script>
```

(三) js代码调试语句(输出方式)

1-alert("hello world"); 系统弹出提示框
- 会阻塞其他代码的运行
2-console.log("hello world!"); 控制台输出
- 控制台中可以运行js代码,并且js的报错信息也是在控制台中提示

(四) 变量

可变的量:相当于一个带有名称的容器作用:存储值和代表值
声明变量

  var 变量名 = 值;    声明的同时进行赋值
  var a;   先声明 , 声明之后默认值是undefined
  a = 10;   后赋值
  var a,b,c;  连续声明多个变量

变量必须先声明再使用,否则报错 "变量名 is not defined"

变量命名规则
- 数字\字母\下滑线$组成
- 不能以数字开头
- 不能使用关键字和保留字
- 推荐驼峰命名法 studentInformation
- 尽量使用英文单词,可以适当简写

(五) 注释语句

单行注释
```
  //  单行注释
```
多行注释
```
 /*
   多行注释
 */
 
```

(六) 简单的交互思路

操作哪个元素就先获取哪个元素

  var oBox = document.getElementById('box');

绑定事件

 oBox.onclick = function(){ 

 }

事件发生时做什么

  oBox.onclick = function(){ 
      //这里面写事件发生时要执行的所有操作
  }

(七) js操作标签样式

  element.style.样式属性 = 值;
  oBox.style.backgroundColor = "red";

样式属性名中带 '-' ,都转换成驼峰命名例如 font-size --> fontSize

cssText 批量操作css样式 ,相当于设置标签上的style属性值

  oBox.style.cssText = "width:100px;height:100px;";

(八) 文档就绪事件

  window.onload = function(){ 
    ...
  }

如果直接把js放在head里面,会报错,因为页面从上到下加载,运行到js代码的时候页面的标签还买加载出来,获取不到,所以需要添加文档就绪事件,让页面加载完之后再执行js

(九) 操作标签的内容

1-闭合标签
- innerHTML : 设置或者获取标签之间的HTML代码
- innerText : 设置或者获取标签之间的文本(不能识别标签)
```
  oBox.innerHTML = "<h1>hello</h1>";
  oBox.innerText = "<h1>hello</h1>";
```
2- 表单元素的值
- value : 获取或者设置表单元素的值
```
  oInp.value = "张三";
```

(十) 操作标签属性

  <div id="box" class="red">
  <img src="img/pic.jpg" alt="替换文字">
  <a href="" target="_blank">
  <form action="" method="">
  <input type="" name="" checked>
  <option seleted></option>

标签上的属性大部分情况都是直接用元素 .属性名 ,比如

  oBox.id = "box";
  oImg.src = "img/pic.jpg";
  oLink.href = "http://www.ujiuye.com";

class属性比较特殊 ,需要用className属性访问 (因为class是js中的关键字)

  oBox.className = "red"

标签属性的值正常情况都是标签上怎么写的,获取回来就是什么,checked和selected属性使用 true 和 false 表示是否选中
```
  box.class = "box red";
```
设置单选按钮\复选框\下拉列表选项选中状态也是使用true和false,true表示选中,false表示取消选中
```
  radio.checked = true;
```

(十一) 常用的鼠标事件

onclick 单击事件
ondblclick 双击事件
oncontextmenu 右键菜单事件
onmousedown 鼠标按键按下
onmouseup 鼠标按键抬起
onmouseover 移入事件
onmouseout 移出事件
onmouseenter 进入事件
onmouseleave 离开事件
onmousemove 移动事件
onmouseover和onmouseenter区别: 鼠标从子元素上移入移出,会反复触发父元素的over事件
onmouseout和onmouseleave区别: 鼠标从子元素上移入移出,会反复触发父元素的out事件

标签：06,标签,JavaScript,js,2019,ECMAScript,oBox,事件,属性
来源： https://www.cnblogs.com/didamehulayou/p/11079313.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9