Java Script基础

Java Script是脚本语言

 

JavaScript 是面向对象的语言,但 JavaScript 不使用类。

 

在 JavaScript 中,不会创建类,也不会通过类来创建对象

 

document.getElementById("XXXX");获取ID为XXX的元素

可以改变其内容或者元素样式甚者可以是图片。

x=document.getElementById("XXXX");

x.innerHTML="Hello JavaScript"; //改变内容

x.style.color="#ff0000"; //改变样式

<script>
function changeImage()
{
    element=document.getElementById('myimage')
    if (element.src.match("bulbon"))
    {
        element.src="/images/pic_bulboff.gif";
    }
    else
    {
        element.src="/images/pic_bulbon.gif";
    }
}
</script>
<img id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180">
改变图片

JS也可以验证输入

var x=document.getElementById("demo").value;//获取ID为demo的元素值
    if(isNaN(x)||x.replace(/(^\s*)|(\s*$)/g,"")==""){
        alert("不是数字");
    }
验证输入数字 

Java Script可以在head中也可以在body中
也可以保存在外部文件中 扩展名是.JS
如果使用外部文件. src属性设置.JS文件
<script src="myScript.js"></script>
PS:外部脚本不能包含 <script> 标签
Java Script没有打印和输出语句
可以通过不同的方式来输出数据
常用的window.alert(); document.write(); innerHTML修改内容 console.log();
变量用Var定义
局部变量在函数内,函数外定义的是全局变量,HTML中全局变量为window对象
函数function定义
Java Script语句是发给浏览器的命令
Java Script可以创建对象 有属性也可以有方法 调用和C#一样 person.属性 person.方法()
例如:

var person={
firstname : "John",
lastname : "Doe",
id : 5566
fullName : function() 
{
return this.firstName + " " + this.lastName;
}
};
对象

在字符串中添加转义字符来使用引号 例如:
var x = 'It\'s alright';
var y = "He is called \"Johnny\"";
反斜杠是一个转义字符。 转义字符将特殊字符转换为字符串字符

JS可以先使用变量在定义变量。

严格模式,可以消除一些不合理,不严谨的地方,列如上面没有变量定义却可以使用。

使用"use strict"

变量名推荐使用驼峰法来命名(camelCase)
JS HTML DOM 文档对象模型
JS通过documen对象操作 可以改内容 改CSS
点击事件功能也可以通过JS函数来操作

addEventListener() 方法用于向指定元素添加事件句柄。

语法:element.addEventListener(event, function, useCapture);

第一个参数是事件的类型 (如 "click" 或 "mousedown").

第二个参数是事件触发后调用的函数。

第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。

一个元素可以添加多个句柄。

事件传递有两种方式:冒泡与捕获。

在冒泡中,内部元素的事件会先被触发,然后再触发外部元素。

在捕获中,外部元素的事件会先被触发,然后才会触发内部元素的事件。

addEventListener(eventfunctionuseCapture);

useCapture默认值为 false, 即冒泡传递,当值为 true 时, 事件使用捕获传递。

移除句柄

element.removeEventListener("mousemove", myFunction);

posted @ 2019-11-06 14:14  最爱吃汤圆27  阅读(357)  评论(0编辑  收藏  举报