JavaScript
JavaScript
- 作用: 给页面添加动态效果
- 和Java没关系,名字是为了蹭热度
- 语言特点:
- 属于脚本语言,不需要编译直接执行
- 基于面向对象
- 属于弱类型语言
强类型:int x=10; String name=“张三”; int y;
弱类型:var x=10; var name=“张三”; - 安全性高: js语言只能访问浏览器内部的数据不能访问浏览器以外的数据.
- 交互性高: js语言可以直接嵌入到html页面中,可以让用户脱离后端服务器只在前端页面和页面内容进行交互.
如何在html页面中引入JavaScript代码
三种引入方式
- 内联: 在标签的事件属性中添加js代码,当事件触发时执行
- 事件: 就是系统提供的一些特定时间点
- 点击事件:就是元素被点击时的时间点
- 内部: 在html页面中的任意位置写script标签,在标签体内写js代码.
- 外部: 在单独的js文件中写js代码,在html页面中通过script标签的src属性引入, 以后工作中用的最多,
好处是可以多个页面复用同一个文件, 可以将html代码和js代码分离便于维护和升级.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--1.内联引入方式onclick点击事件-->
<input type="button" value="内联按钮" onclick="alert(内联触发)" />
<!--2.内部引入方式-->
<script type="text/javascript">alert("内部触发!");</script>
<!--3.外部引入方式-->
<script type="text/javascript" src="first.js"></script>
</body>
</html>
语法
数据类型,变量,运算符,语句, 方法声明
变量声明和赋值
JavaScript语言属于弱类型语言
java: int x =10; String s = "abc"; x="xyz";(报错 类型不匹配)
Person p = new Person();
JavaScript: var x=10; var s="abc"; x="xyz";可以执行 var p = new Person();
数据类型
- 在JavaScript中只有对象类型
- 常见的对象类型:
- 数值:number 相当于java中所有数值类型的总和
- 字符串:string 可以用单引号或双引号修饰
- 布尔值:boolean true/false
- 未定义:undefined 当变量只声明不赋值时,此变量的类型为未定义.
- 自定义:object Person Car Hero
运算符 + - * / % > < >= <= != == ===
- 和java大体相同
- ==和 ===,==先统一等号两边变量的类型再比较值, ===先比较类型是否相等,相等后再比较值
"666"==666 true "666"===666 false
- typeof x获取变量类型
语句
- 和java大体相同
- for循环中int i=0;改为var i=0;
方法声明及调用
- java:public 返回值类型 方法名(参数列表){方法体}
- JS:function 方法名(参数列表){方法体}
- 三种声明方法的方式:
- function 方法名(参数列表){方法体}
- var 方法名 = function(参数列表){方法体}
- var 方法名 = new Function(“参数a”,“参数b”,“方法体”);
页面相关的方法
通过标签id获取标签对象
var d = document.getElementById("id");
获取和修改元素的文本内容
- d.innerText = “xxx”; 修改元素的文本内容
- d.innerText 获取
获取和修改文本框的值
var i = document.getElementById("i1");
//获取文本框的值
//alert(i.value);
//修改文本框的值
i.value="按钮点击了";
修改元素的HTML内容
//修改
d1.innerHTML="<h1>abc</h1>";
//追加内容
d1.innerHTML+="<h2>xyz</h2>";
NaN
Not a Number不是一个数
这只是一小部分,后面会持续更新的呦,望博主们多多支持小范!