因为要用到vue.js,没学过javascript,刚好现在过一遍

javascript

<script>标签

在html页面中插入javascript,使用<script>标签

<scirpt>
    alert("我的第一个JavaScript");
</script>

#例如在body中

<html>
<body>
    <script>document.write("<h1> APP test </h1>")</script>
</body>
</html>

外部javascript

<html>
<body>
	<script src="app.js"></script>
</body>
</html>

app.js

function myFunction()
{
    document.getElementById("demo").innerHTML="One Javascript function";
}
javascript输出

window.alert()弹出警告框

<html>
<body>
    <script>
        windos.alter(5+6)
    </script>
</body>
</html>    

document.write()方法将内容写到HTML文档中

<html>
<head>
    <meta charset="utf-8">
    <title>APP</title>
</head>

<body>
<script>
    document.write(Date())
</script>
</body>
</html>

innerHTML写入到HTML元素

<html>
<body>
    <script>
        document.getElementById("demo").innerHTML="pargraph"
    </script>
    <p id="demo">
        第一个段落
    </p>
</body>
</html>  

console.log()写入到浏览器的控制台

a = 5;
b = 6;
num = a+b;
console.log(num);
javascript变量
//var关键字,声明变量
var name="jh",name2="cx";
var x,length;
x = 5;
length = 6;
console.log(x);
console.log(length);

//变量必须以字母开头,并对大小写敏感
//变量也可以使用$和_符号最为开头,但是会增加代码的可阅读性
javascript操作符
= + - * / :赋值,加,减,乘,除
== != < > :等于,不等于,小于,大于
% ++ -- :取模,自增,自减
+= -= *= /= %= : x+y,x-y,x*y,x/y,x%y

//逻辑运算符
&& || ! : and(x < 10 && y > 1) 为 true,or(x==5 || y==5) 为 false,not(x==5 || y==5) 为 false
javascript注释
console.log("注释");

//console.log("注释") javascript通过//符号来注释

/*
这是一个
多行注释
*/
javascript数据类型
var length = 16; //number数字
var lastName = "Asolmn"; //String字符串
var name = ['jh','cx']; //Array数组
var person = {firstName:'Asomln',lastName:"Elapse"}; //Object对象按那个
var x=true,y=false; //布尔逻辑值

//数组
var cars = new Array();
cars[0]="test1";
cars[1]="test2";
cars[3]="test3";
//第二种创建方法
var cars = new Arrary("test1","test2","test3");
//第三种创建方法
var cars=['test1','test2','test3'];

//对象,对象使用花括号分隔,以键值的方法定义
var parson = {
    name1:'test1',
    name2:'test2',
    fullName():function(){ return this.name1+" "+this.name2}
};
//对象的寻址
first = person.name1;
second = person.name2;

//访问对象的方法,不加括号代表是对象的属性,输出函数表达式
name = person.fullName(); //
name = person.fullName;
//输出:function(){ return this.name1+" "+this.name2}


//Undefined和Null代表不含有值,可以通过设置变量为Null来清空
javascript语句
//使用分号做为javascript一句语句结束
console.log("world");

//javascript代码块,使用花括号
function myfunction()
{
    pass
}

//如果一行写不下,可以通过\符号进行换行
document.write("Hello \
world");

javascript函数
function myFunction(a,b){
	return a * b;
}
console.log(myFunction(5,6));

//调用带参数的函数
<p>
    try Submit 
</p>
<button onclick="myfunction(a,b)">Submit</button>
<script>
    function myfunction(a,b){
        c = a,b;
        alert("num:"+c);
    }
</script>

//在函数内部var的变量,是局部变量,只能函数内部访问它
//在函数外var的为全局变量,所有脚本和函数都可以访问

javascript事件

HTML事件是发生在HTML元素上面的事情,当在HTML页面中使用JavaScript时

Javascript可以触发这些事件

HTML元素中可以添加事件属性,使用Javascript代码来添加HTML元素。

<some-html-element some-event='javascript代码'>

例子:<button onclick="getElementById('demo').innerHTML=Date()">submit</button>

javascript代码将修改id="demo"元素的内容

<button onclick="this.innerHTML=Date()">New time</button>

常见的HTML事件

onchange HTML元素改变

onclick 用户点击HTML

onmouseover 用户在一个HTML元素上移动鼠标

onkeydown 用户按下键盘按键

onload 浏览器已完成页面的加载

javascript字符串
var string1 = "asolmn";
var string2 = string1[2]; //通过索引访问字符串中的每一个字符

var string1 = "it\'s alright"; //可以通过\符号用来转义在字符串内使用引号

var txt = "dfasdfsjdlgjslfg";
var sln = txt.length; //通过内置属性length来计算字符串长度

/*
特殊字符
\' 单引号
\" 双引号
\\ 反斜杠
\n 换行
\r 回车
\t tab
\b 退格符
\f 换页符
*/

var x = "John";
var y = new String("Jonh");

typeof x //返回的是String
typeof y //返回Object

/*
一些方法
split()把字符串分割为子字符串数组
toLowerCase()转换为小写
toUpperCase()转换为大写
trim()移除字符串首尾空白
*/
javascript if...else语句
if (condition)
{
    //当条件为True时的代码
}

if (time<20)
{
    alert("time小于20");
}

if (condition)
{
    //当条件为True时执行的代码  
}
else
{
 	//当条件为false时执行的代码   
}

if (condition1)
{
    //当条件1为True执行的代码
}
else if (condition2)
{
 	//当条件2为True执行的代码   
}
else
{
    //当条件1和条件2都不为True,执行的代码
}
javascript switch语句
switch(n)
{
    case 1:
        //执行代码快1
        break;
    case 2:
        //执行代码快2
        break;
    default:
        //与case1和case2不同时执行的代码
}
javascript for语句
for (语句1; 语句2; 语句3)
{
    //被执行的代码快
}
//语句1(代码块)循环开始前执行
//语句2 定义运行循环(代码快)的条件
//语句3 在循环(代码块)已被执行之后执行

//例子1:
for (var i=0;i<5;i++)
{
	alert(i);    
}

//通常会使用语句1,初始化循环中所用的变量,但是语句1是可选的
//可以初始化多个,也可以省略
//省略的写法 for (; i<len; i++)
//语句2同样可选,但是如果省略了,必须在循环内提供break
//语句3和语句1是一样的
for (var i=0,len=cars.length; i<len; i++)
{
    document.write(cars[i])
}
javascript while语句
while (条件)
{
    //需要执行的代码
}

//例子
var x,i;
x = 0;
i = 1;
while (i<5)
{
    x += 1;
    alert(x);
    i++;
}

//do/while循环
do
{
    //需要执行的代码
}
while (条件);
//例子
var x,i;
x = 0;
i = 1;
do
{
    x += 1;
    alert(x);
}
while (i<5);
javascript break和continue语句
/*
breack语句用于跳出循环
continue中断寻红中的迭代,如果有指定条件
继续循环中的下一个迭代。
*/
//例子,如果i迭代到5的时候,会执行break语句,跳出循环。
for (var x=0,i=0; i<10; i++)
{
    if (i==5)
        break;
    x += 1;
    console.log(x);
}

//使用continue语句,如果碰到i=5的时候,直接跳过这次迭代
for (var x=0,i=0; i<10; i++)
{
    if (i==5)
        continue;
    x += 1;
    console.log(i);
}

/*
break的作用跳出代码块,所以可以使用于循环和switch等
continue的作用是进入下一个迭代,所以conctinue只能用于循环的代码块
*/
typeof检测变量的数据类型
javascript数据类型
/*
javascript有6种不同的数据类型
string
number
boolean
object
function
symbol
3种对象类型
Object
Date
Array
2种不包含任何值的数据类型
null
undefined (如果var一个变量时,不赋予任何值的时候,使用typeof则会返回undefined)

NaN的数据类型是number
数组,日期,null的数据类型是object
*/

//constructor属性返回所有javascript变量的构造函数
"Asolmn".constructor //返回函数String()
(3.14).constructor //返回函数Number()
true.constructor //返回函数Boolean


//javascript类型转换
//String()可以将数字转换为字符串
var x=19;
String(x);
String(19);

//将日期转换为字符串
Date() //返回字符串
String(new Date()) //将日期对象转换为字符串

//Number()将字符串从转换为数字
Number("19");
var str1="19";
Number(str1);

//一元运算符+
var y = "5";
vara x = +y; //x现在是一个数字

var y = "Asolmn";
var x = +y; //虽然变量不能转换,它仍然是一个数字,但是值为NaN
javascript 正则表达式
/*
语法: /正则表达式主体/修饰符(可选)
*/
var patt = /asolmn/i 
/*
/asolmn是一个正则表达式 i是一个修饰符(搜索不区分大小写)
*/

/*
正则表达式通常用两个字符串方法:search()和replace()
search()用于检索字符串种指定的子字符串,或者检索与正则表达式相匹配的子字符串
replace()用于在字符串中用一些字符串替换另一些字符串,或者替换一个与正则表达式匹配的子串
*/

var str = "Hello Asolmn";
var n = str.search(/Asol/i);
console.log(n);
//Asolmn字符串。在从0开始,第6位上
//输出
6

var str = "Hello Asolmn";
var n = str.search("Asolmn"); //字符串作为参数,会自动转化位正则表达式
console.log(n);
//输出
6 

var str1 = "Visit test1";
var txt = str1.replace(/Elapse/i,"test2");
console.log(txt);
//将test1替换成test2
//输出
Visit test2

正则表达式修饰符

  • i 执行对大小写不敏感的匹配
  • g 执行全局匹配
  • m 执行多行匹配

正则表达式模式

  • [abc] 查找方括号之间任何字符串
  • [0-9] 查找任何从0至9的数字
  • (x|y) 查找任何以|分隔的选项

正则表达式模式

  • \d 查找数字
  • \s 查找空白字符
  • \b 匹配单词边界
  • \uxxx 查找以十六进制数xxx规定的Unicode字符串
  • n+ 匹配任何包含至少一个n的字符串
  • n* 匹配任何包含零个或者多个n的字符串
  • n? 匹配任何包含零个或者一个n的字符串
javascript错误
/*
try语句测试代码块的错误
catch语句处理错误
throw语句创建自定义错误
finally语句在try和catch语句后,无论是否有触发异常,该语句都会执行
*/

try
{
    //异常的抛出
} catch(e){
    //异常的捕获和处理
} finally {
    //结束处理
}

//例子 故意写错addlert,碰到异常后,会自动执行catch语句块中的内容
var txt = "";
function message()
{
    try{
        addlert("Hello World");
    } catch(err){
        alert(txt);
    }
}

//例子 finally无论之前的try和catch中是否产生异常都会执行该代码块
try{
   if (x=="") throw "Null";
} catch(err){
    message.innerHTML="错误";
}
finally{
    alert("test")l;
}
javascript变量可以先使用,在声明
x = 5;
alert(x);
var 5;
javascript严格模式
//使用use strict指令。目的是代码在严格条件下执行,严格模式下不能使用未先声明的变量,写在脚本头部
"use strict";
pass
javascript表单验证

js内容:

function dateform(){
    var name = document.forms['myForm']['fname'].value;
    if ( name==null || name==""){
        alert("input name");
        return false;
    }
    else{
        document.getElementById("demo").innerHTML=name;
        return true
    }
}

html内容

<html>
<head>
    <meta charset="utf-8">
    <title>APP</title>
</head>

<body>
<p>
    输入名字
</p>
<form name="myForm" action="" onsubmit="return dateform()" method="post">
    Name: <input type="text" name="fname">
    <input type="submit" value="submit">
    <p id="demo"></p>
</form>

<script src="app.js"></script>
</body>
</html>