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. [front end -- JavaScript] knowledge point (IV) -- memory leakage in the project (I)
  2. This mechanism in JS
  3. Vue 3.0 source code learning 1 --- rendering process of components
  4. Learning the realization of canvas and simple drawing
  5. gin里获取http请求过来的参数
  6. vue3的新特性
  7. Get the parameters from HTTP request in gin
  8. New features of vue3
  9. vue-cli 引入腾讯地图(最新 api,rocketmq原理面试
  10. Vue 学习笔记(3,免费Java高级工程师学习资源
  11. Vue 学习笔记(2,Java编程视频教程
  12. Vue cli introduces Tencent maps (the latest API, rocketmq)
  13. Vue learning notes (3, free Java senior engineer learning resources)
  14. Vue learning notes (2, Java programming video tutorial)
  15. 【Vue】—props属性
  16. 【Vue】—创建组件
  17. [Vue] - props attribute
  18. [Vue] - create component
  19. 浅谈vue响应式原理及发布订阅模式和观察者模式
  20. On Vue responsive principle, publish subscribe mode and observer mode
  21. 浅谈vue响应式原理及发布订阅模式和观察者模式
  22. On Vue responsive principle, publish subscribe mode and observer mode
  23. Xiaobai can understand it. It only takes 4 steps to solve the problem of Vue keep alive cache component
  24. Publish, subscribe and observer of design patterns
  25. Summary of common content added in ES6 + (II)
  26. No.8 Vue element admin learning (III) vuex learning and login method analysis
  27. Write a mini webpack project construction tool
  28. Shopping cart (front-end static page preparation)
  29. Introduction to the fluent platform
  30. Webpack5 cache
  31. The difference between drop-down box select option and datalist
  32. CSS review (III)
  33. Node.js学习笔记【七】
  34. Node.js learning notes [VII]
  35. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  36. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  37. 【JQuery框架,Java编程教程视频下载
  38. [jQuery framework, Java programming tutorial video download
  39. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  40. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  41. 【Vue,阿里P8大佬亲自教你
  42. 【Vue基础知识总结 5,字节跳动算法工程师面试经验
  43. [Vue, Ali P8 teaches you personally
  44. [Vue basic knowledge summary 5. Interview experience of byte beating Algorithm Engineer
  45. 【问题记录】- 谷歌浏览器 Html生成PDF
  46. [problem record] - PDF generated by Google browser HTML
  47. 【问题记录】- 谷歌浏览器 Html生成PDF
  48. [problem record] - PDF generated by Google browser HTML
  49. 【JavaScript】查漏补缺 —数组中reduce()方法
  50. [JavaScript] leak checking and defect filling - reduce() method in array
  51. 【重识 HTML (3),350道Java面试真题分享
  52. 【重识 HTML (2),Java并发编程必会的多线程你竟然还不会
  53. 【重识 HTML (1),二本Java小菜鸟4面字节跳动被秒成渣渣
  54. [re recognize HTML (3) and share 350 real Java interview questions
  55. [re recognize HTML (2). Multithreading is a must for Java Concurrent Programming. How dare you not
  56. [re recognize HTML (1), two Java rookies' 4-sided bytes beat and become slag in seconds
  57. 【重识 HTML ,nginx面试题阿里
  58. 【重识 HTML (4),ELK原来这么简单
  59. [re recognize HTML, nginx interview questions]
  60. [re recognize HTML (4). Elk is so simple