js基础-课堂笔记

最新推荐文章于 2023-06-08 16:08:24 发布

huanghai_fu

最新推荐文章于 2023-06-08 16:08:24 发布

阅读量402

点赞数

本文链接：https://blog.csdn.net/huanghai_fu/article/details/106908526

版权

JavaScript-课堂笔记

表单【重点】

<form name="名称" action="提交路径" method="提交方式get/post">
	<!-- 任何表单项的数据，如果想要提交，就必须有name属性 -->
    
    文本框：<input type="text" name="username" value="默认值">
    密码框：<input type="password" name="password" value="默认值">
    
    <!-- 
		name：name相同的radio属于同一组，同组radio选择互斥；
		value：一个选项的值，选中哪个选项，就提交哪个选项的value值
	-->
    单选：<input type="radio" name="sex" value="male">男
    <input type="radio" name="sex" value="female" checked>女
    
    <!-- 
		name：name相同的checkbox属于同一组，同组的目的仅仅是方便服务端接收数据
		value：一个选项的值，选中哪个选项，就提交哪个选项的value值
	-->
    多选：<input type="checkbox" name="hobby" value="sing">唱
	    <input type="checkbox" name="hobby" value="dance" checked>跳
    
    <input type="button" value="普通按钮">
    <input type="submit" value="提交按钮">
    <input type="reset" value="重置按钮">
    <input type="image" src="图片路径">
    
    选择文件：<input type="file" name="file">
    隐藏域：<input type="hidden" name="hidden" value="隐藏域的值">
    
    下拉框：
    <select name="address">
        <option value="option1">选项1</option>
        <option value="option2" selected>选项2</option>
        <option value="option3">选项3</option>
    </select>
    
    文本域：
    <textarea name="introduce">默认值写在这里</textarea>
</form>

CSS
- HTML里引入CSS
  - 行内样式<div style="css样式代码">黑马程序员</div>
  - 内部样式<style> css样式代码 </style>
  - 外部样式<link rel="stylesheet" href="css文件路径">
- CSS的选择器
  - 基本选择器
    - 标签选择器：标签名称{css样式名:值; css样式名:值; ...}
    - ID选择器：#id值{css样式名:值; css样式名:值; ...}
    - 类选择器：.类名{css样式名:值; css样式名:值; ...}
  - 扩展选择器
    - 层级选择器：#d1 .c1{} 找id为d1的元素的后代类名为c1的元素
    - 属性选择器：input[type="text"] 找文本框
    - 伪类选择器：:link, :visited, :hover, :active
- CSS的常用样式：查手册

一、JS简介

1. js简介和作用

目标

了解js的概念
理解js的作用
能说出js的组成

讲解

什么是js

JS：JavaScript。是web开发中不可缺少的脚本语言，不需要编译就能运行（解释型语言）。它“寄生”在html体内放在服务器上，随网络传输到客户端，在浏览器里运行。
运行环境：浏览器
js跨平台？跨平台（Java跨平台，因为Java在JVM里运行）
js大小写敏感；
基于对象的语言

js的作用

和用户交互，实现页面的动态效果的

操作浏览器：用户做某些操作，让js操作浏览器前进一步、后退一步、弹窗、刷新页面等等
操作网页：用户做某些操作，让js操作网页操作网页样式、操作标签内容、操作属性

js的组成

ECMAScript：规定了js的基本语法规范
BOM：Browser Object Model，浏览器对象模型。js可以调用BOM对象，来操作浏览器
DOM：Document Object Model，文档对象模型。js可以调用DOM对象，来操作网页

js的来历（了解）

网景公司（NetScape）=》网景浏览器（FireFox）=》LiveScript=》JavaScript
微软公司（Microsoft）=》IE浏览器 =》JScript =》现在没人用了
ECMA=》制定了语言的标准规范=》ECMAScript

小结

js简介：JavaScript，在浏览器里运行，大小写敏感，在web开发里不可缺少的脚本语言
js作用：和用户交互，实现动态效果的
js组成：
- ECMAScript：基本语法规范
- BOM：提供了操作浏览器的方法
- DOM：提供了操作网页的方法

2. 在HTML中引入js

目标

能够在HTML中引入js
掌握js的注释
掌握js的三种输出方式

讲解

js的引入语法

1. 内部js

在html文档里增加script标签，把js代码写在script标签里

<script>
	alert();
</script>

2. 引入外部js

把js代码写在单独的xxx.js文件里，在html中使用script标签引入js文件

<script src="js文件路径"></script>

3. 注意事项：

一个script标签的功能要单一：要么是内部js，要么是外部js，不能混用
js越晚加载越好，建议放在body结束标签之前（css建议放在head里）

js的注释

js的单行注释：// 注释内容
js的多行注释：/* 多行注释 */

<script>
	//单行注释
    
    /*
    	多行注释
     */
</script>

js的三种输出方式

在Java中，如果要输出一些数据，可以使用System.out.println()输出到控制台
那么，如果在js里想要输出一些数据，怎样实现呢？这里介绍三种输出方式

<script>
	//1. 弹窗输出
    alert("hello, world1");
    
    //2. 输出到页面。可输出html代码
    document.write("<h1>hello, world2</h1>");
    
    //3. 输出到浏览器的控制台
    console.log("hello, world3");
</script>

小结

js的引入：
- 内部js：<script>把js代码写到这里</script>
- 外部js：把js代码写在单独的js文件里，html中通过<script src="js文件路径"></script>引入js文件
注意：
- 一个script，不能既引入外部的，又写内部的js代码：因为语法不允许
- js代码在页面任何位置都可以运行，建议：放在body结束标签之前
三种输出方式：课堂给大家演示效果的，实际开发的时候都很少
- 弹窗输出：alert("输出内容")
- 输出到页面：document.write("输出内容")
- 输出到控制台：console.log("输出内容")

二、基本语法

1. 基本语法

目标

掌握编写js的基本语法

步骤

js的变量定义
js的数据类型
js的运算符
js的流程控制语句

讲解

首先：要让idea支持ES6的语法，配置如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tBlykaSg-1592825923988)(img/image-20200516101255001.png)]

变量定义

说明

ES6中，js里变量定义：
- let 定义变量：变量不可重复声明，只在当前作用域有效
- const 定义常量：常量值不可修改
注意：
- js是弱类型语言：声明变量时，不需要声明类型。
- js是动态类型语言：一个变量的类型是可变的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>变量定义</title>
</head>
<body>

<script>

    //----------定义变量---------------
    //定义整数
    let v = 1;
    console.log(v);

    //定义小数
    v = 3.14;
    console.log(v);

    //定义布尔
    v = true;
    console.log(v);

    //定义字符串
    v = "hello";
    console.log(v);

    //定义对象
    v = new Date();
    console.log(v);

    //----------定义变量---------------
    const PI = 3.14;
    console.log(PI);

    //修改常量值，会报错
    PI = 1;

</script>
</body>
</html>

`let`和`var`的区别

在ES5及更低版本中，使用var定义变量
在ES6及更高版本中，使用let定义变量
两者的区别是：
- let定义变量仅在当前代码块有效；var定义变量是全局变量
- let不允许重复定义变量；var允许重复定义变量
- 开发中建议使用let定义变量，语法更严谨

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>var和let</title>
</head>
<body>

<script>
    //--------var和let的区别-----------
    //1. var定义的不具备块级作用域的特征，在{}里用var定义的变量，{}之外也可访问
    //   let定义的是局部变量，具备块级作用域的特征，只在let所在的块{}内有效，{}外不能访问
    {
    
        var a = "1a";
        let b = "2b";
    }
    console.log(a);//输出结果：1a
    console.log(b);//运行时报错

    //2. var可重复定义变量；let不能重复定义变量
    var v = 1;
    var v = 2;
    console.log(v);//正常运行，输出结果：2

    let l = 1;
    let l = 2;
    console.log(l);//运行时报错，因为let不允许重复定义变量
</script>
</body>
</html>

数据类型

说明

数据类型	描述	示例
`number`	数字类型	`1`, `2`, `3`, `3.14`
`boolean`	布尔类型	`true`, `false`
`string`	字符串类型	`"hello"`, `'hello'`
`object`	对象类型	`new Date()`, `null`
`undefined`	未定义类型	`undefined`

示例

输出变量的类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据类型</title>
</head>
<body>

<script>
    //说明：typeof关键字，用于判断一个变量的类型
    
    //要求：定义变量，输出变量的类型
    let v;
    console.log(typeof v); //输出结果：undefined

    v = 1;
    console.log(typeof v); //输出结果：number

    v = 3.14;
    console.log(typeof v); //输出结果：number

    v = true;
    console.log(typeof v); //输出结果：boolean

    v = "hello";
    console.log(typeof v); //输出结果：string

    v = new Date();
    console.log(typeof v); //输出结果：object

    v = null;
    console.log(typeof v); //输出结果：object
</script>
</body>
</html>

运算符

说明

js也有：+,-,*,/,%,+=,-=,*=,/=,%=,++,--,>,<,=,>=,<=,==,!=,&&,||,! 三元运算等等

需要说明的有：

==和===：

运算符	描述	示例
`==`	比较值。只要值一样，就是true	`1=="1"`，结果是true
`===`（推荐）	比较值和类型。只有值和类型都一样，才是true	`1==="1"`，结果是false

-*/：
- 如果是数字，正常运算
- 如果不是数字，js会尝试转换成数字再运算
- 如果转换不成功，结果是NaN
- 如果除数是0，结果是Infinity

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>运算符</title>
</head>
<body>

<script>
    //1. ==和===
    let v1 = 3;
    let v2 = "3";

    console.log(v1 == v2); //输出结果：true。只要值相等，结果即是true
    console.log(v1 === v2);//输出结果：false。只有值和类型都相同，结果才是true

    //2. + - * /
    console.log("2" + 1);//输出结果：21。 有字符串的加法是拼接字符串
    console.log("2" - 1);//输出结果：1。  把字符串转换成数字再运算
    console.log("a" - 1);//输出结果：NaN。字符串不能转换成数字，结果NaN：Not a Number
    console.log("2" * 3);//输出结果：6
    console.log("10" / 2);//输出结果：5
    console.log("10" / 0);//输出结果：Infinity。表示数字无穷大
</script>
</body>
</html>

流程控制语句

说明

js也有：if, else, else if, while, switch, for
特殊的是if判断：任何类型的数据，都可以作为判断条件
- boolean类型：true/false
- number类型：0是false，非0是true
- string类型：空串""是false，非空字符串是true
- object类型：null是false，非null是true
- undefined类型：始终是false

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>流程控制语句</title>
</head>
<body>

<script>
    // if判断
    let v = true;
    v = 1; //number类型：0为false；非0为true
    v = "";//string类型：""为false；非空串为true
    v = null;//object类型：null为false；非null为true
    v = undefined;//undefined类型：始终为false
    
    if (v) {
    
        console.log("true");
    }else{
    
        console.log("false");
    }
</script>
</body>

最低0.47元/天解锁文章

huanghai_fu

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js基础-课堂笔记

JavaScript-课堂笔记表单【重点】<form name="名称" action="提交路径" method="提交方式get/post">  文本框：<input type="text" name="username" value="默认值"> 密码框：<input type="password" name="password" value="默认值"&
复制链接

扫一扫