JS 学习笔记

时间 2019-12-04

原文原文链接

一、简介

JavaScript简称JS，是可插入HTML文档的编程代码，JS代码由浏览器执行。
可参考博客：JS的使用方式了解JS引入的相关内容。
JS能够经过不一样的方式来输出数据：javascript

使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。

二、JS变量

变量是用于存储信息的"容器"。JS变量最好以字母开头，而且区分大小写。变量能够保存数字、字符、数组、对象等类型的数据。html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS变量</title>
</head>

<body>
<p id="info">本节介绍JS变量</p>
<script>
    var a1=1;        //数字
    var a2=3.14;     //带小数点数字
    var a3=10e4;     //科学计数法数字
    var b1=true, b2=false;      //布尔
    var c1='Hello';        //字符
    var d1=[];     //空数组
    var d2=["Audi","Volvo","BMW"];      //数组
    var d3=["Adam",2,true];      //数组
    var g1=myFunction();    //将函数的返回赋值给变量，须要定义函数。
    var t1 = Date();        //时间

    alert(a1);
</script>

</body>
</html>

三、JS函数

函数的定义有三种方法，下面介绍其中的两种，另一种不建议使用。其格式分别为：java

<script>
    function f1(x, y) {    //x和y为形参
        z = x * y;
        return z;
    }
    f2 = function (x, y) {
        z = x + y;
        return z;
    }

    alert(f1(2,3));    //调用f1函数，2和3为实参
    alert(f2(1,2));
</script>

四、JS事件

JS事件是能够被浏览器侦测到的行为。一般在事件触发时，能够执行一些代码。格式为：编程

<some-HTML-element some-event="some-JavaScript">    //注意须要使用双引号或单引号

下面列举了两个JS事件的例子，一个为onmouseover，另外一个为onclick。数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件</title>
</head>
<body>
    <p onmouseover="this.innerHTML='请继续'" style="color:red;">鼠标滑过查看详情！</p>        //使用this能够修改元素自身的内容
    <button onclick="document.getElementById('time').innerHTML=Date()">如今的时间</button>
    <p id="time"></p>

</body>
</html>

常见的HTML事件:浏览器

事件	描述
onchange	HTML 元素改变
onclick	用户点击 HTML 元素
onmouseover	用户在一个HTML元素上移动鼠标
onmouseout	用户从一个HTML元素上移开鼠标
onkeydown	用户按下键盘按键
onload	浏览器已完成页面的加载

JS的事件处理方式较为繁琐，jQuery 是为事件处理特别设计的，为此对于事件处理方面的工做可使用jQuery，请参考：jQuery学习笔记dom

五、JS流程控制

If...else 语句

// 语法为：
if (condition)        
  {       
  当条件为 true 时执行的代码      
  }        
else        
  {        
  当条件不为 true 时执行的代码        
  }

for 循环

// 语法为：
for (statement1; statement2; statement3)        
  {        
  被执行的代码块        
  }

其中，statement1为在循环开始以前设置变量(如：var i=0)，statement2为循环结束的条件（），statement3为继续循环前变量的改变方式(如：i++)。函数

for/in 循环 for/in循环能够用来遍历数组或对象的元素。

// 示例：
var p1={fname:"John",lname:"Doe"}; 
var p2=['A','B','C'];
for (x in p1) 
  { 
  txt=txt + p1[x]; 
  }

while循环
略。
还有一些其余的流程控制语句这里就不详述。

六、JS对象

对象只是一种特殊的数据，对象拥有属性和方法。JS是面向对象的语言，但它不使用类。可使用如下三种方式建立对象：学习

方式1：先建立空对象再添加属性
方式2：相似字典格式的建立
方式3：使用对象构造器

<script>
    p1 = new Object();      //方式1
    p1.firstname = 'David';
    p1.lastname = 'Wang';
    p1.id = 1122;

    p2 = {firstname:"John", lastname:"Doe", id:5566};     //方式2

    function person(firstname,lastname,age)        //方式3
    {
        this.firstname=firstname;
        this.lastname=lastname;
        this.age=age;

        this.changeage=c;
        function c(age)
        {
            this.age=age;
        }
    }

    p3 =new person('cathy','you',30);
    p3.changeage(32);               //对象使用.调用方法
    document.write(p3.age);         //对象使用.调用属性
</script>

七、DOM对象

DOM (Document Object Model) 译为文档对象模型，DOM以树形结构表达HTML文档。经过DOM对象，JS能够建立动态HTTML：this

查找HTML元素
改变HTML元素
改变HTML属性
改变CSS样式
对事件作出反应参考：https://www.w3cschool.cn/javascript/js-htmldom-events.html

1. JS学习笔记
2. Js学习笔记
3. JS 学习笔记
4. js学习笔记
5. JS学习笔记（一）
6. JS数组学习笔记
7. js学习笔记(新手)
8. js学习笔记（十一）
9. go js 学习笔记(一)
10. meteor js 学习笔记
更多相关文章...
• 您已经学习了 XML Schema，下一步学习什么呢？ - XML Schema 教程
• 我们已经学习了 SQL，下一步学习什么呢？ - SQL 教程
• Tomcat学习笔记（史上最全tomcat学习笔记）
• 适用于PHP初学者的学习线路和建议