####溢出设置overflow
visible(默认) 超出范围显示
hidden 超出范围不显示
scroll 超出范围滚动显示
###JavaScript
作用:给页面添加动态效果
和Java没有任何关系,只是为了蹭热度
语言特点:
属于脚本语言,不需要编译直接解析执行
基于面向对象
属于弱类型语言 int x = 10; String s = “abc”; 弱类型 var x = 10; var s = “abc”;
安全性高,JavaScript语言只能访问浏览器内部的数据,浏览器以外的数据不允许访问
交互性高,因为JS语言可以嵌入到html页面中直接和用户进行交互
###如何在html页面中引入JavaScript
内联:在标签的事件属性中添加js代码,当事件触发时执行js代码
内部:在html页面的任意位置添加script标签,标签体内写js代码,当页面加载时执行
外部:在单独的js文件中写js代码,在html页面中通过script标签的src属性引入,页面加载时执行
###语法
包括: 变量 数据类型 运算符 各种语句 方法 面向对象
###变量声明和赋值
JavaScript属于弱类型语言
java: int x = 10; String s = “abc”; x=“abc”;(报错,类型不匹配) Person p = new Person();
JS: var x = 10; var s = “abc”; x=“abc”;不报错 var p = new Person();
###数据类型
JavaScript中只有对象类型
几种常见的对象类型:
数值:number 相当于java中所有数值类型的综合 var x=18; var y = 18.5;
字符串:string 可以用单引号或双引号赋值 var s = “abc”/‘abc’;
布尔值:boolean true/false
未定义:undefined 当变量只声明不赋值时 此时变量的类型为未定义类型.
自定义:object Person Car Hero
###运算符 + - * / % > < >= <= = != ==
和Java大体相同
==和===, ==是先统一两个变量的类型再比较值,===先比较类型如果类型相等再比较值
"666"==666 true; "666"===666 false
除法运算: 会根据结果自动转换整数或小数 ,
java: int x = 5; int y=2; x/y=? 2
js: var x=5; var y=2; x/y=? 2.5 x=6 x/y=?3
typeof 变量; 作用: 获取变量的类型
###语句 if else for while switch case
for循环中 int i 改成 var i
###方法
java: public 返回值类型 方法名(参数列表){方法体}
js : function 方法名(参数列表){方法体}
如何声明常见的四种方法:
无参无返回值
无参有返回值
有参有返回值
有参无返回值
js中有三种声明方法的格式:
function 方法名(参数列表){方法体} **********
var 方法名 = function(参数列表){方法体}
var 方法名 = new Function(“参数1”,“参数2”,“方法体”);
###和页面相关的方法
通过元素的id 获取元素对象
var d = document.getElementById(“d1”);
获取和修改元素的文本内容
获取: d.innerText;
修改: d.innerText=“xxx”;
获取和修改文本框的值
修改: input.value=“abc”;
获取: input.value;
获取和修改元素的html内容
获取: d.innerHTML
修改: d.innerHTML="<h1>abc</h1>";
###NaN
Not a Number: 不是一个数.
isNaN(x) 判断x是否是NaN 返回值true代表是NaN(不是数) 返回值false代表不是NaN(是数)
练习:
1.溢出方式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div{ width: 300px; height: 300px; border: 1px solid blue; /* visible(默认) hidden超出隐藏 scroll超出滚动*/ overflow:scroll; } </style> </head> <body> <div> <img src="../2.jpg" > </div> </body> </html>
显示效果
2.引入方式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- 内联引入方式 --> <input type="button" value="按钮" onclick="alert('内联引入成功!')"/> <!-- 内部引入方式 --> <script type="text/javascript"> alert("内部引入成功!") </script> <!-- 引入外部js文件 --> <script src="my.js" type="text/javascript" charset="utf-8"></script> </body> </html>
显示效果
