JAVAscript基础(1)

最新推荐文章于 2024-07-14 20:43:55 发布

Text789

最新推荐文章于 2024-07-14 20:43:55 发布

阅读量518

点赞数

文章标签： linq html safari

本文链接：https://blog.csdn.net/Text789/article/details/123385107

版权

1.为什么要学习javascript？

JavaScript---(1).为网页增加动态效果

(2).可以发送ajax请求，与后端处理器进行数据交换可以让网页活起来

2.什么是javascript？

JavaScript 是一个面向对象的脚本语言

面向对象是一种变成思想

面向对象是从面向过程升华而来的

例如：从电视塔到钟楼

面向过程思想--将从电视塔开始到钟楼结束中途所经历的每一步都要记录，记录就是一个过程【公交车】

面向对象思想--将电视塔作为起始对象，钟楼作为结束对象。【滴滴】

脚本语言---编写好以后，进入运行环境中可以立即执行的编程语言就是脚本语言[JavaScript]

编译语言---编写好以后，需要编译器进行转换，运行转换以后的程序这种语言编译语言【Java】

3.JavaScript的版本

网景公司--运行在浏览器上的脚本语言--LiveScript--JavaScript

4.JavaScript的作用(为网页增加动态效果)

JavaScript：直接写入 HTML

JavaScript：对事件的反应

JavaScript：改变html的内容

JavaScript：改变html的图像

JavaScript：改变html样式

JavaScript：验证输入

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <script>
           function inputhtml(){
               document.write("<h2>测试写出HTML</h2>");
           }

           function testEvent(){
               alert("测试事件反应");
           }

           function testContent(){
               document.getElementById("p1").innerHTML="p元素中的内容被改变";
           }

           function testImg(){
               document.getElementById("img1").src="imgs/avatar3.png";
           }

           function testCss(){
               document.getElementById("div1").style.width="200px";
               document.getElementById("div1").style.height="200px";
           }

           function testUserName(){
               var username=document.getElementById("text1").value;
               var spanObj=document.getElementById("span1");
               if(username==null || username==""){
                   spanObj.innerHTML="用户名不能为空!";
               }else{
                   spanObj.innerHTML="";
               }
           }
       </script>
   </head>
   <body>
       <h1>1.JavaScript：直接写入 HTML</h1>
       <input type="button" value="测试写出HTML" οnclick="inputhtml()">
       <h1>2.JavaScript：对事件的反应</h1>
       <input type="button" value="测试事件的反应" οnclick="testEvent()">
       <h1>3.JavaScript：改变 HTML 内容</h1>
       <p id="p1">测试改变 HTML 内容</p>
       <input type="button" value="测试改变 HTML 内容" οnclick="testContent()">
       <h1>4.JavaScript：改变 HTML 图像</h1>
       <img id="img1" src="imgs/avatar2.png" />
       <input type="button" value="改变 HTML 图像" οnclick="testImg()">
       <h1>5.JavaScript：改变 HTML的样式</h1>
       <div id="div1" style="width: 100px;height: 100px;background-color: blue;"></div>
       <input type="button" value="改变HTML的样式" οnclick="testCss()">
       <h1>6.JavaScript：验证输入</h1>
       <input type="text" id="text1" /><span id="span1"></span><br>
       <input type="button" value="验证用户名" οnclick="testUserName()">
   </body>
</html>

javascript代码需要事件驱动执行

javascript代码放在script标记中

5.javascript的用法

(1).javascript代码出现的位置，script标记中

script标记----head中 body的开始处和结束处

(2). JavaScript中的元素

变量运算符号流程控制语句认识函数认识对象认识事件发送ajax请求

6.html中如何书写JavaScript代码

head中的script标记中编写，需要事件驱动执行

(1).写在html元素的事件中

(2).head中的script标记中编写

(3).链接外部javascript文件【.js】

mytest.js
function test1(){
var num1=1001,name="zhangsan";
alert(num1+","+name);
}

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <script>
           function testnum1(){
               var num;
               num=100;
               alert(num);
           }
       </script>
       <script src="mytest.js"></script>
   </head>
   <body>
       <h1>1.写在html元素的事件中</h1>
       <input type="button" value="写在html元素的事件中"
           οnclick="var num=100;alert(num)"/>
       <h1>2.head中的script标记中编写</h1>
       <input type="button" value="head中的script标记中编写"
           οnclick="testnum1();"/>
       <h1>3.链接外部javascript文件【.js】</h1>
       <input type="button" value="链接外部javascript文件【.js】"
           οnclick="test1();"/>
   </body>
</html>

8.JavaScript输出显示数据

(1).使用 window.alert() 弹出警告框。

window.alert(num);

alert(num);

(2).使用 document.write() 方法将内容写到 HTML 文档中。

document.write(num);

(3).使用 innerHTML 写入到 HTML 元素。

document.getElementById("h11").innerHTML=num;

(4).使用 console.log() 写入到浏览器的控制台。

console.log(num1+","+name);

9.注释

html注释 

css注释 /* 注释内容，也可以出现多行注释内容 */

JavaScript注释 //舒适内容 (单行内容注释)

/* 多行注释内容也可以出现单行内容注释 */

10.变量

变量是用来保存程序中的运行数据的

变量组成:(1)var 关键词来声明变量.【变量】

(2).变量名称，遵循变量名称的命名规则

(3).数据类型，决定了数据所能进行的具体操作

(4).作用域,变量的有效范围【暂时不处理】

变量的创建，使用var关键词来声明变量。

每一个变量都有自己的名称，变量的名称由一定的规则

(1).可以使用字母，数字，$，_组成，数字不能开头

(2).变量名称对大小写敏感

(3).不要用中文

变量的数据类型----用来决定数据所能进行的具体操作

例如：数字类型的变量可以进行【+ - * /】运算

JavaScript中的数据类型有2大类：值类型(基本类型)和引用数据类型

值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、

未定义（Undefined）、Symbol【ES6】。

引用数据类型：对象(Object)、数组(Array)、函数(Function)。

使用“=”为变量保存数据值，叫赋值

变量的声明创建方式

(1).定义+赋值：var num=100;

(2).先定义后赋值

var num;//定义

num=100;//赋值

(3).一条语句，多个变量

var num1=1001,name="zhangsan"；

Text789

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JAVAscript基础(1)

1.为什么要学习javascript？JavaScript---(1).为网页增加动态效果(2).可以发送ajax请求，与后端处理器进行数据交换可以让网页活起来2.什么是javascript？JavaScript 是一个面向对象的脚本语言面向对象是一种变成思想面向对象是从面向过程升华而来的例如：从电视塔到钟楼面向过程思想--将从电视塔开始到钟楼结束中途所经历的每一步都要记录，记录就是一个过程【公交车】面向对象思想--将电视塔作为起始对象，钟楼作为结束对象。【滴滴】脚
复制链接

扫一扫