JavaScript——[10]

最新推荐文章于 2024-10-11 17:39:47 发布

哲寻

最新推荐文章于 2024-10-11 17:39:47 发布

阅读量610

点赞数 29

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/liuyishou0824/article/details/140524106

版权

1、JavaScript是什么

JavaScript是一个运行在客户端浏览器的脚本语言。

客户端 VS 服务器端

服务器端给客户端返回数据，由客户端浏览器解释执行返回的数据+HTML+CSS+JavaScript进行数据的渲染，由客户端浏览器进行呈现。

JavaScript是一个基于对象的，事件驱动的，具有安全性的脚本语言。 ArkTS

2、JavaScript能做什么

2.1 进行数据的校验

在客户端进行数据的校验，不需要通过服务器。目的就是为了缓解服务器的压力。

2.2 页面的动态效果实现

tab选项卡切换

菜单滑过显示

3、脚本语法

<script type="text/javascript">
    document.write("hello,javascript");  //在网页中写入
    console.log("hello,javascript!!!");  //在网页的控制台输出信息，一般用于代码调试
</script>

4、网页中引入javascript的几种方式

4.1 写在script标签之中

</body>
    <script type="text/javascript">
        document.write("hello,javascript");  //在网页中写入
        console.log("hello,javascript!!!");  //在网页的控制台输出信息，一般用于代码调试
    </script>
</html>

4.2 通过外部文件引入

<script src="js/index.js" type="text/javascript"></script>

注意：把js脚本放在外部Js中的时候，不要加入script标签

document.write（）可以也写图片 ，

document.write("<h1>hello,javascript</h1>");
console.log("hello,javascript!!!");

4.3 插入在标签之中

<div onclick="javascript:alert(10086)">123</div>

在实际开发中，html要与css、javascript单独进行存放，彼此分离。为了代码的简洁，结构化。

5、核心语法

这三种方式都可以用做代码调试，来观测变量

alert(width) 弹窗
document.write(width) 向网页的文档中(body）写入内容
console.log(width) 在控制台上打印输入内容

5.1 变量

js弱类型的语言

java是一个强类型的语言

声明变量使用var 关键字

typeof(width) 可以查看变量的数据类型

const x=10,y=15,z=20; 定义常量，常量需要有初始值。

5.2 数据类型

undefined 一个变量没有定义初始值，那么它的值就是undefined，未定义的意思。

定义一个变量赋值为：null ，则它的数据类型为object 。一个变量的初始值为null，有值，但是值为null()

number 数值类型。23，25.6

var num=10;
alert(typeof(num))  alert()弹出窗  typeof() 能判断一个变量的数据类型

boolean 布尔类型 true 和false

string类型：一组由单引号或者是双引号包括的内容。

5.3 String对象

.length 可以计算字符串对象的长度

<script type="text/javascript">
    var str="this is javascript!";
    console.log(str.length);
</script>

<script type="text/javascript">
    //字符串对象
    var str = "this is"
    var s=str.charAt(1) //可以获取指定索引值的字符串内容
    var d=str.indexOf('i',1)
    var f=str.substring(3,6)  // 第一个参数起始索引，第二个代表结束索引值
    console.log(f)
    =====
    var str = "thisjavascript"
    var arr=str.split('');
    for(var i=0;i<arr.length;i++){
        console.log(arr[i]+"\n")
    }
</script>

5.4 数组

语法

var fruit = new Array("apple", 98, true);

与java不同的地方，1.语法不同 2.数组里面可以存放不同数据类型的值 3.可以通过push进行数组数据的追加，动态的进行数组的扩容

5.5运算符

赋值运算符

= += -= *= /=

算术运算符

+ - *  /  %  ++  --

比较运算符

>   <   >=  <=  != ==(等于)  ===（全等于）

逻辑运算符

&&
||
！

条件运算符

var num= num2>num1? true:false
console.log(num)
console.log(typeof(num))

5.6 控制语句

顺序结构：边解释，边执行，自上而下

选择结构：

if …else

if (score >= 90) {
    console.log('优')
} else if (score >= 80) {
    console.log('良')
} else if (score >= 60) {
    console.log('中')
} else {
    console.log('差')
}

switch

var str = 'abc'
    switch (str) {
        case "hello":
            console.log('hello')
                break
                case "hi":
            console.log('hi')
                break
                default:
            console.log('未匹配')
                break
    }

循环结构

for …in与java的区别

for(var item in fruit){
    document.write(fruit[item]+"<br/>")
}

在Java中这个item代表是数组或者集合中的每一项，而在Js中代表的是数组中的一个索引。

5.7 输入与输出

var data=prompt("请输入一个数据","abc") // 第一个参数是提示语句，第二个参数为默认值
alert("您输入的数据为："+data)

5.8 语法规定

大小写敏感

对象，变量，函数【方法】驼峰命名法

分号：语法规定可以不加，但是为了语言的规范，咱们写的时候一定要加上。

6、js的函数

6.1 类似于Java中的方法

6.2 随意在脚本中定义一个方法，不需要出现在类中

6.3 分类为系统函数与自定义函数

6.1 系统函数

parserInt() 可以把string转化为number类型

parserFloat() 可以把string转化为number类型

isNaN() 如果不是数字，则返回true，如果为数字，则返回false

https://www.cnblogs.com/linny/articles/3254916.html

6.2 自定义函数

<!--触发执行函数的事件为单击事件-->
<div onclick="mathDemo(200,101)">123</div>

<script type="text/javascript">
	    //函数的定义
		//function 函数的标识符
		//sum 函数的名称
		//返回值是返给调用它的其他函数的
		function sum(num1,num2){
			return num1-num2
		}
		function mathDemo(n1,n2){
			var rs=sum(n1,n2)
			alert(rs)
		}		
</script>

7、全局变量与局部变量

1、全局变量是定义在script脚本之中，方法之外的变量叫做全局变量，被整个页面所共享。

2、局部变量是定义在函数之中，或者是代码块之中的变量叫做局部变量，作用范围在函数内部。

与java不同的地方：

var num1=100; 
function cale1(){
    if(num1>3){
        var num3=101;
    }
    alert(num3)
}

定义在代码块中的变量，在方法内部都可以进行访问。

8、事件

1、页面加载事件 onload

2、单击事件 onclick

3、鼠标移入 onmouseover （onmousemove不会穿透父级盒子）

4、鼠标移出 onmouseout （onmouseleave 不会穿透父级盒子）

5、鼠标双击 ondblclick ，判断是否为双击，两次单击的时间间隔为300ms以内

6、onkeydown 键盘的键按下就会触发的事件

 //dom对象，addEventListene添加一个事件的监听, keydown
    document.addEventListener('keydown',function(event){
    if(event.keyCode==13){
        //提交的代码
        alert('你按下了回车键，完成了数据提交')
    }
})

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="text" 
		onkeydown="kd()" 
		onkeyup="ku()" 
		onkeypress="kp()"/>
	</body>
	<script type="text/javascript">
		function kd(){
			console.log('keydown')
		}
		
		function ku(){
			console.log('keyup')
		}
		// keypress :按下了键盘上的键，然后有输出内容显示的时候才会触发。
		// 比如说：a 。如果按下tab，就不会触发
		function kp(){
			console.log('keypress')
		}
	</script>
</html>

7、域的内容被改变 onchange（重新选择了下拉列表项）选择的域的内容被改变就会触发

9、window对象

9.1 window对象常用方法

方法名称	说明
prompt( )	显示可提示用户输入的对话框
alert( )	显示带有一个提示信息和一个确定按钮的警示框
confirm( )	显示一个带有提示信息、确定和取消按钮的对话框
close( )	关闭浏览器窗口
open( )	打开一个新的浏览器窗口，加载给定 URL 所指定的文档
setTimeout( )	在指定的毫秒数后调用函数或计算表达式
setInterval( )	按照指定的周期（以毫秒计）来调用函数或表达式

var bool= window.confirm('确定要删除吗？');
if(bool){
    alert('你点击了确定按钮，正在执行删除操作')
}else{
    alert('你点击了取消，删除操作终止！')
}

open方法

window.open(“弹出窗口的url”,“窗口名称”,"窗口特征”)

属性名称	说明
height、width	窗口文档显示区的高度、宽度。以像素计
left、top	窗口的x坐标、y坐标。以像素计
toolbar=yes \| no \|1 \| 0	是否显示浏览器的工具栏。黙认是yes
scrollbars=yes \| no \|1 \| 0	是否显示滚动条。黙认是yes
location=yes \| no \|1 \| 0	是否显示地址地段。黙认是yes
status=yes \| no \|1 \| 0	是否添加状态栏。黙认是yes
menubar=yes \| no \|1 \| 0	是否显示菜单栏。黙认是yes
resizable=yes \| no \|1 \| 0	窗口是否可调节尺寸。黙认是yes
titlebar=yes \| no \|1 \| 0	是否显示标题栏。黙认是yes
fullscreen=yes \| no \|1 \| 0	是否使用全屏模式显示浏览器。黙认是no。处于全屏模式的窗口必须同时处于剧院模式

setTimeout('show()',3000) //过3秒钟以后会调用函数
//
function show(){
    alert("yes")
}

var i=0;
setInterval('show()',1000) //每隔1秒执行一次
function show(){
    console.log(i)
    i++;
}

9.2 history对象

history.go(-1)

* 9.3 location对象

function newPage(){
    location.replace("index.html")
}
function getHost(){
    var host=location.hostname
}

10、 document对象

名称	说明
getElementById()	返回对拥有指定id的第一个对象的引用
getElementsByName()	返回带有指定名称的对象的集合
getElementsByClassName()	返回带有指定类名的对象的集合
getElementsByTagName()	返回带有指定标签名的对象的集合
write()	向文档写文本、HTML表达式或JavaScript代码

操作dom样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.info{
				width: 300px;
				height: 300px;
				background-color: antiquewhite;
			}
		</style>
	</head>
	<body>
		<button onclick="addStyle()">添加样式</button>
		<button onclick="removeStyle()">移除样式</button>
		<div id="container">
			HTML
		</div>
	</body>
	<script type="text/javascript">
		function addStyle(){
			var node=document.getElementById("container");
			node.className="info"
			// node.style.backgroundColor="#ff0000"
			// node.style.width="300px"
			// node.style.height="300px"
			// node.style.fontSize="40px"
		}
		
		function removeStyle(){
			var node=document.getElementById("container");
			node.className=""
			// node.style.backgroundColor=""
			// node.style.width=""
			// node.style.height=""
			// node.style.fontSize=""
		}
		
	</script>
</html>