zoukankan html css js c++ java

python之路 JavaScript基础

一、JavaScript简介

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

二、组成部分

ECMAScript，描述了该语言的语法和基本对象

文档对象模型（DOM），描述处理网页内容的方法和接口。

浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口。

三、一些简单案例

注：显示结果请自行测试

1.简单的html输出

<script>
    document.write('<h1>我是你耀哥</h1>')
</script>
此脚本请在开头测试，如果在尾部测试，那么会覆盖整个html页面

2.简单的点击按钮弹出提示

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
    function func(){
        alert('欢迎点击按钮') #alert是JavaScript用来测试用的函数 可以在浏览器中弹出信息
    }
</script>
</head>
<body>
    <button value="按钮" onclick="func()">按钮</button> #当我点击按钮的时候 onclick事件调用函数
</body>
</html>
当我点击按钮的时候，整个页面会弹出欢迎点击按钮信息

3.改变页面元素内容

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
    function  func(){
        var x = document.getElementById('demo');   #获取id
        x.innerHTML='我被改变了';                       #innerHTML是用来改变标签中的内容                    
    }
</script>
</head>
<body>
<p id="demo">我的是你耀哥</p>
<button value="按钮" onclick="func()">按钮</button> #onclick事件调用func函数
</body>
</html>

4.点击改变指定div的背景颜色

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>       #定义样式 高宽100px；颜色是aquamarine；
    #demo{           
        100px;
        height:100px;
        background-color:aquamarine;
    }
</style>
</head>
<body>
    <div id="demo" onclick="func()"></div>
    <script>
        function func(){
            var x = document.getElementById('demo');    #获取id
            x.style.backgroundColor='gray';             #使用style函数改变背景颜色
    </script>
</body>
</html>

5.验证表单，是否输入值

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form>
<p>用户名：</p><input id="demotext" type="text"/>
<p>密 码：</p><input  id="demopass" type="password"/></br>
<button  onclick="func()">提交</button>
</form>
<script>
function func(){
    var x = document.getElementById('demotext').value;
    if(x.length==0){
        alert('用户名不能为空');
    }else{
        alert(x);
    }
    var y = document.getElementById('demopass').value;
    if(y.length==0){
        alert('密码不能为空');
    }else{
        alert(y);
    }
}
</script>
</body>
</html>

四、存在方式

HTML中的脚本必须位于标签之间。

脚本可被放置在 HTML 页面的和部分中。

1.head中存放

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
    alert('我是head中的脚本')
</script>
</head>
<body>
</body>
</html>

2.body中存放

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
    alert('我是body中的脚本')
</script>
</body>
</html>

3.引入外部js文件

<!DOCTYPE html>
<html lang="en">
<body>
<script src="外部的js文件.js"></script>
</body>
</html>

注：
由于Html代码是从上到下执行，如果Head中的js代码耗时严重，就会导致用户长时间无法看到页面，如果放置在body代码块底部，那么即使js代码耗时严重，也不会影响用户看到页面效果，只是js实现特效慢而已。

五、基本语法

1.注释

单行注释 使用 “//”

//            var x = document.getElementById('demo');

多行注释 使用 “/*和*/结尾”
 /*   
function func(){
    var x = document.getElementById('demotext').value;
    if(x.length==0){
        alert('用户名不能为空');
    }else{
        alert(x);
    }*/

2.变量

变量定义要求：

1）.变量必须以字母开头
2）.变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
3）.变量名称对大小写敏感（y 和 Y 是不同的变量）

变量声明：

var 变量名 = 赋值
var 定义的是局部变量 js中用的最多的方法
如果不加var 那么是全局变量。js用的较少。
var a=1,b=2,c=3,

在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。

3.数据类型

1）.数字类型

var a = 1；
var b = 1.1；

2）.布尔类型

布尔（逻辑）只能有两个值：true 或 false。  
var x=true
var y=false

3）数组类型

第一种：
var arr=new Array();
arr[0]="mayun";
arr[1]="mahuateng";
arr[2]="liuyao";
第二种：
var arr=['mayun','mahuateng','liuyao'];
第三种：
var arr=new Array('mayun','mahuateng','liuyao');
用for循环打印数组内容
<script>
    var arr=new Array();
    arr[0]="mayun";
    arr[1]="mahuateng";
    arr[2]="liuyao";
    for(i=0;i<arr.length;i++){
        alert(arr[i])
    }
</script>

4）undefined

undefined表示未定义值

5）null类型

null是一个特殊值

5)字符串类型

var name = 'liuyao';
var name = String("liuyao");
var name_age = String(18);

6)字典

var items = {'k1': v2, 'k2': 'v2'}

4.运算符

运算符 = 用于赋值。

运算符 + 用于加值。

1.算术运算符

2.赋值运算符

案例:

字符串拼接打印
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
    txt1="liu yao";
    txt2="  da sha bi";
    txt3=txt1+txt2;
    alert(txt3)
</script>
</body>
</html>

3.比较运算符

4.逻辑运算符

4.条件语句

1）if else

if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
if...else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
if...else if....else 语句 - 使用该语句来选择多个代码块之一来执行

语法：

if (条件)
{
只有当条件为 true 时执行的代码
}
或者：
if (条件){
只有当条件为 true 时执行的代码
}

案例：

<script>
var num2 = 3
if(num2>num1){
    alert('num1大于num2');
}else{
    alert('num2小于num1');
}
</script>

2) if else if else

语法：

if (条件 1)
{
当条件 1 为 true 时执行的代码
 }
else if (条件 2)
{
当条件 2 为 true 时执行的代码
}
else
{
当条件 1 和 条件 2 都不为 true 时执行的代码
}

案例：

<script>
var num = 5;
if(num>6){
    alert('num大于6');
}else if(num<7){
    alert('num小于7');
}else{
    alert('以上都不对');
}

3)switch语句

switch 语句来选择要执行的多个代码块的其中一个。

语法：

switch(n)
{
case 1:
执行代码块 1
break;
case 2:
执行代码块 2
break;
default:
n   与 case 1 和 case 2 不同时执行的代码
}

首先设置表达式 n（通常是一个变量）。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配，则与该 case 关联的代码块会被执行。请使用 break 来阻止代码自动地向下一个 case 运行。

案例：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input  id="demo" type="text"/>
<button  onclick="func()">数字查询</button>
<script>
    function func(){
        var x = document.getElementById('demo').value;
        var y = Number(x);
        switch(y){
            case 1:
                alert('你输入的是1');
                break;
            case 2:
                alert('你输入的是2');
                break;
            case 3:
                alert('你输入的是3');
                break;     
            default:
            alert('你输入的数不存在');       
        }
    }

</script>

</body>
</html>

4）循环语句

JavaScript 支持不同类型的循环：

for - 循环代码块一定的次数

for/in - 循环遍历对象的属性

语法：

for (语句 1; 语句 2; 语句 3)
{
 被执行的代码块
}
语句 1 在循环（代码块）开始前执行
语句 2 定义运行循环（代码块）的条件
语句 3 在循环（代码块）已被执行之后执行

案例：

循环打印十个数字
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
    for(i=0;i<10;i++){
        document.write("<h1>"+i+"</h1>");
    }   
</script>
</body>
</html>

循环数组打印内容
<!DOCTYPE html>
<html>  
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
    var key = ['1','2','3','4','5'];
    for(i in key){
        document.write('<h1>'+i+'</h1>');
    }   
</script>
</body>
</html>

案例：循环数组

var names = ["liuyao", "mayun", "aoteman"];


// 数组：方式一
for(var i=0;i<names.length;i++){
    console.log(i);
    console.log(names[i]);
}


// 数组：方式二
for(var index in names){
    console.log(index);
    console.log(names[index]);
}

var names = {"name": "liuyao", "age": 18};


// 字典：方式一
for(var index in names){
    console.log(index);
    console.log(names[index]);
}

5）while语句

while - 当指定的条件为 true 时循环指定的代码块

do/while - 同样当指定的条件为 true 时循环指定的代码块

语法：

while (条件)
{
需要执行的代码
}

案例：

循环打印
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
    var i = 1;
    while(i<5){
        document.write('<h1>'+i+'</h1>');
        i++;
    }
</script>
</body>
</html>

do/while 循环是 while 循环的变体。该循环会执行一次代码块，在检查条件是否为真之前，然后如果条件为真的话，就会重复这个循环。

语法：

do
 {
 需要执行的代码
 }
while (条件);

6）break和Continue 语句

break 语句可用于跳出循环。如果之后有代码，那么继续执行：

案例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
    for (i=0;i<10;i++)
    {
        if (i==3)
        {
            document.write('break跳出了');
        break;
    }
        document.write('<h1>'+i+'</h1>');
    }
</script>
</body>
</html>

Continue 语句
continue 语句中断循环中的迭代，如果出现了指定的条件，然后继续循环中的下一个迭代。

案例：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
for (i=0;i<10;i++)
{
    if (i==3)
    {
        document.write('break跳出了');
    continue;
}
    document.write('<h1>'+i+'</h1>');
}
</script>
</body>
</html>

5.异常操作

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

语法：

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

案例：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
try {
    adddlert("我是刘耀");
    }
catch(err){
    alert('错误')
}
</script>
    </body>
</html>

6.函数

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

案例：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button onclick="func()">点击按钮执行函数</button>
<script>
function func(){
    alert('func的函数')
}
</script>
</body>
</html>

语法

函数就是包裹在花括号中的代码块，前面使用了关键词 function：
function functionname()
{
这里是要执行的代码
}
注：提示：JavaScript 对大小写敏感。关键词 function 必须是小写的，
    并且必须以与函数名称相同的大小写来调用函数。

不带参数函数：

function func(){
    alert('func的函数')
}

自执行函数：

(function(arg){
    alert(arg);
})('123');

调用带参数函数：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button onclick="func(1,2)">点击执行</button>
<script>
    function func(num1,num2){

        alert(num1);
        alert(num2);
    }

</script>
</body>
</html>

带有返回值的函数：

在使用 return 语句时，函数会停止执行，并返回指定的值。

<!DOCTYPE html>
<html>  
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
function func()
{
    var x = 5;
    return x;
}
var me = func();
alert(me);
</script>
</body>
</html>

7.js标准库

JavaScript 中的所有事物都是对象：字符串、数值、数组、函数..

1.数组对象

创建一个数组：

var arr = ['liu','yao','18']

length属性可设置或返回数组中元素的数目。

<script>
var arr = ['liu','yao','18'];
num = arr.length;
alert(num);
</script>
结果：3

constructor 属性返回对创建此对象的数组函数的引用。

<body>
<script>
var arr = ['liu','yao','18'];
con = arr.constructor;
alert(con);
</script>

concat()
方法用于连接两个或多个数组。

增加新元素
<script>
var arr = ['liu','yao','18'];
document.write(arr.concat('1','2','3'));
</script>
两个数组链接
<script>
var num1 = ['1','2','3'];
var num2 = ['4','5','6'];
document.write(num1.concat(num2));
</script>

join()方法用于把数组中的所有元素放入一个字符串。可以按照分隔符存放

<script>
var arr = new Array(3);
arr[0] = "liu";
arr[1] = "yao";
arr[2] = "yao";
document.write(arr.join())
</script>
按照分隔符
<script>
var arr = new Array(3);
arr[0] = "liu";
arr[1] = "yao";
arr[2] = "yao";
document.write(arr.join('----'))
</script>
显示结果：
liu----yao----yao

pop()删除并返回数组的最后一个元素

<script>
var num = ['liu','yao','18'];
document.write(num.pop())
</script>

push()向数组的末尾添加一个或更多元素，并返回新的长度。

<script>
var num = ['liu','yao','18'];
document.write(num.push('22102107'))
</script>

reverse()颠倒数组中元素的顺序。

<script>
var num = ['liu','yao','18'];
document.write(num.reverse())
</script>

shift() 删除并返回数组的第一个元素

<script>
var num = ['liu','yao','18'];
document.write(num.shift())
</script>

unshift() 向数组的开头添加一个或更多元素，并返回新的长度。

<script>
    var arr = ['1','2','3'];
    alert(arr.unshift('4'));
</script>

slice()方法用于提取原数组的一部分，返回一个新数组，原数组不变。

它的第一个参数为起始位置（从0开始），第二个参数为终止位置（但该位置的元素本身不包括在内）。
如果省略第二个参数，则一直返回到原数组的最后一个成员。

<script>
var arr = ['1','2','3','4','5','6','7'];
    alert(arr.slice(1,3));
</script>

splice方法用于删除原数组的一部分成员，并可以在被删除的位置添加入新的数组成员。它的返回值是被删除的元素。该方法会改变原数组。

splice的第一个参数是删除的起始位置，第二个参数是被删除的元素个数。如果后面还有更多的参数，则表示这些就是要被插入数组的新元素。

// 格式
arr.splice(index, count_to_remove, addElement1, addElement2, ...);

<script>
var arr = ['1','2','3','4','5','6','7'];
alert(arr.splice(1,2,a,b));
</script>

sort() 对数组的元素进行排序

var arr = ['1','2','3'];
alert(arr.sort())

valueOf()方法返回数组本身。

var a = [1, 2, 3];
a.valueOf();

toString 方法返回数组的字符串形式。

var a = [1, 2, 3];
a.toString() 

var a = [1, 2, 3, [4, 5, 6]];
a.toString()

2.字符串对象

创建

var s = new String("abc");

new String("abc")

将任意类型的值转为字符串。

String(true) 
String(5)

fromCharCode()。该方法根据Unicode编码，生成一个字符串。

<script>
alert(String.fromCharCode(104, 101, 108, 108, 111));
</script>

charAt方法返回一个字符串的给定位置的字符，位置从0开始编号。

<script>
var arr = 'abcde';
alert(arr.charAt(1));
</script>

charCodeAt方法返回给定位置字符的Unicode编码（十进制表示）。

<script>
var arr = 'abcde';
alert(arr.charCodeAt(1));
</script>

concat方法用于连接两个字符串。

<script>
var s1 = 'abc';
var s2 = 'def';
alert(s1.concat(s2))；
</script>

substring()方法的第一个参数表示子字符串的开始位置，第二个位置表示结束结果。因此，第二个参数应该大于第一个参数。如果出现第一个参数大于第二个参数的情况，substring方法会自动更换两个参数的位置。

<script>
var arr = 'abcde';
alert(arr.substring('1','2'));
</script>

substr方法的第一个参数是子字符串的开始位置，第二个参数是子字符串的长度。

<script>
var arr = 'abcdefghi';
alert(arr.substr('2','5'));
</script>

slice方法的第一个参数是子字符串的开始位置，第二个参数是子字符串的结束位置。与substring方法不同的是，如果第一个参数大于第二个参数，slice方法并不会自动调换参数位置，而是返回一个空字符串。

<script>
var arr = 'abcdefghi';
alert(arr.slice('2','5'));
</script>

indexOf 和 lastIndexOf 方法

indexOf从字符串头部开始匹配，lastIndexOf从尾部开始匹配。

<script>
var arr = 'abcdefghi';
alert(arr.indexOf('b'));
</script>

<script>
var arr = 'abcdefghi';
alert(arr.lastIndexOf('h'));
</script>

toLowerCase 和 toUpperCase 方法

toLowerCase用于将一个字符串转为小写，toUpperCase则是转为大写。

<script>
var arr = 'liuyao';
alert(arr.toUpperCase());
</script>

<script>
var arr = 'LIUYAO';
alert(arr.toLowerCase());
</script>

trim()方法去除空格

<script>
var x = ' liuyao ';
document.write('|');
document.write(x);
document.write('|');
document.write(x.trim());#去除两边空格
</script>

查找和替换
match方法

match方法返回一个数组，成员为匹配的第一个字符串。如果没有找到匹配，则返回null。返回数组还有index属性和input属性，分别表示匹配字符串开始的位置（从0开始）和原始字符串。

<script>
var matches = "cat, bat, sat, fat".match("at");
document.write(matches);
document.write(matches.index);
document.write(matches.input);
</script>

search方法

search方法的用法等同于match，但是返回值为匹配的第一个位置。如果没有找到匹配，则返回-1。

<script>
var matches = "cat, bat, sat, fat".search("at");
document.write(matches);
</script>

replace方法

replace方法用于替换匹配的子字符串，一般情况下只替换第一个匹配（除非使用带有g修饰符的正则表达式）。

<script>
var matches = "cat, bat, sat, fat".replace("at","liuyao");
document.write(matches);
</script>

split方法

split方法按照给定规则分割字符串，返回一个由分割出来的各部分组成的新数组。

<script>
var matches = "cat|bat,|sat|fat".split("|");
document.write(matches);
</script>

Date对象

提供的日期和时间的操作接口。它有多种用法。

Date对象可以直接调用，返回一个当前日期和时间的字符串

<script>
 document.write(Date());
</script>

等待更新。。。

JSON

JavaScript Object Notation的缩写，它是一种数据交换格式。

在JSON中，一共就这么几种数据类型：

number： 和JavaScript的number完全一致；
boolean：就是JavaScript的true或false；
string：就是JavaScript的string；
null：  就是JavaScript的null；
array： 就是JavaScript的Array表示方式——[]；
object：就是JavaScript的{ ... }表示方式。

1.序列化

<script>
    var info = {
    name: '刘耀',
    age: 18,
    gender: true,
    height: 1.65,
    grade: null,
    'middle-school': 'IT',
    skills: ['JavaScript', 'Java', 'Python', 'Lisp']
};
    document.write(JSON.stringify(info));
</script>

结果：
{"name":"刘耀","age":18,"gender":true,"height":1.65,"grade":null,"middle-school":"IT","skills":["JavaScript","Java","Python","Lisp"]}

2.反序列化

JSON.parse('[1,2,3,true]'); 
JSON.parse('{"name":"刘耀","age":18}'); 
JSON.parse('true'); 
JSON.parse('123.45');

8.面向对象编程

面向对象的语言有一个标志，即拥有类的概念，抽象实例对象的公共属性与方法，基于类可以创建任意多个实例对象，一般具有封装、继承、多态的特性！但 JS中对象与纯面向对象语言中的对象是不同的，ECMA标准定义JS中对象：无序属性的集合，其属性可以包含基本值、对象或者函数。可以简单理解为JS的对象是一组无序的值，其中的属性或方法都有一个名字，根据这个名字可以访问相映射的值（值可以是基本值/对象/方法）。

基于Object对象

<script>
var person = new Object();
person.name = 'liuyao';
person.age = 18;
person.getName = function(){
    return this.name;
};
var x = person.name;
alert(x);
</script>

1.工厂模式创建

<script>
function createPerson(name, age, job) {
    var o = new Object();
    o.name = name;
    o.age = age;
    o.job = job;
    o.getName = function () {
        return this.name;
    };
    return o;//使用return返回生成的对象实例
}

var x = createPerson('liuyao','18','IT'); #实例化
alert(x.name);
</script>

注：创建对象交给一个工厂方法来实现，可以传递参数，但主要缺点是无法识别对象类型，
因为创建对象都是使用Object的原生构造函数来完成的。

2、构造函数模式

<script>
function Person(name,age,job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.getName = function () {
        return this.name;
    }
}
obj = new Person('liuyao','age','job');
document.write(obj.name+'</br>');
document.write(obj.age+'</br>');
document.write(obj.job+'</br>');
</script>

用自定义的构造函数（与普通函数一样，只是用它来创建对象），定义对象类型（如：Person）的属性和方法。它与工厂方法区别在于：

没有显式地创建对象
直接将属性和方法赋值给this对象；
没有return语句；
此外，要创建Person的实例，必须使用new关键字，以Person函数为构造函数，传递参数完成对象创建；实际创建经过以下4个过程：

创建一个对象

将函数的作用域赋给新对象（因此this指向这个新对象，如：person1）

执行构造函数的代码

返回该对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .modal{
            /*display: none;*/
            400px;
            height:400px;
            background-color:gainsboro;
            position: fixed;
            top:50%;
            left: 50%;
            margin-left:-200px;
            margin-top:-200px;
        }
        .shadow{

            /*display: none;*/
            background-color:black;
            position: fixed;
            top:0;
            right:0;
            bottom:0;
            left:0;
            opacity:0.6;

        }
    </style>
</head>
<body>
    <input  onclick="preview()" type="button" value="添加" />
    <div id="a1" class="shadow" style="display: none;"></div>
    <div id="a2" class="modal" style="display: none;">
        <input type="text" />
        <input type="text" />
        <input type="text" />
        <input type="text" />
        <input type="submit" value="确定" />
        <input type="button" onclick="qx()" value="取消" />
    </div>
    <script>
        function preview(){
            if(document.getElementById("a1").style.display=='none')
                { document.getElementById("a1").style.display='';
                document.getElementById("a2").style.display='';}
            }
        function qx(){
            if (document.getElementById("a1").style.display=='')
            {document.getElementById("a1").style.display='none';
            document.getElementById("a2").style.display='none';}
        }
    </script>


</body>
</html>

对话框

查看全文

相关阅读:
FEniCS 1.1.0 发布，计算算术模型
 Piwik 1.10 发布，增加社交网站统计
 淘宝褚霸谈做技术的心态
 CyanogenMod 10.1 M1 发布
 Druid 发布 0.2.11 版本，数据库连接池
 GNU Gatekeeper 3.2 发布
 Phalcon 0.9.0 BETA版本发布,新增大量功能
 EUGene 2.6.1 发布，UML 模型操作工具
 CVSps 3.10 发布，CVS 资料库更改收集
 Opera 移动版将采用 WebKit 引擎

原文地址：https://www.cnblogs.com/zhangkui/p/5789912.html