小白初学JavaScript第一天

JavaScript-Day1

一、JavaScript介绍

1.1网站组成

	网站由三个部分组成：
	HTML:(HyperText Markup Language)超文本标记语言
	css:(Cascading Style Sheets)层叠样式表
	JavaScript:简称js，用于网页交互的解释性脚本语言

1.2什么是JavaScript？

	JavaScript是基于事件和对象驱动的解释性脚本语言。
	
	JavaScript是运行在浏览器上的语言。
	
	JavaScript是世界上最流行的脚本语言。
	
	JavaScript一般用来给页面增加交互性(菜单、轮播图、选项卡、表单校验....)

1.3JavaScript的组成

	ECMAScript               JavaScript的语法部分
	
	DOM       		Document Object Model  文档对象模型
	
	​						通过DOM可以使JavaScript操作HTML和css
	
	BOM			Browser Object Model   浏览器对象模型
	
	注意：ES与JS的区别的联系？  ES是JS的标准，JS是ES的实现

1.4怎样使用JavaScript？

1.通过script标签引入

    <script src="./js/js文件名.js"></script>

2.在script标签中声明

    <script>
        alert("hello world");
    </script>

3.嵌入到HTML标签中

    <button onclick="alert('hi')">内容</button>

注意：不能再script标签引入其它js之后，再用来声明js

```html
    <script src="./js/demo2.js">
        alert('内容');//错误用法
    </script>
    注意：JavaScript可以存在与页面的任何位置。

1.5语法规则

	1.严格区分大小写
	
	2.字符都是英文半角
	
	3.换行、空格、缩进 不敏感  （建议一条语句占用一行，每一行代码后要加分号）

Uncaught ReferenceError: Alert is not defined			//xx未定义
Uncaught SyntaxError: Invalid or unexpected token		//无效的符号

1.6变量

1.定义变量

使用var关键字来声明(定义) 变量

var  变量名;

2.变量名的命名规则

• 变量名以字母、_或$开头
• 可以由字母、数字、_或$组成
• 不能使用关键字和保留字
• 使用驼峰命名法–见名知意 (从第二个单词开始，首字母大写)
• 注意：变量不能重名

3.变量的使用

变量名=值;		//赋值

//定义单个变量
var a;	//先定义再赋值
a=10;

//定义同时即赋值(初始化)
var b=20;

//同时定义多个变量
var num1,num2,num3;

//定义多个变量，初始化
var age1=20,age2=100,age3;

//连等写法
var a = b = c = 1;
console.log(a,b,c);
**注意：变量先定义再使用**

1.7常见的事件

	事件：一件事
	
	鼠标事件和键盘事件
	
	 on-事件名
	
	鼠标事件：
	
	onmouseover      鼠标经过
	
	onmouseout       鼠标离开
	
	onmousemove    鼠标移动
	
	onclick					点击事件
	
	onmouseenter    鼠标进入
	
	onmouseleave    鼠标离开
	
	onload                  加载事件

	onchange            内容改变事件 

元素查找：

        //元素查找
        var o=document.getElementById('btn');//根据id找元素
        console.log(o);

添加事件：

        //添加事件
        o.onclick = function () {
            console.log('我被点击了.....');
        };

注意：事件不会自动执行，需要触发之后才可以执行
常见错误：
Uncaught TypeError: Cannot set property ‘onmouseenter’ of null

1.8js操作页面内容

1.取出输入框的内容：

对象.value

2.设置输入框的内容：

对象.value=值;

注意：下拉列表的取值分两种情况：

​ 1.option标签有value属性 取的是value属性

2. option标签没有value属性 取的是option标签的内容

       <select name="" id="slt">
           <!-- <option value="1">AAAA</option>
           <option value="2">BBBB</option>
           <option value="3">CCCC</option>
           <option value="4">DDDD</option> -->
           <option>AAAAA</option>
           <option>BBBB</option>
           <option>CCCC</option>
       </select>
   

3.闭合标签的内容获取和设置

innerHTML

innerText

            // console.log(o.innerHTML);//取出内容
            // o.innerHTML='呵呵呵，我是新来的';

            console.log(o.innerText);
            o.innerText='呵呵呵，我是text';

注意：

innerHTML可以支持HTML标签

innerText不支持标签（原样显示）

1.9js操作属性

取值：

对象.属性名

赋值：

对象.属性名=值;

注意：一些特殊的属性名，需要变形 class---->className for---->htmlFor

2.js操作样式

//用法：
对象.style.样式名

//示例：
对象.style.width="200px";
对象.style.fontSize="18px";//  变形  去掉-,从第二个单词开始，首字母大写    font-size   background-color  等....


//直接修改style或者 style.cssText 都是覆盖效果
o.style='值';
o.style.cssText="值"