《JavaEE》第四周day4学习笔记-JavaScript1

一、JavaScript

(一)概述


脚本语言,不需要编译,可以直接被浏览器解析
JavaScript可以增强用户和HTML的交互过程,增强用户体验。

(二)调用方式


方法1:在head标签内增加<script></script>标签
方法2:通过<script scr="URL"></script>调用外部js文件

(三)基本语法


1.helloworld

alert(“提示框内容”);
document.write(“输出内容至标签内部”)
注意:document.writeln指输出换行的内容至body标签内,经过HTML解析后换行会被空格替代!

2.注释

单行注释://注释内容
范围注释:/*注释内容*/

3.数据类型

3.1基本数据类型(五种)
number:数字(可赋值:not a number)
string:字符串
boolean:布尔值
null:object类型
undefined:undefined类型
3.2引用数据类型:对象

4.变量

【注意】JavaScript是弱类型语言,在定义变量时不确定类型。
定义变量:var 变量名 = 变量值;
获取变量类型:typeof(变量名)

5.运算符

5.1变量运算符
[一元运算符]
“++”、“–”、“+”、“-”…
在JavaScript中,“+”、“-”(正负号,书写在变量前)会将var类型转换为number类型参与数学运算,如果遇到无法转换的类型(如:包含字母),则返回“NAN”。
[多元运算符]
算术运算符:“+”、“-”、“*”、“/”、“%”...
需要使用小括号进行包裹,number1/number2有可能出现小数。
赋值运算符:“=”、“+=”、“-=”...
比较运算符:“>”、“<”、“==”、“===”...
字符串通过比较运算符,按字典顺序逐位比较,返回布尔值,“==”忽略类型,“===”比较类型。
5.2逻辑运算符:
“!”可以对0,1进行布尔转换(结论:存在内容为true,不存在内容为false)
!!0=false
!!NAN=false
!!其他number=true
!!空字符串=fales
!!非空字符串=true
!!null=false
!!undefined=false
!!对象=true

“&&”、“||”如果参与的不是boolean类型的内容,则首先转换为boolean类型进行比较,再返回原始值!,变量调用者通过判断返回原始值的boolean类型(Java会返回转换后的boolean值);“&&”返回首个false,否则返回最后一个;“||”返回首个true,否则返回最后一个(与假或真)

6.流程控制

6.1if…else…:使用方法与Java一致
6.2switch…case…:(Java:char byte short int enum(枚举,1.5) String(1.7);JavaScript:可以接受任意的数据类型)
6.3while&do…while:使用方法与Java一致
6.4for:使用方法与Java一致,注意变量类型声明var,否则蔓延至全局

7.JavaScript特殊语法

7.1语句以“;”结尾,可以省略(不建议)
7.2使用var表示局部变量,不使用var表示全局变量!

(四)基本对象


1.Function(函数对象)

1.1创建函数
方法1:var 方法名 = new fuction(“形式参数”,“方法体”);
方法2:
fuction 方法名(形式参数){
//var 方法名 = fuction(形式参数){
方法体
}
1.2函数特点
函数的形式参数和返回值的类型不用写
同名函数,后面的会将前面的覆盖(没有类似Java的重载效果)
arguments[]封装函数的实际参数,arguments.length表示当前函数的实际参数数量

2.Array(数组)

2.1创建数组
方法1:var 数组名 = new Array(值1,值2…);
方法2:
var 数组名 = new Array(长度);
数组名[0] = 值1;
数组名[1] = 值2;…
方法3:var 数组名 = [值1,值2…];
2.2数组函数
.join(“样式”):使用特定样式连接元素,返回字符串
.push(“值1”,“值2”…):在数组末尾按顺序压入元素
.pop():弹出数组末尾元素
.length():返回数组的长度

3.Boolean(布尔)

创建布尔对象:var 名称 = new Boolean(var)
注意:通过对象创建出来的是object类型,通过基本类型创建出来的是boolean类型。

4.Date(日期)

创建Date对象:var 名称 = new Date();
.getFullYear:获取年份
.getMonth:获取月份-1
.getDate:获取日期
.getTime:返回距 1970 年 1 月 1 日之间的毫秒数
.toLocaleString:获取通用格式的年月日时分秒

5.Math(数学)

Math对象为全局对象,不用创建直接使用。
.random():返回0~1之间的随机数,包含0,不包含1
.ceil(x):对x进行上舍入
.floor(x):对x进行下舍入
.round(x):对x进行四舍五入
PI:3.1415926535…

6.Number(数字)

Number() 函数把对象的值转换为数字

7.String(字符串)

.indexof(目标字符串):返回目标字符串的起始下标
.substr(起始下标,长度):截取字符串
.substring(起始下标,结束下标):截取字符串,包括起始不包括结束!
.replace(正则表达式/目标字符,替换字符):字符替换

8.RegExp(正则表达式)

8.1创建正则表达式
方法1:var 名称 = RegExp(“正则表达式”);
方法2:var 名称 = /正则表达式/;
[]:单个字符
\d:单个数字字符
\w:单个字符或数字字符
?:表示出现0次或1次
*:表示出现0次或n次
+:表示出现1次或n次
{}:表示出现过i次,其中m<=(i)<=n
^:开始符号
$:结束符号
9.Global
全局对象不用创建!
parseInt(变量):将变量转换为数字
isNaN(变量):判断一个变量是否“非数字”
eval(变量):将字符串解析为JavaScript对象,调用相关函数

【思考】


如何将输入内容通过通过函数转换为页面输出?
1、设置输出区域
2、使用input-text提供输入
3、通过id捕获输入并在输出区域输出,封装为函数
4、使用input-button调用函数(如果函数出现document.write语句,会弹出当前页面!!!)

<script>
  function function10() {
            var qwe1 = document.getElementById("id1").value;
            document.getElementById("good").innerHTML=parseInt(Math.random()*qwe1)+1;
        }
</script>
<body>
<br>
请输入范围:1-<input name="input1" id="id1" type="text">
<input type="button" onclick="function10()" style="height: 22px;width: 50px;position: relative;top: 2px;left: 5px;font-family: 微软雅黑" value="产生">
<br>
随机数:<span id="good"></span>
</body>

在这里插入图片描述

发布了31 篇原创文章 · 获赞 0 · 访问量 811

猜你喜欢

转载自blog.csdn.net/u010761121/article/details/103517016