JavaScript初识

JavaScript初识

1.web的组成

• HTML(Hyper Text MarkUp language) 超文本标记语言 结构层
• CSS（CaseCade Style Sheets） 级联样式表 样式层
• JavaScript 行为层

2.JavaScript简介

js诞生之初是为了做表单验证（减少服务器的压力），随着互联网的发展，js也不仅仅只是做表单的验证，更多的是与网页的交互

• 时间 ： 1995
• 开发者：布兰登·艾奇
  • 仅仅只用了一周的时间 （借鉴了C语言的基本语法，Java的数据结构等等）
• JavaScript原名LiveScript，但是当时Java比较火,相当于蹭Java的热度，改名为JavaScript

3.JavaScript的概念

JavaScript是一们具有面向对象能力的解释型程序设计语言，具体一点javaScript是基于对象和事件驱动的并且具备客户端安全性的浏览器脚本语言。

4.JavaScript的组成

• ECMAScript(核心JS)：规范js的基本语法，变量，命名规范，数据类型，操作语句等内容

  • ECMA：欧洲计算机制造厂商协会（各大浏览器厂商组成的），是一个非盈利性的组织。

• DOM（Document Object Model） 文档对象模型 （操作标签结构）

• BOM (Browser Object Model) 浏览器对象模型

5.JavaScript的引入方式(书写位置)

• 行内

<div style="width: 100px;height: 100px;background-color: red;" οnclick="alert('我开始学习JS了~~~')"></div>

• 内嵌（内部）

<script>
     js代码段
 </script>

• 外联 （外部）

注意：外部 script 双标签中不建议放内容，因为放了也不生效

 <script src="路径地址"></script>

6.javaScript的三部曲

• 获取元素

document.getElementById('id值');

• 绑定事件

//元素.事件

• 做什么事情

//元素.事件 = function(){特定的功能} 

// 点击当前id是box这个div弹出弹窗
document.getElementById("box").onclick = function(){
    alert('你点我啊~~~');
}

7.注释

解释说明，浏览器不会解析。

• 单行注释 // CTRL + /
• 多行注释 /**/

8.window.onload

作用：保证页面当中所有的资源加载完毕再去执行当前的js (所有资源：结构，样式，图片，音频，视频等)

window.onload  = function(){
    js代码
}

9.js中其它的鼠标事件 *

• onclick 单击事件
• ondblclick 双击事件
• onmousedown 鼠标按下
• onmouseup 鼠标抬起
• onmousemove 鼠标移动
• oncontextmenu 鼠标右击
• onmouseover 鼠标移入
• onmouseout 鼠标移出
• onmouseenter 鼠标进入
• onmouseleave 鼠标离开

10.js中的调试方式 *

• alert(弹出内容) 弹窗
• console.log(输出内容); 控制台输出

11.移入-进入和移出-离开区别 *

// onmouseover   
//  不仅将子元素的onmouseover事件触发，还会将父元素onmouseover再次触发
 不仅将子元素的onmouseout事件触发，还会将父元素onmouseout再次触发
// document.getElementById("father").onmouseover = function(){
//     console.log("father");
// }

// document.getElementById("son").onmouseover = function(){
//     console.log("son");
// }


// onmouseenter
// 只会触发当前这个元素的onmouseenter事件不会将父元素onmouseenter触发
// 只会触发当前这个元素的onmouseleave事件不会将父元素onmouseleave触发
document.getElementById("father").onmouseenter = function(){
    console.log("father");
}

document.getElementById("son").onmouseenter = function(){
    console.log("son");
}

12.变量 *

1.变量的基础

变量在js中是用来存储值和代表值的

基本语法

var 变量名 = 值；

• 声明 var 变量名;
• 定义 变量名 = 值；

2.变量的定义方式

// 1.声明 + 定义
var a = 10;
console.log(a); //10

// 2.只声明不定义
var b;
console.log(b); //undefined  声明一个变量没有进行赋值，默认值是undefined ->未初始化，未赋值

// 3.连续声明 + 定义    ,->并列
var c = 100,    //存储值
    d = 200,
    e = 300,
    f = 400;

console.log(c,d,e,f); //代表值

// 4.连续声明不定义
var x,y,z,w;
console.log(x,y,z,w);

3.变量的命名规范

1. 可以由数字，字母，下划线，$组成，但是不能以数字开头
2. 不能使用关键字及保留字
   • 关键字：js中内置的名字
   • 保留字：未来可能成为关键字的
3. 简明知义，符合驼峰命名法（约定俗成） ->第一个有意义的单词首字母小写，其余有意义单词的首字母都大写
4. 不要重复命名，后边的会覆盖前边的

13.操作元素内容

原则：

1.给值就是设置，不给值就是获取

2.没有内容获取到的就是空字符串

3.从元素中获取到的都是字符串

表单元素

基本语法：

• 设置
  • 元素.value = 值；
• 获取
  • 元素.value;

普通闭合标签

innerText

• 设置
  • 元素.innerText= 值；
• 获取
  • 元素.innerText；

innerHTML

• 设置
  • 元素.innerHTML= 值；
• 获取
  • 元素.innerHTML；

14.操作元素属性

操作元素天生自带结构上的属性

原则：

给值就是设置，不给值就是获取

获取不到就是空字符串

基本语法

• 设置

  • 元素.id = 值;
  • 元素.className = 值;
  • 元素.title = 值;

• 获取

  • 元素.id；
  • 元素.className;
  • 元素.title;
  • 原则：给值就是设置，不给值就是获取

1.点操作符和中括号操作符

点操作符

• 设置: 元素.属性 = 值；

• 获取: 元素.属性；

// 点操作符
box.innerHTML = "<h2>我是DIV</h2>";
box.className = "myBox";
console.log(box.className);

中括号操作符

• 设置: 元素[属性] = 值；

• 获取: 元素[属性]；

box["innerHTML"] = "我是DIV~~~~~";  //ReferenceError: innerHTML is not defined
box["className"] = "youBox";
box["id"] = "box1";

2.操作元素样式

原则：用过style属性操作的都是元素的行内样式（设置和获取）

• 设置: 元素.style.样式属性 = 值；
• 获取: 元素.style.样式属性

var box =document.getElementById("box");

// 设置
box.style.width = "400px";
box.style.height = "400px";
// js中全部遵循驼峰命名法
box.style.fontSize = "22px";
box.style.backgroundColor = "blue";

// 多次设置当前这个属性 后边的覆盖前边的
box.style.width = "600px";

// 获取
// 行内有才能获取到，没有获取到的是空字符串
console.log(box.style.width);
console.log(box.style.height);
console.log(box.style.fontSize);
console.log(box.style.backgroundColor);

cssText

• 设置: 元素.style.cssText = “行内样式值”;
  • cssText ->符合CSS写法
• 获取: 元素.style.cssTex；
  • 将行内style属性对应的值整体获取到 （符合CSS写法）

var box = document.getElementById("box");

// 设置
// 会把style对应的值整体覆盖了
box.style.cssText = "width:200px;height:200px;background-color:red";
// box.style.cssText = "font-size:60px";
// box.style.cssText = "width:200px";

// 获取
console.log(box.style.cssText);