js简介及基本入门

二、JavaScript的历史(了解)

网景（NetSpace）公司

95年发布的第一个版本

JavaScript用来做表单校验

ECMA(欧洲计算机工协会) ECMAScript —>es JavaScript----->js

跨平台的语言

三、什么是JavaScript

JavaScript是基于事件和对象驱动的解释性脚本语言。

JavaScript是运行在浏览器上的语言。

JavaScript是世界上最流行的脚本语言。

JavaScript一般用来给页面增加交互性(菜单、轮播图、选项卡、表单校验…)

四、JavaScript的组成

ECMAScript JavaScript的语法部分

DOM Document Object Model 文档对象模型

​ 通过DOM可以使JavaScript操作HTML和css

BOM Browser Object Model 浏览器对象模型

注意：ES与JS的区别的联系？ ES是JS的标准，JS是ES的实现

五、使用JavaScript

1.通过script标签引入

    <script src="./js/demo1.js"></script>

2.在script标签中声明

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

3.嵌入到HTML标签中

    <button onclick="alert('hi')">点我</button>

​

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

    <script src="./js/demo2.js">
        alert('我饿了');//错误用法
    </script>

JavaScript可以存在与页面的任何位置。

语法规则：

1.严格区分大小写

2.字符都是英文半角

3.换行、空格、缩进 不敏感 （建议一条语句占用一行，每一行代码后要加分号）

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

六、变量(重点)

变化的量。存储数据

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);

注意：变量先定义再使用

注释： // 行注释 /* */ 文档注释(多行注释)

七、常见的事件

事件：一件事

鼠标事件和键盘事件

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

八、js操作页面内容

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不支持标签（原样显示）

九、js操作属性

取值：

对象.属性名

赋值：

对象.属性名=值;

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

十、js操作样式

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

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


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