JavaScript基础语法、函数、js事件一篇讲够

作者: Help_II | 来源:发表于2020-12-16 21:27 被阅读0次

一、JavaScript简介

1、概念：

JavaScript是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码。

诞生于1995年，当时的主要目的是验证表单的数据是否合法。

JavaScript本来应该叫Livescript，但是在发布前夕，想搭上当时超热的java顺风车，临时把名字改为了JavaScript。（也就是说js跟java没有关系，当时只是想借助java的名气）。

js组成部分：

javascript三大组成部分

（1）核心（ECMAScript）：这一部分主要是js的基本语法。

（2）BOM：Brower Object Model（浏览器对象模型），主要是获取浏览器信息或操作浏览器的，例如：浏览器的前进与后退、浏览器弹出提示框、浏览器地址栏输入网址跳转等操作等。

（3）DOM：Document Object Model（文档对象模型），此处的文档暂且理解为html，html加载到浏览器的内存中，可以使用js的DOM技术对内存中的html节点进行修改，用户从浏览器看到的是js动态修改后的页面。（增删改查）

2、特点：

交互性（它可以做的就是信息的动态交互）
安全性（不允许直接访问本地硬盘）
跨平台性（只要是可以解析js的浏览器都可以执行，和平台无关）

3、和Java区别：

特点	Java	JavaScript
面向对象	面向对象编程语言	基于对象，不完全面向过程。有部分面向对象的特点
运行方式	编译型语言，生成中间文件，字节码解释型，解释一部分，再运行一部分	不会生成中间文件
跨平台	安装虚拟机跨平台	运行在浏览器中，只要系统有浏览器就可以运行。
数据类型	强类型语言，不同的数据	弱类型，同一个变量可以赋值不同的数据类型。类型严格区分
大小写	区分大小写	区分大小写

4、作用

JavaScript 被用来改进设计、验证表单、检测浏览器、创建cookies，等等。JavaScript 是因特网上最流行的脚本语言，并且可在所有主要的浏览器中运行，比如： Internet Explorer、 Maxthon、Mozilla、Firefox、Netscape、Chrome和 Opera等。

在目前学习阶段只要记住最常用的二个：
（1）运态修改html及css代码
（2）验证表单

5、书写位置

5.1、内嵌式：

理论上js可以书写在页面的任意位置。

<script>

alert("内嵌式")

</script>

5.2、外链式：

首先新建一个文件类型为.js的文件，然后在该文件中写js语句，通过script标签对引入到html页面中。

<script src="js文件路径地址">这里不能写js语句</script>

5.3、行内式：

直接书写在标签身上，是一个简写的事件，所以又称之为事件属性。 onclick单击事件

<input type="button" value="点我呀!" onclick="alert('点我干啥!^6^');">
<button onclick="alert('恭喜你,中 500 万.');">点我呀!</button>

6、注释：

单行注释：       
//  注释语句        
快捷键ctrl+/多行注释：      
/* 注释语句 */    
快捷键ctrl+shift+/   
注意：多行注释相互不能嵌套使用，只能在多行注释里面使用单行注释！

7、数据类型：

Js中的数据类型：

数值型：number（凡是数字都是数值型，不区分整数和小数）
字符串：string（凡是引号包裹起来的内容全部都是字符串）
布尔：boolean（true、false）
对象类型：object（特殊取值null）
未定义型：undefined

对比java中的数据类型：

整数：byte short int long
小数：float double
字符：char 
布尔：boolean
字符串：String

8、变量：

8.1、定义：就是存放数据的、内疗可以存储任意数据

8.2、声明变量：

var 变量名称 = 存储的数据; (variable 变量)

8.3、变量命名规范：

只能由字母、数字、_（下划线）、$（美元符号）组成。
不能以数字开头。
命名中不能出现-（js会理解成减号进行减法的操作），不能和关键字冲突。

js是弱类型语言，不重视类型的定义，但js会根据为变量赋值的情况自定判断该变量是何种类型：

数值型：var i = 1;  var d = 2.35;
字符串：var str = "用心学习";
布尔型：var b = true;

对比Java:java是强类型的语言，注重类型的定义，Java定义类型如下：

整型：int i = 1;
浮点型：double d = 2.35;
字符串：String str = “用心学习”;
布尔型：boolean b = true;

总结：js中变量的定义。只要加一个var就行。java则使用什么类型的变量就要定义什么类型的。

9、检测数据类型：

typeof(value); 或者typeof value; 返回这个变量的类型.
说明 : 同一个变量, 可以进行不同类型的数据赋值.

<script type="text/javascript">       
 var a;    
alert(typeof a);  // undefined   
  a = 998;    alert(typeof a); // number    
 a = "JavaScript用心学习";    
alert(typeof a); // string     
a = true;   
 alert(typeof a); // boolean   
 </script>

10、算术运算符

+ - * / % ++ --

注意：

由于js中的小数和整数都是number类型，不存在类似整数除以整数还是整数的结论。
字符串和其他的数据使用+号运算，会连接成一个新的字符串。
字符串使用除了+以外的运算符：如果字符串本身是一个数字，那么会自动转成number进行运算，否则就会返回一个NaN的结果，表示这不是一个数字。NaN：not a number

<script>     
alert(1234 / 1000 * 1000); // 1234      
var s = "12";     
s -= 10;    
alert(s);  // 2     
var s = "aa";    
s -= 10;    
alert(s);  // NaN      
Not a Number 不是一个数字     
var s = "12";    
s += 10;    
alert(s);       // 1210  
</script>

11、关系（比较）运算符

> >= < <= != == 等于（只比较内容）
=== 恒等于（比较内容的同时还要比较数据类型）
注意：关系运算符返回的结果只有两个：true / false

<script>
     // 请问1 : 3 > 5, 结果为 ?    
alert(3 > 5);   // false     
// 请问2 : “22” == 22  结果为 ?   
 alert("22" == 22); // true  (仅仅判断数值)     
// 请问3 : “22” === 22  结果为 ?    
alert("22" === 22);  // false  (恒等于, 数值和类型都要相等)    
</script>

12、逻辑运算符

&& 与
true&&false ====>false|| 或
true||false ====>true！ 非
!true ====>falsefalse（理解）：false, 0, null, undefined true（理解）：true, 非0, 非null, 非undefined 针对 &&顺口溜: 找第一个出现的假值. (一假即假)针对 ||顺口溜: 找第一个出现的真值. (一真即真)

演示一：

<script>   
  // 短路与 (一假即假)    // 口诀 : 找第一个为假的值.     
// 请问1 :  8 < 7 && 3 < 4, 结果为 ?    
alert(8 < 7 && 3 < 4);  // false    
 // 请问2 :  -2 && 6 + 6 && null 结果为 ?    
alert(-2 && 6 + 6 && null); // null     
// 请问3 :  1 + 1 && 0 && 5  结果为 ?    
alert(1 + 1 && 0 && 5); // 0 </script>

演示二:

<script>   
  // 短路或 : 一真即真.    // 口诀 : 找第一个为真的值.    
 // 请问1 :  0 || 23 结果为 ?    alert(0 || 23); // 23     
// 请问2 :  0 || false || true  结果为 ?    
alert(0 || false || true); // true     
// 请问3 :  null || 10 < 8 || 10 + 10结果为 ?    
alert(null || 10 < 8 || 10 + 10);  // 20     
// 请问4 :  null || 10 < 8 || false结果为 ?    
alert(null || 10 < 8 || false); // false    
</script>

13、三元运算符：

条件？表达式1：表达式2如果条件为true，返回表达式1的结果如果条件为false，返回表达式2的结果

演示：

<script> 
    // 请问1 :  3 ? “aaa” : “bbb” 结果为 ?
    alert(3 ? "aaa" : "bbb");       // aaa    
 // 请问2 :  0 ? “ccc” : “ddd”  结果为 ?  
  alert(0 ? "ccc" : "ddd");       // ddd   
 </script>

14、if条件语句

这个和Java中if语句一样。

演示：

<script>    
   var score = 59;   
    if (score >= 90) {  
        alert("优秀");     
 } else if (score >= 80) {
          alert("良好");  
    } else if (score >= 60) {   
       alert("及格");  
   } else {     
     alert("不及格");    
  }   
</script>

15、switch分支结构

这个和java中switch结构一样。只是Java中表达式为：常量整型（去long）、字符、字符串

演示：

<script>      
 var score = 59;     
 // 需求 : 将需要一个整型数值, 不想要小数点.   
   // window 对象的 parseInt 方法.   
   score = window.parseInt(score / 10 + "");      
// alert(score);       
switch (score) {      
    case 10:       
  case 9:           
   alert("优秀!");   
           break;   
       case 8:      
        alert("良好!");   
           break;   
       case 7:       
   case 6:       
      alert("及格!");    
          break;   
       default:       
       alert("不及格!");    
          break;   
   }  
 </script>

16、循环结构 while、do-while. for;

while(循环条件){
循环体;
}do{
循环体;
}
while(循环条件);
for(循环变量赋初值；循环条件；循环变量增值){
循环语句;
}console.log（...）;
 以日志的形式在控制台输出结果！

演示：

<script>     // 需求 : 统计 1~100 之间能够被3和7整除的数字个数  
   var count = 0;     // 1\. 遍历 1~100 之间的所有整型数值 
   for (var i = 1; i <= 100; i++) {     
    // 2\. 判断      
  if (i % 3 == 0 && i % 7 == 0) {    
        // alert(i);           
 console.log(i);      
      // 3\. 累加个数     
       count++;       
 }  
  } 
    // 4\. 查看结果    
// alert(count);    
console.log(count);

console.log显示如下：

输出结果

17、循环嵌套

演示案例9*9乘法表

 <style>        
table {            
/* 将 table 表格的线变成了细线 */
border-collapse: collapse;            
/*color: red;*/
border-color: red;        
}    
</style>
<script>
// 需求 : 九九乘法口诀表 
document.write("<table border='1px solid red' cellspacing='0' cellpadding='8px'>");        
document.write("<caption>九九乘法口诀表</caption>");
for (var i = 1; i <= 9; i++) {
document.write("<tr>");
for (var j = 1; j <= i; j++) {
document.write("<td>");
document.write(j + "*" + i + "=" + (j*i) + "&nbsp;&nbsp;&nbsp;&nbsp;");
document.write("</td>");
}
document.write("</tr>");
}
document.write("</table>");
</script>

18、自定义函数

函数是命名的独立的语句段，这个语句段可以被当作一个整体来引用和执行：

格式：

function 函数名(形式参数){函数体}调用函数：函数名(实际参数);

18.1、函数只有被调用后才会执行

18.2、如果函数需要返回值、直接使用return 返回、不会像java一样要考虑返回值的类型

<script type="text/javascript">
// 定义一个函数 : function
function demo2() {
return 666;
}
// 调用函数 :    alert(demo2()); 
</script>

18.3、如果函数需要传递参数、不需要指定参数的类型、直接使用变量即可

<script type="text/javascript">
// 定义一个函数 : function
function demo3(a, b) {
return a + b;
}
// 调用函数 :    alert(demo3(10, 20));//显示30
</script>

18.4、js中出现二个重名的函数名、后者会把前面的覆盖掉

对比java、java有重载（同名不同参）、重写（同名同参同返回值类型、方法体不一样）

演示：

<script type="text/javascript">
// 定义一个函数 : function
function demo4(a, b) {
alert("调用1...");
}
function demo4() {
alert("调用2...");
}
demo4(10, 20);
demo4(); 
</script>

会显示二次下面的图片：

image

19、匿名函数

匿名函数是没有名字的函数

function(形式参数){
函数体
}
调用方式：
将匿名函数赋值给一个变量，通过变量名调用函数定义函数并赋值给变量：
var fn = function(形式参数){
函数体
}调用函数：
fn(实际参数);

演示：

<script type="text/javascript">     
// 匿名函数 : 没有名称的函数    
var func = function(i, u) {
alert(i + " love " + u);
}
// 调用函数 :  
 func("柳岩", "小白");
//显示柳岩love小白 
</script>

20、案例-轮播图

说明1 : script 标签需要放在 body 标签之后.
说明2 : window.setInterval(“字符串函数名称()”, 时间毫秒数);
说明3 : window.setInterval(函数名称, 时间毫秒数);
说明4 : window.setInterval(匿名函数, 时间毫秒数);
推荐使用

<head>    
<meta charset="UTF-8">    
<title>轮播图</title>
<style>
div {
width: 80%;
margin: 50px auto;
}
img {
width: 100%;
}
</style>
 </head>
<body>
<div class="container">
<img src="../img/01.jpg" alt="图片">
</div>
</body>

实现一：

<script>     
// 需求 : 动态获取页面中的 img 标签, 然后修改 img 标签的 src 属性.
// 1\. 获取 img 标签
var img = document.getElementById("img");
// alert(img);
// 定义一个变量
var count = 1;
// 1.2 定义一个函数
function changeImageSrc() {
count++;
img.src = "../img/0"+count+".jpg";
// 判断
if (count == 8) {
count = 0;
}
}
// 2\. 循环切换图片
// window.setInterval(函数, 时间毫秒);
在指定的时间毫秒间隔, 不断调用第一个参数传入的函数.
// 调用方式一 :
// window.setInterval("changeImageSrc()", 1000);
// 调用方式二 :
window.setInterval(changeImageSrc, 1000); 
</script>

实现二：

<script>     
// 需求 : 动态获取页面中的 img 标签, 然后修改 img 标签的 src 属性.
// 1\. 获取 img 标签
var img = document.getElementById("img");
// alert(img);
// 定义一个变量
var count = 1;
// 2\. 循环切换图片
// window.setInterval(匿名函数, 时间毫秒);
 在指定的时间毫秒间隔, 不断调用第一个参数传入的匿名函数.
window.setInterval(function() {
count++;
img.src = "../img/0"+count+".jpg";
// 判断
if (count == 8) {
count = 0;
}
}, 1000); 
</script>

21、js事件

21.1、事件概述：

事件三要素：
1.事件源：被监听的html元素（就是这个事件加给谁），就是某个（某些）html标签
2.事件类型：某类动作，例如点击事件，移入移除事件，敲击键盘事件等
3.执行指令：事件触发后需要执行的代码，一般使用函数进行封装语法格式：事件源.事件类型=执行指令

我目前是在职java开发，如果你现在也想学习java开发技术，在入门学习java的过程当中有遇见任何关于学习方法，学习路线，学习效率等方面的问题，你都可以申请加入我的java学习交流裙：前面：893 中间：241 后面：279。里面聚集了一些正在自学java的初学者,转行者，初阶者，我这里也有我做java技术这段时间整理的一些java学习手册，java大厂面试题，java语法pdf，需要的话都可以找裙猪获取。
21.2、常用的事件：

常用的事件

案例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件</title>
<script>
// 窗口 : window 对象提供了一个事件类型  onload 页面加载完成事件.
// 事件源 : window
事件类型 : 页面加载完成事件 (onload)
执行指令: 就是赋值的 function 函数.
window.onload = function () {
// 获取页面的 btn 按钮
var btn = document.getElementById("btn");
// alert(btn);
// 给 btn 按钮绑定一个事件 (单击事件 onclick)
// 事件源 : btn按钮
事件类型 : 单击事件 (onclick)  执行指令: 就是赋值的 function 函数.
btn.onclick = function () {
alert("恭喜你，获得免费精品女朋友一个!");
}
}
</script>
</head>
<body>
<button id="btn">按钮</button>
</body>
</html>

到此基础结束。

==============《轮播图图片路径问题》================