Web-04-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不是一个数

这只是一小部分,后面会持续更新的呦,望博主们多多支持小范!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值