最近做项目和面试,发现了很多从前的不足,以为Java就是Java基础和框架,忽视了对前端知识的重视,在开发的过程中遇到了很多的问题。所有接下来的一周里,我会总结Html,CSS,JavaScript,Jquery,Bootstrap和layui。关于vue的总结放在日后有空的时候。这篇主要是总结JavaScript的语法和使用,具体的使用可以参考W3School!
语法
首先,我们要了解一下常用的标签和格式:
<script> 标签:在 HTML 中,JavaScript 代码必须位于 <script> 与 </script> 标签之间。
<head> 或 <body> 中的 JavaScript
可以在 HTML 文档中放置任意数量的脚本,脚本可被放置与 HTML 页面的 <body>和<head> 部分中。把<script>放在body结尾或则做成.js文件可以加快页面的加载速度。
JavaScript 能够以不同方式“显示”数据:
使用 window.alert() 写入弹出层,会弹出一个框显示数据;
使用 document.write() 写入 HTML 输出document.write(5 + 6);
在 HTML 文档完全加载后使用 document.write() 将删除所有已有的 HTML ,一般测试的时候使用;
使用 innerHTML 写入 HTML 元素,JavaScript 可使用 document.getElementById(id) 方法。
id 属性定义 HTML 元素。
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>
使用 console.log() 写入浏览器控制台,使用较少。
JavaScript 语句由以下构成:值、运算符、表达式、关键词和注释。如上面的代码,告诉页面在id为demo的地方输出一个值11;分号分隔 JavaScript 语句;js同样会忽略掉空格;代码太长的话可以在中间的运算符进行折中;{------}代码块的作用是定义一同执行的语句。下面是常见的关键字和作用,有的作用和Java中的关键字作用差不多:
JavaScript的语法格式没有Java中那么严谨,比如小数的使用,变量的赋值都比较随意,字符串单双引号都可以。
JavaScript 使用 var 关键词来声明变量关键词,告知浏览器创建新的变量,数字不需要加引号,加引号的会被视为字符串类型,未申明的没有值或者是undefined
,如果值是 undefined,typeof返回的类型也是 undefined。" "空串不是undefined,是String。
= 号用于为变量赋值;使用算数运算符(+ - * /)来计算值。
标识符用于命名变量(以及关键词、函数和标签),标识符对大小写敏感,首字符必须是字母、下划线(-)或美元符号($),连串的字符可以是字母、数字、下划线或美元符号,提示:数值不可以作为首字符,遵循小写开头的驼峰式命名法。
双斜杠 // 或 /* 与 */ 之间的代码被视为注释:分为单行和多行的习惯。
var x = "8" + 3 + 5; x = 835;
var x = 3 + 5 + "8"; x = 88;
其他的运算符可以参考Java,运算符的规则基本上大同小异。
JavaScript 变量能够保存多种数据类型:数值、字符串值、数组、对象等等:
var length = 7; // 数字
var lastName = "Gates"; // 字符串
var cars = ["Porsche", "Volvo", "BMW"]; // 数组
var x = {firstName:"Bill", lastName:"Gates"}; // 对象
var x = true;
var y = false;
布尔值只有两个值:true 或 false。
JavaScript 对象用花括号来书写:对象属性是 name:value 对,由逗号分隔,下面的person是一个对象{ }里的是对象的属性值。
var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};
函数
JavaScript的基本语法大概就是这些了,下面要学习一个比较重要的知识点,就是他的函数。
JavaScript 函数通过 function 关键词进行定义,其后是函数名和括号 (),函数名与变量名相同。函数的优点和好处就不多说了。
function name(参数 1, 参数 2, 参数 3) {
要执行的代码
}
//计算两个数的和
var z = add(10,20);
function add(x,y){
return x+y;
}
局部变量:在 JavaScript 函数中声明的变量,会成为函数的局部变量,局部变量只能在函数内访问。由于局部变量只能被其函数识别,因此可以在不同函数中使用相同名称的变量。局部变量在函数开始时创建,在函数完成时被删除。
function myFunction() {
var carName = "Volvo";
}
访问对象属性两种方式访问属性:objectName.propertyName 或者 objectName[“propertyName”];
访问对象方法如下:objectName.methodName() 实例 name = person.fullName()。
HTML 事件
可以是浏览器或用户做的某些事情。这个等后期总结HTML还会再说。
<p id="demo"></p>
<button onclick='document.getElementById("demo").innerHTML=Date()'>现在的时间是?</button>
特殊字符:避免字符串显示不完全的解决方法是,使用 \ 转义字符。
var y = "中国是瓷器的故乡,因此 china 与"China(中国)"同名。"
var x = "中国是瓷器的故乡,因此 china 与\"China(中国)\"同名。"
常用的字符串方法:
length 属性返回字符串的长度:
indexOf() 方法返回字符串中指定文本首次出现的索引(位置):
lastIndexOf() 方法返回指定文本在字符串中最后一次出现的索引:
如果未找到文本, indexOf() 和 lastIndexOf() 均返回 -1,两种方法都接受作为检索起始位置的第二个参数。
search() 方法搜索特定值的字符串,并返回匹配的位置:
有三种提取部分字符串的方法:
slice(start, end)
substring(start, end)
substr(start, length)
slice() 提取字符串的某个部分并在新字符串中返回被提取的部分,该方法设置两个参数:起始索引(开始位置),终止索引(结束位置,如果某个参数为负,则从字符串的结尾开始计数。
substring() 类似于 slice(),不同之处在于 substring() 无法接受负的索引。
replace() 方法用另一个值替换在字符串中指定的值:
var n = str.replace("Microsoft", "W3School");
如需执行大小写不敏感的替换,请使用正则表达式 /i(大小写不敏感):
如需替换所有匹配,请使用正则表达式的 g 标志(用于全局搜索):
var n = str.replace(/MICROSOFT/i, "W3School");
var n = str.replace(/Microsoft/g, "W3School");
通过 toUpperCase() 把字符串转换为大写:
concat() 连接两个或多个字符串:
trim() 方法删除字符串两端的空白符:
数值
JavaScript 数值始终是 64 位的浮点数;NaN 属于 JavaScript 保留词,指示某个数不是合法数;尝试用一个非数字字符串进行除法会得到 NaN(Not a Number);
常用的方法
toString() 以字符串返回数值,valueOf() 以数值返回数值;
var x = 123;
x.toString(); // 从变量 x 返回 123
(123).toString(); // 从文本 123 返回 123
(100 + 23).toString(); // 从表达式 100 + 23 返回 123
toFixed() 返回字符串值,它包含了指定位数小数的数字:
var x = 9.656;
x.toFixed(0); // 返回 10
x.toFixed(2); // 返回 9.66
x.toFixed(4); // 返回 9.6560
x.toFixed(6); // 返回 9.656000
toPrecision() 返回字符串值,它包含了指定长度的数字:
var x = 9.656;
x.toPrecision(); // 返回 9.656
x.toPrecision(2); // 返回 9.7
x.toPrecision(4); // 返回 9.656
x.toPrecision(6); // 返回 9.65600
三种 JavaScript 方法可用于将变量转换为数字:
Number() 方法,返回数字,由其参数转换而来。
parseInt() 方法,解析其参数并返回浮点数。
parseFloat() 方法,解析其参数并返回整数。
数组:
创建方法:
var cars = [
"Saab",
"Volvo",
"BMW"
];
var cars = new Array("Saab", "Volvo", "BMW");
var first = cars[0];
length 属性返回数组的长度(数组元素的数目);
遍历数组的最安全方法是使用 “for” 循环:
也可以使用 Array.foreach() 函数:
var fruits, text;
fruits = ["Banana", "Orange", "Apple", "Mango"];
text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";
function myFunction(value) {
text += "<li>" + value + "</li>";
}
向数组添加新元素的最佳方法是使用 push() 方法:
数组的方法
toString() 把数组转换为数组值(逗号分隔)的字符串,
join() 方法也可将所有数组元素结合为一个字符串。
pop() 方法从数组中删除最后一个元素:
push() 方法(在数组结尾处)向数组添加一个新的元素:
shift() 方法会删除首个数组元素,并把所有其他元素“位移”到更低的索引,返回被“位移出”的字符串;
unshift() 方法(在开头)向数组添加新元素,并“反向位移”旧元素:
splice() 方法可用于向数组添加新项:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");
亲自试一试
第一个参数(2)定义了应添加新元素的位置(拼接)。
第二个参数(0)定义应删除多少元素。
其余参数(“Lemon”,“Kiwi”)定义要添加的新元素。
splice() 方法返回一个包含已删除项的数组:
够使用 splice() 在数组中不留“空洞”的情况下移除元素:
具体的数组和遍历以及数组的排序更多方法参考:
日期
var d = new Date();
new一个对象,然后赋值给他;
Math方法和Java的很像,学过看看就好了。
Math.floor(Math.random() * 10) + 1; // 返回 1 至 10 之间的数
这几个都是和Java语法大同小异,直接跳过
JavaScript 数据类型
JavaScript 中有五种可包含值的数据类型:
字符串(string)
数字(number)
布尔(boolean)
对象(object)
函数(function)
有三种对象类型:
对象(Object)
日期(Date)
数组(Array)
同时有两种不能包含值的数据类型:
null
undefined
正则表达式***比较重要
test()它通过模式来搜索字符串,然后根据结果返回 true 或 false。
exec() 方法是一个正则表达式方法,它通过指定的模式(pattern)搜索字符串,并返回已找到的文本。如果未找到匹配,则返回 null。
异常
try 语句使您能够测试代码块中的错误。
catch 语句允许您处理错误。
throw 语句允许您创建自定义错误。
finally 使您能够执行代码,在 try 和 catch 之后,无论结果如何。
Let关键字可以让全局变量在局部方法中改变,完成后局部变量销毁,全局变量恢复;
var x = 10;
// 此处 x 为 10
{
let x = 6; // 此处 x 为 6,同时let可以用于for方法等{...}中
}
// 此处 x 为 10
通过 let 关键词定义的全局变量不属于 window 对象;
关键字 const 有一定的误导性,它没有定义常量值,它定义了对值的常量引用。
JavaScript 表单验证
js的表单可以给程序省去很多代码,例如没用使用js需要提交到后台验证,加一个js的话,可以直接在前台就进行判断提醒。
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("必须填写姓名");
return false;
}
}
在html中加一个属性required可以直接提示未填写的表单,不适用于 Internet Explorer 9 或更早的版本。具体的input属性查看html。
在 JavaScript 中,几乎“所有事物”都是对象。
布尔是对象(如果用 new 关键词定义,但是一般不建议)
数字是对象(如果用 new 关键词定义,但是一般不建议)
字符串是对象(如果用 new 关键词定义,但是一般不建议)
日期永远都是对象
算术永远都是对象
正则表达式永远都是对象
数组永远都是对象
函数永远都是对象
对象永远都是对象
使用对象字面量
这是创建对象最简答的方法,使用对象文字,您可以在一条语句中定义和创建对象。对象文字指的是花括号 {} 中的名称:值对(比如 age:62)。
下面的例子创建带有四个属性的新的 JavaScript 对象:
var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};
var person = {
firstName:"Bill",
lastName:"Gates",
age:62,
eyeColor:"blue"
};
使用 JavaScript 关键词 new,下面的例子也创建了带有四个属性的新的 JavaScript 对象:
var person = new Object();
person.firstName = "Bill";
person.lastName = "Gates";
person.age = 50;
person.eyeColor = "blue";
上面的两个例子结果是一样的。无需使用 new Object()。出于简易性、可读性和执行速度的考虑,请使用第一种创建方法(对象文字方法)。
for…in 循环中的代码块会为每个属性执行一次。循环对象的属性:
var person = {fname:"Bill", lname:"Gates", age:62};
for (x in person) {
txt += person[x];
}
JavaScript call() 方法
call() 方法是预定义的 JavaScript 方法,它可以用来调用所有者对象作为参数的方法,通过 call(),您能够使用属于另一个对象的方法。本例调用 person 的 fullName 方法,并用于 person1;
var person = {
fullName: function() {
return this.firstName + " " + this.lastName;
}
}
var person1 = {
firstName:"Bill",
lastName: "Gates",
}
var person2 = {
firstName:"Steve",
lastName: "Jobs",
}
person.fullName.call(person1); // 将返回 "Bill Gates"
具体的js方法使用和介绍就不过多描述,前面也写了,不会的可以参考
js的一部分总结就到此结束了,其他的jquery和json内容将会写新的一篇。