文档章节

JavaScript 学习(1)

明天以后
 明天以后
发布于 2014/09/30 14:26
字数 2153
阅读 235
收藏 11

参考资料:http://www.w3school.com.cn/js/index.asp

额,发现 http://www.w3cschool.cc 这里的资料似乎比上面那个更新鲜一些...


一、教程

    js是一种轻量级的编程语言,可插入html页面中,并由浏览器执行。

    (1)简介

<script>
    document.write("<h1>标题一</h1>");
    function al(){
//        alert("button clicked.");
//        document.getElementById("aa").innerHTML = "<h2>O(∩_∩)O哈哈~</h2>";
        if(isNaN(document.getElementById("num").value)){
            alert("not num");
        }
    }
    function am(){
        document.getElementById("aa").style.color = "#006060";
    }

</script>
<input type="text" name="num" id="num" />
<input type="button" value="submit" onclick="al()" />
<input type="button" value="submit" onclick="am()" />
<div id="aa"></div>

    (2)实现

// <script>标签, 在html中,使用 。type="text/javascript",不用添加。JS是现代浏览器以及HTML5中的默认脚本。

// 向html中,输入文本
document.write("<h1>This is a heading.</h1>");
// JS 函数和事件

<script>
    function myFunction(){
// 一定要注意id名字!!! 将demo写成dome了 ...
        document.getElementById("demo").innerHTML="My First JS Function.";
    }
</script>
<div id="demo"> ... </div>
<button type="button" onclick="myFunction()">Try it.</button>

// 输出
document.getElementById(id); // 来获得某个html元素的访问 
innerHTML; // 获取或插入元素内容

// 写到控制台
console.log("...") //

    (3)语句

// 浏览器会按照编写的顺序来执行每条语句。
// js对大小写敏感

    (4)注释

// 第一种注释方法
/*
第二种注释方法
*/

    (5)变量

// 变量
var x = 2;
var y = 3;
var z = x + y;

// 声明(创建)JS变量
var carname;

// 一条语句,多个变量
var name="Gates", age=56, job="CEO";

// Value = undefined;
var carname; // carname的值将是 undefined

    (6)数据类型

        字符串,数字,布尔,数组,对象,Null,Undefined

        JS拥有动态类型。相同的变量,可用作不同的类型。

var x ;
var x = 6;
var carname = "Bill Gates"; var carname = 'Bill Gates';
var x = true; var y = false;

// 数组
var cars = new Array();
cars[0] = "Audi";
cars[1] = "BMW";
// 或者使用
var cars = new Array("Audi", "BMW");

// 对象
// 对象由花括号分隔。在括号内部,对象的属性以名称和值对的形式(name: value)来定义。属性由逗号分隔
var person = {
    firstname   : "Bill",
    lastname    : "Gates",
    id          : 5566
};
// 对象属性的访问
person.lastname; person["lastname"]

// 声明变量类型
var carname = new String;
var x = new Number;
var y = new Boolean;
var cars = new Array;
var person = new Object;

    (7)对象

        JS中所有事物都是对象:字符串,数字,数组,日期等待

        在JS中,对象时拥有属性和方法的数据。

        属性:与对象有关的值。方法:能够在对象上执行的动作。

// 访问对象的属性
objectName.propertyName

// 访问对象的方法
objectName.methodName

    (8)函数

        函数是由事件驱动的或者当他被调用时执行的可重复使用的代码块。

function functionname(){
    // 执行代码 ...
}

// 调用带参数的函数
function myFunction(var1, var2){
    // 执行代码 ...
}

<button onclick="myFunction("Bill Gates", "CEO")">点击这里</button>

// 带有返回值的函数
function myFunction(){
    // 执行代码 ...
    return x;
}

// 变量的生存期
// 局部变量会在函数运行以后被删除
// 全局变量会在页面关闭后被删除

    (8-1)事件

        HTML事件是发生在HTML元素上的事情。

<button onclick="document.getElementById("demo").innerHTML=Date()">The time is ?</button>

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

   (8-2)字符串

        字符串可以使插入到引号中的任何字符。可以使用单引号或者双引号。

// 可以使用索引位置来访问字符串的每个字符
var carname = "Volvo XC60";
var character = carname[7];

// 字符串的长度
var sln = carname.length

// 特殊字符
"\""; // 进行转义

    (9)运算符

        +,-,*,/,%,++,--

        =,+=,-=,*=,/=,%=

    (10)比较

// 比较运算符
==        等于
===       全等(值和类型)
!=, >, <, >=, <= 

// 逻辑运算符
&&        and
||        or
!         not

// 条件运算符
variablename = (condition)?value1:value2;

    (11)If...Else

if (条件1){
    // ...
}
else if (条件2){
    // ...
}
else {
    // ...
}

    (12)Switch

switch(n){
case 1:
    // ...
    break;
case 2:
    // ...
    break;
// ...
default:
    // ...
}

    (13)For

for (var i=0; i<cars.length; i++){
    document.write(cars[i] + "<br>");
}

    (14)While

while (条件){
    // ...
}


do{
    // ...
}
while(条件);

    (15)Break

        break语句跳出循环。continue用于跳过循环中的一个迭代。

    (16)错误

try     // 语句测试代码块的错误
catch   // 语句处理错误
throw   // 语句创建自定义错误 

try{
    // 在这里运行代码
} catch(err){
    // 在这里处理错误
}

// 简单示例
function mm(){
    try{
        alelrt("welcome guest!"); // alert() 
    } catch(err){
        alert(err.message);
    }
}

    (17)验证

        js可用来在数据被送往服务器前对HTML表单中的这些输入数据进行验证。

        典型:①是否已填写表单中的必填项 ②输入的邮件是否合法 ③书否输入合法日期 ④是否在数据域(numeric field)中输入了文本

<script>
    function validate_form(){
// 获取当前页面forms,中的元素,的value
        var x = document.forms["form_a"]["name"].value;
        if(x == null || x == ""){
            alert("不能为空!");
            return false;
        } else {
            return true;
        }
    }
</script>

<form action="action.php" name="form_a" onsubmit="return validate_form()" method="post">
    用户名: <input type="text" name="name" />
    <input type="submit" value="Submit">
</form>

    (18)JSON

        json是JavaScript Object Notation。是一种轻量级的数据交换格式。

// 创建JavaScript字符串
var text = '{ "employees" : [' +
    '{ "firstName":"John" , "lastName":"Doe" },' +
    '{ "firstName":"Anna" , "lastName":"Smith" },' +
    '{ "firstName":"Peter" , "lastName":"Jones" } ]}';

// 使用JS内置函数 JSON.parse() 将字符串转换为 JavaScript 对象
var obj = JSON.parse(text);

    (19)void
        经常使用到 javascript:void(0) 这样的代码。

<a href="javascript:void(0)">单击此处什么也不会发生</a>

// href="#" 与 href="javascript:void(0)" 的区别
// #包含了一个位置信息,默认锚的位置是 #top 也就是网页的上端。
// 而JavaScript:void(0),仅仅表示一个死链接


二、HTML DOM

    (1)DOM简介

        通过HTML DOM,可以访问JavaScript HTML 文档的所有元素。

        当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。

        查找HTML元素:①通过id ②通过标签名 ③通过类名

    (2)HTML

// 改变HTML输出流
document.write(Date());

// 改变HTML内容
<p id="p1">Hello World</p>
<script>
    document.getElementById("p1").innerHTML = "New text!";
</script>

// 改变HTML属性
<img id="image" src="smiley.gif">
<script>
    document.getElementById("image").src = "landscape.jpg";
</script>

    (3)CSS

        改变HTML元素的样式

document.getElementById(id).style.property = new style;

// 例子
<p id="p2">Hello World!</p>
<script>
    document.getElementById("p2").style.color = "blue";
</script>

    (4)事件

        HTML DOM 使JavaScript有能力对HTML事件作出反应。

        可以向HTML事件属性添加JavaScript代码。

<p id="p1" onclick="this.innerHTML='hi world.'">Hello world!</p>

// 使用HTML DOM 来分配事件
// HTML DOM 允许您使用JavaScript来向HTML元素分配事件。
<p id="p1">Hello world!</p>
<script>
    document.getElementById("p1").onclick = function(){alert("aa");};
</script>
// 此时,需要将元素<p>放置在 script 前面。或者使用 function() 函数


// onload 和 onunload 事件,会在用户进入或离开页面时触发
<body onload="checkCookies()">
// onchange 事件
<input type="text" onchange="alert(this.value)" />
// onmouseover, onmouseout, onmousedown, onmouseup, onclick

    (5)EventListener

element.addEventListener(event, function, useCapture);

    (6)元素

        如需向HTML DOM 添加新元素,必须先创建该元素(元素节点),然后向一个已存在的元素追加该元素。

// 创建新的HTML元素
<div id="div1">
 <p id="p1">This is a paragraph.</p>
 <p id="p2">This is another paragraph.</p>
 </div>

<script>
 var para=document.createElement("p");
 var node=document.createTextNode("This is new.");
 para.appendChild(node);

 var element=document.getElementById("div1");
 element.appendChild(para);
 </script>

// 删除已有的HTML元素
<div id="div1">
 <p id="p1">This is a paragraph.</p>
 <p id="p2">This is another paragraph.</p>
 </div><script>
 var parent=document.getElementById("div1");
 var child=document.getElementById("p1");
 parent.removeChild(child);
 </script>


三、高级教程

    (1)对象

        js中所有的事物都是对象:字符串,数值,数组,函数 ...   此外,JS允许自定义对象

        对象只是一种特殊的数据,对象拥有属性和方法。

objectName.propertyName;

objectName.methodName();

        创建对象,并实例

person = new Object();
person.firstname="John";
person.lastname="Doe";
person.age=50;
person.eyecolor="blue"; 

// 

person = {firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"}

        使用对象构造器。

<script>
    function person(firstname, lastname, age, eyecolor){
        this.firstname = firstname;
        this.lastname = lastname;
        this.age = age;
        this.eyecolor = eyecolor;

        this.changeName = changeName;
        function changeName(name){
            this.changeName = name;
        }
    }
    var a_person = person("John", "Doe", 25, "blue");
    a_person.changeName("Doe");
</script>

    (2)Number 对象

        JS只有一种数字类型。

        所有JavaScript数字均为64位。

// 八进制
var y = 0377;
// 十六进制
var z = 0xFF;

// 可以使用 toString(x), 输出 x 进制
var num = 128;
num.toString(16);

    (3)String 字符串

// String 使用长度属性 length 来计算字符串长度
// 使用 indexOf() 来定位字符串中某一个指定的字符串首次出现的位置
// match() 函数用来查找字符串特定的字符,并且如果查找到的话,则返回这个字符串
// replace() 在字符串中用某些字符替换另一些字符
// toUpperCase(), toLowerCase()
// split() 转换为数组
// 特殊字符,转义 '\'

    (4)Date 日期

new Date();

    (5)Array 数组, Boolean 布尔, Math 算术, RegExp 对象

// 数组
var num = [1, 2, 3, 4]; new Array();

// 布尔
// 0,-0,null,"",false,undefined,NaN

// 算术
Math.sqrt(16); Math.PI; Math.round(4.7); // 四舍五入

// 正则
// regular expression 
var str = "Is this all there is?";
var pattern = /is/i; // 前面的字符串,后面的'i'忽略大小写。'g'全文搜索
str.match(pattern);

© 著作权归作者所有

明天以后

明天以后

粉丝 76
博文 130
码字总数 87367
作品 0
昌平
程序员
私信 提问
HTML 5视频教程系列之JavaScript学习篇-何韬-专题视频课程

HTML 5视频教程系列之JavaScript学习篇—52816人已学习 课程介绍 HTML 5视频教程系列中JavaScript开发的基础知识讲解及学习。 课程收益 通过自学视频掌握HTML 5开发手机应用和手机游戏的技能...

pkutao
2015/02/10
0
0
如何轻松快速学习JavaScript 呢?

JS给人那种感觉的原因多半是因为它如下的特点: 1:本身知识很抽象、晦涩难懂,如:闭包、内置对象、DOM。 2:本身内容很多,如函数库,对象库就一大堆。 3:混合多种编程思想。 4:辛苦学习...

课工场CC老师
2017/11/04
33
0
分享51本关于JavaScript方面的学习书籍(免费下载)

分享51本关于JavaScript方面的学习书籍(免费下载) 1、JavaScript面向对象15分钟教程 2、原型、作用域、闭包的完整解释 3、Javascript面向对象特性实现(封装、继承、接口) 4、JavaScript面向...

邓剑彬
2012/12/02
1K
12
Dart 比 JavaScript 更酷的10个理由

Dart 是 Google发明的一种新的编程语言。在使用JavaScript一年多以后,我对Dart可谓是一见钟情。我以前是做Java的,我在用JS的时候要学习很多新东西。 有人说你必须深入研究JavaScript,否则...

虫虫
2012/01/04
7.5K
13
前端学习之路(从入门到入坑...)

学习前端两年多了,拿了阿里巴巴实现offer,想结合个人经历总结的前端入门方法,总结从零基础到具备前端基本技能的道路、学习方法、资料。由于能力有限,不能保证面面俱到,只是作为入门参考...

阿小庆
2018/06/14
0
0

没有更多内容

加载失败,请刷新页面

加载更多

分享一个 pycharm 专业版的永久使用方法

刚开始接触Python,首先要解决的就是Python开发环境的搭建。 目前比较好用的Python开发工具是PyCharm,他有社区办和专业版两个版本,但是社区版支持有限,我们既然想好好学python,那肯定得用...

上海小胖
17分钟前
4
0
Spring Cloud Alibaba 实战(二) - 关于Spring Boot你不可不知道的实情

0 相关源码 1 什么是Spring Boot 一个快速开发的脚手架 作用 快速创建独立的、生产级的基于Spring的应用程序 特性 无需部署WAR文件 提供starter简化配置 尽可能自动配置Spring以及第三方库 ...

JavaEdge
今天
7
0
TensorFlow 机器学习秘籍中文第二版(初稿)

TensorFlow 入门 介绍 TensorFlow 如何工作 声明变量和张量 使用占位符和变量 使用矩阵 声明操作符 实现激活函数 使用数据源 其他资源 TensorFlow 的方式 介绍 计算图中的操作 对嵌套操作分层...

ApacheCN_飞龙
今天
7
0
五、Java设计模式之迪米特原则

定义:一个对象应该对其他对象保持最小的了解,又叫最小知道原则 尽量降低类与类之间的耦合 优点:降低类之间的耦合 强调只和朋友交流,不和陌生人说话 朋友:出现在成员变量、方法的输入、输...

东风破2019
昨天
23
0
jvm虚拟机结构

1:jvm可操作数据类型分为原始类型和引用类型,因此存在原始值和引用值被应用在赋值,参数,返回和运算操作中,jvm希望在运行时 明确变量的类型,即编译器编译成class文件需要对变量进行类型...

xpp_ba
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部