JavaScript

最新推荐文章于 2024-05-03 23:30:14 发布

weixin_45741427

最新推荐文章于 2024-05-03 23:30:14 发布

阅读量67

点赞数

本文链接：https://blog.csdn.net/weixin_45741427/article/details/103328919

版权

JavaScript JS

html负责搭建页面结构和内容(盖房子) CSS负责美化页面(装修) JS给页面添加动态效果和动态内容
js历史
95年由网景公司(NetScape)发布LiveScipt,同年更名为JavaScript 和Java语言没关系为了蹭热度
JS特点:

属于脚本语言,不需要编译,由浏览器解析执行
可以嵌入到html页面中
基于面向对象, 属于弱类型语言
具有良好的交互性
安全性高,禁止访问浏览器外部的内容

js的引入方式

内联:在标签的事件属性中添加js代码,当事件触发时代码执行
内部:在html页面中任意位置添加script标签,在标签内部写js代码
外部:在单独的js文件中写js代码,通过script标签的src属性引入


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	alert("内部引入成功!");
</script>
<!-- 引入外部js文件 -->
<script type="text/javascript"
	 src="first.js"></script>
</head>
<body>
<input type="button" value="按钮" 
	οnclick="alert('内联引入成功!')">  
</body>
</html>

JS语法

数据类型

JS中只有对象类型
常见的对象类型:

数值类型: number
字符串类型: string
布尔值类型: boolean
未定义类型: undefined
自定义类型: object

变量的声明和赋值

JS属于弱类型语言
java: int x = 10;
js: var x = 10;
var s = “abc”;
var b = true/false;
var u;
var p = new Person();
p = 10;

常见类型介绍

数值类型:number
数值类型底层全部是浮点数,在使用的过程中会自动转换整数或者小数
var x = 5;
var y = 2;
var z = x/y; z=2.5

var x = 6;
var y = 2;
var z = x/y; z=3

java : int x = 5; int y = 2; int z = x/y; z=2

NaN: Not a Number 不是一个数, 判断一个变量是否是数, 通过isNaN()方法判断变量是否是数 true代表不是数 false代表是数

布尔值类型:boolean
var b = true/false;
字符串:string
var s1 = “abc”;
var s2 = ‘abc’;
未定义:undefined

当一个变量只声明不赋值的时候,此变量的类型为未定义

各种数据类型之间的隐式转换

发生条件：
①" " + X ：X转字符串
②X （— * /） number ：X转number
③if(X) 、while（X）。。：X转 boolean

数值类型

转字符串: 直接转 18->“18” “abc”+18 =“abc18”
转布尔值: 0和NaN转false 其它true

布尔值类型

转字符串: 直接转 true/false-> “true”/“false” “abc”+true=“abctrue”;
转数值: true->1 false->0 18+true

字符串

转数值: 能转直接转 “18”->18 不能转则转成NaN “abc”->NaN
“18”+8 =“188” 加法运算会把数值转成字符串
“18”-8 = 10 -*/把字符串转成数值
“abc”-8 = NaN 任何数值和NaN进行任何运算结果都是NaN
转布尔值: 空字符串转false “”->false 其它转true

未定义

转字符串: 直接转 “abc”+undefined = “abcundefined”
转数值: 转成NaN 18+undefined = NaN
转布尔值: false if(undefined){alert(“xxx”)}

null

转字符串: 直接转 “abc”+null = “abcnull”;
转数值: 转成0 18+null = 18 ;
转布尔值: false if(null){alert(“xxx”)}

运算符+ - * / % =

和Java大体相同
和=,==先统一两个变量的类型再比较值是否相等, ===先比较类型,如果类型相同再比较值 “66”==66 “66”===66
除法运算会自动转换整数和小数 5/2=2.5 6/2=3;
typeof x; 获取变量的类型 typeof 66 + 6 = “number6”

语句 if else while for switch cash

和Java大体相同
if和while括号里面的内容如果不是布尔值会自动隐式转换成布尔值
for循环中的 int i改成 var i , 不支持增强for循环

方法声明

java: public void 方法名(参数列表){方法体}
js: function 方法名(参数列表){方法体}
常见的四种方法:

无参无返回值
无参有返回值
有参五返回值
有参有返回值

JS中有三种声明方法的方式

function 方法名(参数列表){方法体}
var 方法名 = function(参数列表){方法体}
var 方法名 = new Function(“参数1”,“参数2”,“参数3”,“方法体”);

和页面标签相关的方法

通过id获取页面中的标签
var d = document.getElementById(“id”);
获取和修改标签的文本内容
d.innerText = “abc”;
d.innerText;
获取和修改文本框的文本内容
i.value=“abc”;
i.value;
获取和修改标签的html内容
d.innerHTML=“
abc
”;
d.innerHTML;


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	function fn1(){
		//得到div1对象
		var div1 = document.getElementById("d1");
		alert(div1.innerText);
	}
	function fn2(){
		//得到div2
		var div2 = document.getElementById("d2");
		div2.innerText="hehe"; //获取内容如 <p>XXXX</p> 获取的是XXXX
	}
	function fn3(){
		var input = document.getElementById("i1");
		input.value="haha";  //获取文本框里的内容
	}
	function fn4(){
		var i2 = document.getElementById('i2');
		var ul = document.getElementById('ul');
		//ul.innerHTML+="<li>"+i2.value+"</li>"  追加子标签
		ul.innerHTML="<p>2222</P>" //修改此便签
	}
</script>
</head>
<body>
<input type="button" value="获取div1的内容" 
	οnclick="fn1()">
<input type="button" value="修改div2的内容"
	οnclick="fn2()">
	<input type="button" value="修改文本框的内容"
	οnclick="fn3()">

<div id="d1">div1</div>
<div id="d2">div2</div>
<input type="text" id="i1" value="heihei"><br>
<input type="text" id="i2" value="">
<input type="button" value="添加" οnclick="fn4()" >
<ul id="ul"></ul>

</body>
</html>

回顾

JavaScript 给页面添加动态效果和动态内容
三种引入方式

内联:在标签的事件属性中添加js代码
内部:在页面的任意位置添加script标签
外部:在单独的js文件中写js代码通过script标签的src属性引入

数据类型

js中只有对象类型
常见的对象类型有:
1. 数值 number
2. 字符串 string
3. 布尔值 boolean
4. 未定义 undefined
5. 自定义 object

变量声明和赋值

js属于弱类型语言
var x = 10;
x = “abc”;

常见数据类型间的隐式转换

字符串: 转数值能转直接转不能则转成NaN ,转布尔值 ""转false 其它true
数值:转字符串直接转转布尔值 0和NaN转false 其它true
布尔值:转字符串直接转转数值 true->1 false->0
undefined: 转数值NaN 转布尔值false
null:转数值0 转布尔值false

运算符

和Java大体相同
:先统一类型再比较值和=:先比较类型如果相等再比较值
除法运算会自动转换整数和小数
typeof x 获取变量的类型 typeof 66+6 = “number6”;

语句

和java大体相同
if和while括号里面的内容如果不是布尔值会自动隐式转成布尔值
for循环把int i改成var i 不支持新for循环

方法声明

function 方法名(参数列表){方法体}
var 方法名 = function(参数列表){方法体}
var 方法名 = new Function(“参数1”,“参数2”,“方法体”);

和页面相关的方法

通过id获取页面标签
var d = document.getElementById(“id”)
获取和修改标签的文本内容
d.innerText = “xxx”;
d.innerText;
获取和修改文本框的文本内容
input.value=“xxx”;
input.value
获取和修改标签的html内容
d.innerHTML +=“asdfa”;
d.innerHTML;

weixin_45741427

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript

JavaScript JShtml负责搭建页面结构和内容(盖房子) CSS负责美化页面(装修) JS给页面添加动态效果和动态内容js历史95年由网景公司(NetScape)发布LiveScipt,同年更名为JavaScript 和Java语言没关系为了蹭热度JS特点:属于脚本语言,不需要编译,由浏览器解析执行可以嵌入到html页面中基于面向对象, 属于弱类型语言具有良好...
复制链接

扫一扫