JavaScript简介(认识、入门)

osc_09eh9rc8 2020-11-11 11:51:31
java javascript livescript


认识JavaScript

JavaScript是一种属于网络的脚本语言,已经被广泛用于web应用开发,常来为网页添加各种各样的动态功能,为用户提供更流畅的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能。

  • HTML定义了网页的内容
  • CSS渲染了网页的布局和样式
  • JavaScript制定了网页的行为

JavaScript是写给浏览器的一门脚本语言,目前所有的浏览器都支持JavaScript

JavaScript是轻量级的一门面向对象的编程语言

不得不提的一件事:JavaScript和java是没有任何关系的!(原名为LiveScript,只是蹭热度改名为JavaScript)

简单使用JavaScript

在HTML中使用JavaScript有两种方式:

  • 在HTML中使用< script>< /script>标签,嵌入JavaScript脚本的内嵌式
  • 在HTML中使用< script src="" >< /script>标签,引入外部.js文件的外链式

注意:如果使用了外链式,又在该标签内写了js代码,那么标签内的代码不会执行,如果还想在页面中使用内嵌式,再写一个script标签即可。script是一个双标签,即使使用外链式标签中没有内容,也要有结束标签。

 <!-- 外链式-->
<script src="../js/js_demo1.js"></script>
<!-- 内嵌式-->
<script>
document.write("hello javaScript")
</script>

语法规则

JavaScript严格区分大小写

JavaScript是弱类型语言。

  • 弱类型语言:不是没有类型,而是定义变量时,不需要明确具体的数据类型

JavaScript变量的定义:var 变量名=值

JavaScript中的数据类型:

  • 数字类型:number,表示任意数字
  • 布尔类型:boolean,可以为true、false
  • 字符串类型:string,单引号和双引号都可以声明字符串,因为JavaScript没有字符类型
  • 引用类型:object
    • 空值:null,表示空,属于object类型
    • undefined:表示一个未初始化的变量

使用typeof可以返回变量的真实类型

//定义变量
var num1 = 100;
var num2 = 99.99;
var str = "haha";//单引号双引号都可以用来表示字符串
var flag = true;
document.write(num1+"<br>");
document.write("num1的数据类型是:"+typeof(num1)+"<br>");
document.write(num2+"<br>");
document.write("num2的数据类型是:"+typeof (num2)+"<br>")
document.write(str+"<br>");
document.write("str的数据类型是:"+typeof str+"<br>")
document.write(flag+"<br>")
document.write("flag的数据类型是:"+typeof flag+"<br>")

三种输出方式

  • window.alert(""),提示框效果显示
  • console.log(""),在控制台以日志的方式显示
  • document.write(""),直接显示在HTML页面中
 var num="哈哈哈";
//输出在弹出的对话框中
window.alert(num);
//输出在页面上(不管script标签写在哪,该输出的语句都在body标签内)
document.write(num);
//输出在浏览器控制台中
console.log("日志信息");
console.warn("警告信息");
console.error("错误信息");

知识点

运算符中存在一个 === 。

=表示赋值,==表示比较值相等,===表示比较类型和值相等

 var str = "100";
var num = 100;
document.write("使用==相等吗?--"+(str==num))
document.write("<br>使用===相等吗?--"+(str===num))

布尔类型的运算中:

  • 数字类型非0就是真
  • 字符串类型非""(空串)就是真
  • 0,null,undefined等都是false
 var num1 = 15;
if (num1){

console.log("真的")
}
var str1 = "";
if (str1){

console.log("真的")
}else{

console.log("假的")
}

函数

JavaScript中的函数其实就是方法。但是格式和java中的方法不太相同

function 函数名(参数列表){

方法体
//有返回值就写return,没有就不写
}

特点:

  • 函数中不需要声明返回值类型
  • 参数列表中的参数不需要指定数据类型
  • 不存在java中的重载的概念,只要两个函数的函数名相同,后面的函数就会把前面的函数覆盖掉
  • 使用函数时,如果函数需要参数,调用时不传参也不会报错,如果函数不需要参数,调用时传入了参数也不会报错

事件

JavaScript使我们有能力创建动态页面,事件是可以被JavaScript检测到的行为,当事件发生时,就可以动态的做一些事情

事件三要素:

  • 事件源:在页面中,用户可以操作的元素都是事件源
  • 事件:用户对于事件源作出的行为(比如鼠标点击、悬浮···)
  • 监听器:用来监听事件,当事件发生时,就会调用相应的函数处理事件

事件通常和函数配合使用,这样就可以通过发生事件来驱动函数执行,从而根据用户的行为来实现一些动态的效果

事件可以是浏览器的行为,也可以用户的行为

常用事件:

事件名 说明
onload 某个页面被完成加载
onsubmit 表单被提交时(事件源是form表单)
onclick 鼠标单击一个对象
onblur 鼠标双击一个对象
onfocus 失去焦点
onchange 获得焦点(鼠标指针放在元素上,该元素就获得焦点)
onkeydown 对象中的内容被改变
onkeypress 某个键盘按键被按下
onkeyup 某个键盘按键被按下或按住
onmousedown 鼠标按键被按下
onmouseup 鼠标按键被松开
onmouseover 鼠标被移动到某个元素上
onmouseout 鼠标移出某个元素
onmousemove 鼠标被移动

示例:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript事件</title>
<script>
function clickMethod(){

window.alert("你点击了按钮");
}
function loadMethod(){

window.alert("页面被加载了");
}
function changeMethod(){

window.alert("你修改了文本框的内容")
}
function focusMethod(){

window.alert("文本框获得了焦点")
}
</script>
</head>
<body onload="loadMethod()">
<input type="submit" onclick="clickMethod()" value="按钮">
<input type="text" onchange="changeMethod()" onfocus="focusMethod()">
</body>
</html>
版权声明
本文为[osc_09eh9rc8]所创,转载请带上原文链接,感谢
https://my.oschina.net/u/4271231/blog/4712385

  1. 【计算机网络 12(1),尚学堂马士兵Java视频教程
  2. 【程序猿历程,史上最全的Java面试题集锦在这里
  3. 【程序猿历程(1),Javaweb视频教程百度云
  4. Notes on MySQL 45 lectures (1-7)
  5. [computer network 12 (1), Shang Xuetang Ma soldier java video tutorial
  6. The most complete collection of Java interview questions in history is here
  7. [process of program ape (1), JavaWeb video tutorial, baidu cloud
  8. Notes on MySQL 45 lectures (1-7)
  9. 精进 Spring Boot 03:Spring Boot 的配置文件和配置管理,以及用三种方式读取配置文件
  10. Refined spring boot 03: spring boot configuration files and configuration management, and reading configuration files in three ways
  11. 精进 Spring Boot 03:Spring Boot 的配置文件和配置管理,以及用三种方式读取配置文件
  12. Refined spring boot 03: spring boot configuration files and configuration management, and reading configuration files in three ways
  13. 【递归,Java传智播客笔记
  14. [recursion, Java intelligence podcast notes
  15. [adhere to painting for 386 days] the beginning of spring of 24 solar terms
  16. K8S系列第八篇(Service、EndPoints以及高可用kubeadm部署)
  17. K8s Series Part 8 (service, endpoints and high availability kubeadm deployment)
  18. 【重识 HTML (3),350道Java面试真题分享
  19. 【重识 HTML (2),Java并发编程必会的多线程你竟然还不会
  20. 【重识 HTML (1),二本Java小菜鸟4面字节跳动被秒成渣渣
  21. [re recognize HTML (3) and share 350 real Java interview questions
  22. [re recognize HTML (2). Multithreading is a must for Java Concurrent Programming. How dare you not
  23. [re recognize HTML (1), two Java rookies' 4-sided bytes beat and become slag in seconds
  24. 造轮子系列之RPC 1:如何从零开始开发RPC框架
  25. RPC 1: how to develop RPC framework from scratch
  26. 造轮子系列之RPC 1:如何从零开始开发RPC框架
  27. RPC 1: how to develop RPC framework from scratch
  28. 一次性捋清楚吧,对乱糟糟的,Spring事务扩展机制
  29. 一文彻底弄懂如何选择抽象类还是接口,连续四年百度Java岗必问面试题
  30. Redis常用命令
  31. 一双拖鞋引发的血案,狂神说Java系列笔记
  32. 一、mysql基础安装
  33. 一位程序员的独白:尽管我一生坎坷,Java框架面试基础
  34. Clear it all at once. For the messy, spring transaction extension mechanism
  35. A thorough understanding of how to choose abstract classes or interfaces, baidu Java post must ask interview questions for four consecutive years
  36. Redis common commands
  37. A pair of slippers triggered the murder, crazy God said java series notes
  38. 1、 MySQL basic installation
  39. Monologue of a programmer: despite my ups and downs in my life, Java framework is the foundation of interview
  40. 【大厂面试】三面三问Spring循环依赖,请一定要把这篇看完(建议收藏)
  41. 一线互联网企业中,springboot入门项目
  42. 一篇文带你入门SSM框架Spring开发,帮你快速拿Offer
  43. 【面试资料】Java全集、微服务、大数据、数据结构与算法、机器学习知识最全总结,283页pdf
  44. 【leetcode刷题】24.数组中重复的数字——Java版
  45. 【leetcode刷题】23.对称二叉树——Java版
  46. 【leetcode刷题】22.二叉树的中序遍历——Java版
  47. 【leetcode刷题】21.三数之和——Java版
  48. 【leetcode刷题】20.最长回文子串——Java版
  49. 【leetcode刷题】19.回文链表——Java版
  50. 【leetcode刷题】18.反转链表——Java版
  51. 【leetcode刷题】17.相交链表——Java&python版
  52. 【leetcode刷题】16.环形链表——Java版
  53. 【leetcode刷题】15.汉明距离——Java版
  54. 【leetcode刷题】14.找到所有数组中消失的数字——Java版
  55. 【leetcode刷题】13.比特位计数——Java版
  56. oracle控制用户权限命令
  57. 三年Java开发,继阿里,鲁班二期Java架构师
  58. Oracle必须要启动的服务
  59. 万字长文!深入剖析HashMap,Java基础笔试题大全带答案
  60. 一问Kafka就心慌?我却凭着这份,图灵学院vip课程百度云