Javascript 常用语法 Web前端基础
Javascript 和 HTML、CSS一样，是Web前端开发所必须的三个模块。另外，JavaScript也是Vue、Ext、jQuery等框架的基础语言，所以JavaScript的学习是至关重要的。其实，学了C++语言，学了Java，感觉JavaScript的基础语法整理上比较类似于Java，所以那些输入输出选择循环语句的基础语法，就不记下来了，毕竟代码天天在写，也不会忘。
我跟之前总结HTML、CSS一样，同样是站在本科应用层的角度，重点是比较常用的语法搭配，其次是那些有花里胡哨的功能语法，省略那些可以被新功能所替代的旧方法。
HTML部分：点击这里
CSS部分：点击这里
本文目录：
目录
第一部分：最常用的语法
常用调试方法、常用获取HTML组件的八种方法、数据类型、按钮方法绑定、数组/循环、数组的常用方法、字符串常用方法、配合HTML组件
第二部分：其他小功能
定时执行函数、 动态更新时间组件、正则表达式、输入栏提示文本、异常处理、滚动标题、JSON、模拟Java类、使用JS添加HTML组件、表格数据添加
第一部分：最常用的语法
常用调试方法
alert('hello zwz');//弹框
console.log('hello zwz!');//调试窗口
document.getElementById('c').innerHTML = 'hello zwz';//覆盖输出到HTML元素
//不覆盖可以把= 改成 += 即可常用获取HTML组件的八种方法
//以上为HTML
var did = document.getElementById('did');//根据ID查找 唯一
var dclass = document.getElementsByClassName('dclass')[0]; //根据class查找 不唯一
var ddiv = document.getElementsByTagName('input')[0]; //根据标签名查找 不唯一
var dclass2 = document.getElementsByName('dname')[0]; //根据name查找 不唯一
var b = document.querySelector('#did').value; //id
var c = document.querySelector('.dclass').value;//class
var d = document.querySelector('input').value; // 标签
var e = document.querySelectorAll('input')[0].value; //所有的标签集合
数据类型
JavaScript是一种弱类型的语言，在C++中，一个int类型的变量，用%f格式输出，就会出错，反之亦然；这是因为整数和浮点数之间有一条不可逾越的鸿沟（个人理解）。在JavaScript中就不一样了，var就是一个百搭类型，那些整数、浮点数、字符串，甚至对象、数组，通通可以定义。当然可以使用typeof函数来获取当前的数据类型，就像这样：
var a = 1;
var b = 3.14; // num.toFixed(4);保留四位
var c = 'hello zwz!';
var d = ['zwz01','zwz02','zwz03'];
var e = {
'name':'zwz',
'age':18
};
var leixing = typeof(a);
var num = parseFloat(string);//String转Num如果只是var一个变量没有初始化，类型就是undefined；如果为空，就是Null；如果数字计算结果不为数字，那么就是NaN。
按钮方法绑定
function run(){
//运行的代码
}
数组/循环
//一维数组
var arr = ['a1','a2','a3','a4','a5','a6'];
//二维数组
var arr = [
['zwz01','zwz02','zwz03'],
['zwz11','zwz12']
];
alert(arr[0][1]);//调用
//for-in循环
var a = [3,4,5,6,7];
for(var i in a){
document.getElementById('d').innerHTML += i+'
';
}数组的常用方法
字符串常用方法
配合HTML组件
//
var se = document.getElementById('se').value;
//
var form = document.getElementById('fo').lag;//lag是name属性
for(var i = 0 ; i < form.length; i ++){
if(form[i].checked){
console.log(form[i].id);break;//操作
}
form[i].checked = 1; // 全选
if(form[i].checked) //反选1
form[i].checked = 0;
else //反选2
form[i].checked = 1;
}
第二部分：其他小功能
定时执行函数
var temp;
function run(){
console.log('zwz的1秒过去了
');
}
function start(){
temp = window.setInterval('run()',1000);
}
function stop(){
window.clearInterval(temp);
}动态更新时间组件
正则表达式
function run(){
var input = document.getElementById('in').value;
// console.log(typeof(input));
if(!( /^[a-zA-Z]\w{3,15}$/.test(input))){
console.log('输入有误');
}
}
输入栏提示文本
var input = document.getElementById('in');
input.onmouseup = function(){this.focus();}
input.onfocus = function(){this.select();};异常处理
比如我在代码中的alert函数上多写一个t，如果没有异常，就会直接在浏览器调试页面报错，如果有catch语句，则会在id为'd'的HTML元素中打印错误信息。
function run(){
try{
alertt('hello zwz');
}catch(e){
document.getElementById('d').innerHTML = e.message;
}
}滚动标题
实现的原理是每隔一小段时间，把最后一个字母放在最前面，来模拟滚动的效果。
JSON
另外有一种JSON模式需要着重学一下，这个是前端提交到后端必须要转换的格式。
如果在后端的Java类中定义如下：（用var模拟后端Java类）
var a = {
'people':[
{'name':'zwz01','age':'18'},
{'name':'zwz02','age':'19'}
]
};那么，JSON模式是这样的：
var b = '{ "people" : [' +'{ "name":"zwz01" , "age":"18" },' +'{ "name":"zwz02" , "url":"19" }'+']}';
var result1 = typeof(b);//结果为string类型说白了，就是拿大括号 { } 括了一下。这个时候b的数据类型是string字符串类型。
然后我们使用JSON.parse函数转化
var c = JSON.parse(b);
var result2 = typeof(c);//结果为object类型
alert(c.people[0].name);//引用这就说明c是对象类型，是将字符串转化成了对象模型。 也可以直接使用里面的元素
至于对象型转化为字符串，以后有机会再去查一下。
模拟Java类
function People(name,age){
this.name = name;
this.age = age;
this.say = function(){
console.log(this.name + ' is ' +this.age + ' years old!');
}
}
var p1 = new People('zwz01',18);
p1.say();使用JS添加HTML组件
//假设中有一个id为'u'的ul
表格数据添加
XXXX表
学号 姓名 性别
最后编辑日期 2020 年 1 月 30 日