JavaScript
JavaScript
勤劳的开发者px 发表于5个月前
JavaScript
  • 发表于 5个月前
  • 阅读 0
  • 收藏 0
  • 点赞 0
  • 评论 0

标题:腾讯云 新注册用户域名抢购1元起>>>   

1.什么是javaSript?

  • 基于对象和事件驱动的脚本语言

  • 基于对象:只有封装的概念

  • 事件驱动:eg:点击,滑动手机屏幕

  • 只需要浏览器解释执行

  • js一些特点:
  1. ​ 跨平台性
  2. ​ 交互性
  3. ​ 安全性
  • JavaScript的组成部分:

                                       

2.js可以做什么?

  • 操作html标签(可以使页面动起来),服务器....

  • html当做毛坯房,css装修,js智能家居

3.javeScript和java的联系和区别

  • js是基于对象的,java是面向对象的

  • js只需要浏览器解释执行,java需要编译成class文件,再执行

  • js是弱类型语言,java是强类型语言

int i = 3;  i ="aaa"; java不可以
var i = 3;  i= "aaa"; js是可以的

4.html和js结合方式

  • 内部结合
<script>
alert("哈哈哈");
</script>
  • 外部引入
  1. 定义一个js文件,扩展名是js
  2. ,通过script标签引入
<script type="text/javascript" src="../../js/test.js" >
//js代码不会执行      ​ 属性:  src:js文件路径
</script>

注意:

​ 通过外部引入,script标签里面的js代码不会执行

5.js变量

int i = 3;  var i = 3;
String str = "aaa"; var str = "aaa";
  • js变量都是通过var来定义的

6.js数据类型

基本数据类型

  1. ​ Undefined; 声明了变量,但没有赋值; var i;
  2. ​ Null;
  3. ​ Boolean
  4. ​ Number; 数字类型;
  5. ​ String;

引用数据类型

  1. ​ js内置对象: 数组,Math,Date....
  2. ​ document.getElementById("id名");

运算符

number类型和字符串做-,*,/的时候,字符串自动的进行类型转换,前提字符串里面的数值要满足number类型

var i = 3;
var j = "6";
alert(j-i);//结果是3, "6" ==> 6
alert(j*i);//结果是18,
alert(j/i);//结果是2,

除法,保留小数

var i = 2;
var j = 5;
alert(j/i);//2.5

==比较数值,=== 比较数值和类型

var i = 2;
var j = "2";
alert(i==j); // ==比较的仅仅是数值, true
alert(i===j); // ===比较的是数值和类型.false

8.js语句

  • for

    //99乘法表
        <script>
            for(var i = 1; i<=9 ; i++){
                for(var j =1; j <= i;j++){
                    document.write(j+""+i+"="+ji);
                    //空格
                    document.write("&nbsp");
                }
                //换行
                document.write("<br />");
            }
        </script>
  • if-else

  • while()

switch

<script>
    var str = "java";
​
    switch (str){
        case "java":
            alert("java");
            break;
        case "C++":
            alert("C++");
            break;
​
        case "Android":
            alert("Android");
            break;
​
    }
</script>

9.js函数(方法)

  • function 函数名(参数,参数){函数体}

注意:

​ 不管有没有返回值,函数格式是一样的 function 函数名(参数列表){函数体}

​ 如果有参数,参数不需要加var关键字(不需要加类型)

eg:	function getSum(i,j){
			return i+j;
		}	
	var sum =  getSum(5,6);
	alert(sum);

10.全局变量和局部变量

<script>
		//全局变量====> 作用范围不一样,生命周期不一样
		var i = 10;
	
		function sayHello(){
			//局部变量
			var j = 5;
			//console.log("hello..");
			i = i+10;
		}
		sayHello();
//		console.log(j);
		console.log(i);//20
</script>

定义在函数体里的是局部变量,定义在函数体外的是全局变量

作用范围不一样

11.js开发步骤(操作html)

  1. 确定事件 点击,获得焦点....
  2. 创建一个函数响应这个事件
  3. 得到要操作的对象(document.getElementById("id名")) ;
  4. 操作这个对象(改变属性值等)

12.定时任务

setInterval(code,time) 按照指定的周期(以毫秒计)来调用函数或计算表达式

  1. 参数说明: code即执行的代码;
  2. ​ 方式一: 函数名 setInterval(show,3000);
  3. ​ 方式二:函数字符串 setInterval("show()",3000);
  4. ​ time:时间,单位毫秒

setTimeout(code,time):在指定的毫秒数后调用函数或计算表达式,延时执行

  1. 参数说明: code即执行的代码;
  2. ​ 方式一: 函数名 setTimeout(show,3000);
  3. ​ 方式二:函数字符串 setTimeout("show()",3000);
  4. ​ time:时间,单位毫秒

13.BOM里面的五个对象

window: 窗体对象

方法 作用
alert() 显示带有一段消息和一个确认按钮的警告框
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框
setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式
setTimeout() 在指定的毫秒数后调用函数或计算表达式
clearInterval() 取消由 setInterval() 设置的 timeout。
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。

navigator:浏览器对象

属性 作用
appName 返回浏览器的名称
appVersion 返回浏览器的平台和版本信息

screen:屏幕对象

方法 作用
width 返回显示器屏幕的宽度
height 返回显示屏幕的高度

history:历史对象

方法 作用
back() 加载 history 列表中的前一个 URL
forword() 加载 history 列表中的下一个 URL
go() 加载 history 列表中的某个具体页面

location:当前路径信息

属性 作用
host 设置或返回主机名和当前 URL 的端口号
href 设置或返回完整的 URL
port 设置或返回当前 URL 的端口号

14.js常用事件

  • onclick;点击事件

  • onload;等页面或者图片加载完成

  • onfocus;获得焦点

  • onblur;失去焦点

  • onchange;元素的内容改变, 通常用在下拉菜单里面

  • onkeydown 某个键盘的键被按下

  • onkeypress 某个键盘的键被按下或按住

  • onkeyup 某个键盘的键被松开

  • onmousedown 某个鼠标按键被按下

  • onmousemove 鼠标被移动

  • onmouseout 鼠标从某元素移开

 

innerHTML:向一块区域插入html

支持html;会把之前的内容覆盖

function writeIn(){
			//获取span对象
			var  spanObj =  document.getElementById("spanId");
			//spanObj.innerHTML = "你好世界";
			//支持html,会把之前的内容覆盖
			spanObj.innerHTML = "<font color='red'>你好世界</font>";
			
		}

 

共有 人打赏支持
粉丝 1
博文 51
码字总数 108225
评论 (0)
×
勤劳的开发者px
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: