js:
js的三种形式:
<!-- 事件:就是用户的操作或者动作,就是js被调用的时机;如:单机事件,双击事件 -->
<!-- 1.事件定义式:在定义事件时直接写js -->
<input type="button" value="btn1" οnclick="alert('点我干嘛')"/>
<!-- 2.嵌入式:在script标签内写js该标签可以写在网页的任意位置 -->
//js注释和java一样/**/
/*1.js中的函数都是公有的因此不用修饰符修饰*/
/*2.js中的函数不用声明返回值类型*/
function f2(){
//js中单引号和双引号一样
alert("点你咋啦");}
<!-- 3.文件调用式:在js文件内写js -->
<script src="my.js"></script>

js中:
//直接所写的代码有两种情况
//1.定义函数,该函数是在页面加载后用户点击按钮时调用的.
//2.直接书写js,这样的js是在页面加载时直接调用的,其调用的时机甚至比body还早.有可能出现某些标签获取为为定义状态;
//alert("谁让你打开的");
console.log("控制台打印一下");
//1..声明变量并输出到浏览器控制台
var x;
console.log(x);
x = 5;
console.log(x);
x = "你妹";
console.log(x);
var y = 6;
console.log(y);
//2..数据类型
var s = "hello";
var n = 3.14;
var b = true;
console.log(s);
console.log(n);
console.log(b);
//3..隐式转换
console.log(s+n);
console.log(s+b);
console.log(n+b);
console.log(b+b);
//4..强制转换
console.log(parseInt(3.14));
console.log(parseInt("5.63"));
console.log(parseInt("zxc"));
console.log(parseInt(""));
//5..类型判断
console.log(typeof(s));
console.log(typeof(n));

console.log(isNaN(56));
console.log(isNaN("56"));
console.log(isNaN("a56"));
console.log(isNaN("zxc"));
console.log(isNaN(parseInt("")));
//6.运算符
console.log(5=="5");
console.log(5==="5");
//7.条件
//js可以用任何数据做条件,当以非boolean做条件时,空值等价于false,非空值等价于true
//空值:0,null,"",NaN,undefined
//这样设计的目的,时为了简化判断的逻辑.
var k = 0;
if(k){console.log("ok");}
var w = 6;
w && console.log("好");

//根据id获取标签
var input = document.getElementById("num");
js调试技巧:
1.看报错信息(在浏览器控制台看)
2.打桩(跟踪程序执行的过程,查看关键步骤变量的值)
3.排除法(删除一半代码保留一半代码看是否报错,用于定位问题)

js中api整理:
//1.String对象:主要的方法和Java一样,看看手册
//2.Number对象
var n = 3.1415926;
console.log(n.toFixed(3));
//3.Array对象
//1)如何创建数组
var a1 = ["zhangsan",25,false];
console.log(a1[0]);
var a2 = new Array();
a2.push("lisi");
a2.push(28);
a2.push(true);
console.log(a2[1]);
//结论:无论用什么方式创建出来的数组都一样,
//它们都是Object数组,可以存任意类型的数据.
//2.倒转方法
var arr = [5,12,8,1,6,4,7];
arr.reverse();
console.log(arr);
//3.排序方法
//由于js中的数组都是Object数组,所以:它默认按照字符串由小到大进行排序.
arr.sort();
console.log(arr);
arr.sort(function(a,b){
return a-b;
});
console.log(arr);
//4.Math--和Java相似,看看手册
//5.Date
//1)如何创建日期对象
var d1 = new Date();
console.log(d1);
var d2 = new Date("2017/10/01 10:00:00");
console.log(d2);
//2)如何格式化日期
console.log(d1.toLocaleDateString());
console.log(d1.toLocaleTimeString());
//3)读写时间分量
var y = d1.getFullYear();
var m = d1.getMonth()+1;
var d = d1.getDate();
var h = d1.getHours();
var mm = d1.getMinutes();
var s = d1.getSeconds();
var now = y+"年"+m+"月"+d+"日 "+h+"时"+mm+"分"+s+"秒";
console.log(now);
//6.RegExp
//1)如何创建正则对象
var str = "you can you up,no can no bb.";
var reg = /no/;
//2)正则对象的方法:test
//检测字符串内是否包含和正则相匹配的子串
console.log(reg.test(str));
//3)正则对象的方法:exec
//普通模式:
//从字符串内找出与正则相匹配的第1个子串
console.log(reg.exec(str));
//全局模式:
//第1次调用,则从字符串内找出与正则相匹配的第1个子串
//第n次调用,则从字符串内找出与正则相匹配的第n个子串
reg = /no/g;
console.log(reg.exec(str));
console.log(reg.exec(str));
console.log(reg.exec(str));
console.log(reg.exec(str));
//4)字符串中支持正则的方法
//replace,match,search
//看看手册
//7.Function对象
//声明函数,即定义函数对象
function sum() {
var s = 0;
if(arguments.length) {
for(var i=0;i<arguments.length;i++) {
s += arguments[i];
}
}
return s;
}

//onload是页面加载事件,在页面加载完成时,由浏览器自动触发.
window.onload = function(){
//alert(1);
//1.读取节点的名称及类型
var p1 = document.getElementById("p1");
console.log(p1.nodeName);
console.log(p1.nodeType);
console.log(document.nodeName);
console.log(document.nodeType);
//2.读写节点的内容
//双标签中间的文本是内容,如<a>内容</a>
//innerHTML(带标签)
var p2 = document.getElementById("p2");
console.log(p2.innerHTML);
p2.innerHTML = "2.DOM操作包含<u>查询</u>节点";
//innerText(忽略标签)
var p3 = document.getElementById("p3");
console.log(p3.innerText);
p3.innerText = "3.DOM操作包含<u>增删</u>节点";
//3.读写节点的值
//表单控件(label除外)内的文字就是值
var input = document.getElementById("btn");
console.log(input.value);
input.value = "BBBBB";
//4.读写节点的属性
//1)通过get/set方法(可以读写任何属性)
var img = document.getElementById("i1");
console.log(img.getAttribute("src"));
img.setAttribute("src","../images/02.jpg");
img.removeAttribute("src");
//2)通过属性名(少数的几个属性可以用该方式)
//id, className, style
var a = document.getElementById("a1");
console.log(a.style.color);
a.style.color = "blue";}

我是初学者,如有更新不好的,欢迎这位大神指出,谢谢大家!

更多精彩以后更新,转载注明!

转载于:https://www.cnblogs.com/CaiNiao-TuFei/p/7633504.html

java-前端之js相关推荐

  1. java后端和js后端的区别_前端开发和后端开发有什么区别?

    展开全部 一.定义不同 前端32313133353236313431303231363533e4b893e5b19e31333433656161是什么 前端即网站前台部分,运行在PC端,移动端等浏览器 ...

  2. 放大镜用java怎么写_[Java教程]用js实现放大镜的效果

    [Java教程]用js实现放大镜的效果 0 2016-05-22 22:00:06 第一次发博客,还有点小激动,本人现在正在天津上大学,希望以后从事前端这一行业,学习的时间不长,写博客为了记录自己的学 ...

  3. 基于javaweb的高校运动会管理系统(java+ssm+jsp+js+jquery+mysql)

    基于javaweb的高校运动会管理系统(java+ssm+jsp+js+jquery+mysql) 运行环境 Java≥8.MySQL≥5.7.Tomcat≥8 开发工具 eclipse/idea/m ...

  4. 基于javaweb的社区居民户籍管理系统(java+ssm+jsp+js+html+mysql)

    基于javaweb的社区居民户籍管理系统(java+ssm+jsp+js+html+mysql) 运行环境 Java≥8.MySQL≥5.7.Tomcat≥8 开发工具 eclipse/idea/my ...

  5. java实现html页面转pdf解决方案_[Java教程]纯js实现html转pdf

    [Java教程]纯js实现html转pdf 0 2017-02-16 00:00:30 项目开发中遇到了一个变态需求,需要把一整个页面导出为pdf格式,而且要保留页面上的所有的表格.svg图片和样式. ...

  6. 基于javaweb的律师事务所律师管理系统(java+ssm+html+js+jsp+mysql)

    基于javaweb的律师事务所律师管理系统(java+ssm+html+js+jsp+mysql) 运行环境 Java≥8.MySQL≥5.7.Tomcat≥8 开发工具 eclipse/idea/m ...

  7. java爬虫拉勾网_[Java教程]node.js爬虫爬取拉勾网职位信息

    [Java教程]node.js爬虫爬取拉勾网职位信息 0 2017-03-14 00:00:21 简介 用node.js写了一个简单的小爬虫,用来爬取拉勾网上的招聘信息,共爬取了北京.上海.广州.深圳 ...

  8. 前端学习--js.2

    写一个通用的事件侦听器函数 markyun.Event = { //页面加载完成后 readyEvent :function(fn) { if(fn==null) { fn=document; } v ...

  9. 前端使用js读取文件

    前端使用js读取文件 首先我们定义一个input标签type="file" <input type="file" οnchange="jsRea ...

  10. 基于javaweb的药品进货销售管理系统(java+ssm+html+js+jsp+mysql)

    基于javaweb的药品进货销售管理系统(java+ssm+html+js+jsp+mysql) 运行环境 Java≥8.MySQL≥5.7.Tomcat≥8 开发工具 eclipse/idea/my ...

最新文章

  1. 机器学习也能套模版:在线选择模型和参数,一键生成demo
  2. 表单的增 删 改 查
  3. caffe 人脸关键点检测_全套 | 人脸检测 人脸关键点检测 人脸卡通化
  4. 游戏物体的力与运动:用unity实现磁体相互吸引和排斥的效果
  5. 计组-数据通路的功能和基本结构
  6. 你当真了解left join???【避坑指南】
  7. java 界面输出控制台信息,java 怎么获取控制台的数据并且输出到GUI上
  8. RHive的安装和用法
  9. 解决重启VCSA 6.0,访问vsphere web client提示:503 Service Unavailable错误
  10. SpringCloud:汇总(Gradle项目)
  11. 讨论:癌症能被人类攻克吗
  12. ectouch 概述
  13. (转)工业机器人用什么语言编程的?
  14. 极速office(Word)怎么修改纸张方向
  15. android 触摸事件 取消,如何禁用/重新启用Android中的触摸事件?
  16. 电脑视频转换成mp4格式,视频格式转换器转换
  17. 2021-05-30_蓝桥杯嵌入式拓展板STM32G431--光敏电阻
  18. Debug下正常运行,但调成Release时遇到三个问题及其完美解决!
  19. 【好记性不如烂笔头】Spring框架内容问答的形式回忆-长期更新
  20. IDEA导出apk文件

热门文章

  1. matlab小区制移动通信网,LTE习题 - 无线移动 - 通信人家园 - Powered by C114
  2. 计算机的网络默认下拉列表出不来,网页下拉菜单打不开,怎么解决?
  3. python如何对文件进行批量命名-利用Python对文件批量重命名
  4. goldendb基于mysql_中兴通讯GoldenDB在中信银行信用卡核心应用实践
  5. python找色_python实现从一组颜色中找出与给定颜色最接近颜色的方法
  6. 东莞村财登录显示服务器断开,“东莞村财”APP运行一年多,还有很多村民股东未注册...
  7. 高速信号传输约翰逊 pdf_高速串口技术如何突破板级连接限制
  8. Flink学习笔记04:将项目打包提交到Flink集群上运行(Scala版)
  9. 在Anaconda中安装TensorFlow1.14.0与TensorFlow2.0.0
  10. HTML学习笔记:演示HTML页面之间传递数据