欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

js简介及基本入门

程序员文章站 2022-06-14 14:58:54
...

二、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属性

  1. 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="值"
相关标签: js