javascript入门篇

最新推荐文章于 2022-05-26 14:43:30 发布

eat_Cookie

最新推荐文章于 2022-05-26 14:43:30 发布

阅读量207

点赞数

分类专栏： javascript Web

本文链接：https://blog.csdn.net/qq_39088036/article/details/88552582

版权

Web 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

javascript

3 篇文章 0 订阅

订阅专栏

PS：阅读此文前请确保你已经有了HTML／CSS的一丢丢基础！

一、介绍

JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。

先来看一个例子

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<html>
<head>
       <title>欢迎来到javascript的世界</title>
    </head>
    <body>
       <script>
       document.write("Hello,World!");
       </script>
    </body>
</html>

在上面的代码中，<script></script>标签中的代码即位javascript，它在此处的作用为输出"Hello,World!".

二、基本语法

1.定义变量

var + 变量名

如：var att=3;

var btt="aaaa";

变量命名规则与主流变量名命名规则一致。

2.定义函数

function + 函数名

如：function add(){}

3.if...else..结构

如:

function add()

{

var a=2;

var b=3;

if(a+b==5) document.write("Good!");

}

三、特殊函数

1.alert()

alert(字符串或变量);

如：

var mychar = "Hello,World!";

alert(mychar);//进入网页时弹出一个对话框

2.confirm()

confirm(srt)//返回值为布尔变量

如：

var mychar=confirm("Please click here");

if(mychar==true){

document.write("LALALA！");

}

else {

document.write("LABABA!");

}

//点击确认按钮，函数返回true，继续执行if结构内的代码，反之执行else结构内的代码。

8.prompt()

prompt(str1, str2);

str1: 要显示在消息对话框中的文本，不可修改 str2：文本框中的内容，可以修改

返回值:

(1)点击确定按钮，文本框中的内容将作为函数返回值 .(2) 点击取消按钮，将返回null

如：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<html>
<head>
       <title>欢迎来到javascript的世界</title>
    </head>
    <body>
       <script>
       var myname=prompt("请输入你的姓名:","www");
       if(myname!=null)
         {   alert("你好"+myname); }
       else
         {  alert("你好 my friend.");  }
       </script>
    </body>
</html>

四、DOM

文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。

（1）通过id获取元素

var ts=document.getElementById("con");//con 为html代码中一个元素的id

（2）innerHTML属性

通过innerHTML属性改变HTML元素中的内容 object.innerHTML

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>innerHTML</title>
</head>
<body>
<h2 id="con">javascript</H2>
<p> JavaScript</p>
<script type="text/javascript">
  var mychar=document.getElementById("con");
  document.write("原标题:"+mychar.innerHTML+"<br>"); //输出原h2标签内容
  mychar.innerHTML="Hello world!";
  document.write("修改后的标题:"+mychar.innerHTML); //输出修改后h2标签内容
</script>
</body>
</html>

（3）改变HTML样式

object.style.property= new style;

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>style样式</title>
</head>
<body>
  <h2 id="con">I love JavaScript</H2>
  <p> JavaScript使网页显示动态效果并实现与用户交互功能。</p>
  <script type="text/javascript">
    var mychar= document.getElementById("con");
    mychar.style.color="red";
    mychar.style.backgroundColor="red";
    mychar.style.width="300px";
  </script>
</body>
</html>

（4）显示和隐藏效果

object.style.dispaly= value;

//value = "block" 显示

//value = "none" 隐藏

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>display</title>
    <script type="text/javascript"> 
        function hidetext()  
		{  
		var mychar = document.getElementById("con");
        mychar.style.display="none";
		}  
		function showtext()  
		{  
		var mychar = document.getElementById("con");
        mychar.style.display="block";
		}
    </script> 
</head> 
<body>  
    <h1>JavaScript</h1>  
    <p id="con">欢迎来到javascript的世界</p> 
    <form>
       <input type="button" onclick="hidetext()" value="隐藏内容" /> 
       <input type="button" onclick="showtext()" value="显示内容" /> 
    </form>
</body> 
</html>

持续更新～

eat_Cookie

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript入门篇

PS：阅读此文前请确保你已经有了HTML／CSS的一丢丢基础！一、介绍JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。先来看一个例子&lt;%@ page language="java" contentType="t...
复制链接

扫一扫